Tìm hiểu về AngularJS
MỤC LỤC CHƯƠNG I: TỔNG QUAN VỀ ANGULAR JS FRAMEWORK 1.1. Ngôn ngữ lập trình web JavaScript 1.1.1. Lịch sử phát triển .1 1.1.2. Javascript gì? 1.1.3. Javascript làm gì? 1.2. Tổng quan về AngularJs framework 1.2.1 Lịch sử phát triển 1.2.2. Angular JS gì? 1.2.3. Các tính .3 1.2.4. Đặc trưng 1.2.5. Mô hình MVC 1.2.6. SPA – Single Page Application .5 CHƯƠNG II: ANGULAR JS FRAMEWORK 2.1. Tại phải sử dụng AngularJs? 2.2. AngularJs lập trình nào? 2.2.1. Cài đặt AngularJs .6 2.2.2. Ví dụ đơn giản 2.2. Các thành phần của AngularJs .8 2.2.1 Angular Template .8 2.2.2. Modules 2.2.3. Scope 13 2.2.4. Model .13 2.2.5. Controller .13 2.2.6.Expression (Biểu thức) .14 2.2.7. Filters (Bộ lọc) .15 2.2.8. Directives .16 2.2.9. Services 18 2.2.10. Multiple Views and Routing 19 2.2.11. Form validation 22 2.3. Lập trình AngularJS phía server với Node.js 23 2.3.1.Node.js gì? .23 2.3.2.Node.js làm gì? 23 2.3.3. Block code Non-block code 23 2.3.4.Ứng dụng .24 2.4. Công cụ lập trình với AngularJS .25 2.4.1 Yeoman .25 2.4.2. WebStorm 26 2.5. Khởi chạy ứng dụng 27 2.6. Testing and Debug 27 2.6.1. Karma .27 2.6.2. Cài đặt Karma 27 2.6.3. Test với Karma .27 TÀI LIỆU THAM KHẢO .29 Tìm hiểu về AngularJS CHƯƠNG I: TỔNG QUAN VỀ ANGULAR JS FRAMEWORK 1.1. Ngôn ngữ lập trình web JavaScript 1.1.1. Lịch sử phát triển - Được phát triển Brendan Eich Hãng truyền thông Netscape với tên Mocha, sau đổi tên thành LiveScript, cuối thành JavaScript. - JavaScript bổ sung vào trình duyệt Netscape phiên bản 2.0b3 trình duyệt này vào tháng 12 năm 1995. JavaScript bổ sung vào trình duyệt Internet Explorer Internet Explorer phiên bản 3.0 phát hành tháng năm 1996. 1.1.2. Javascript gì? - JavaScript một ngôn ngữ lập trình kịch bản dựa đối tượng phát triển từ ý niệm nguyên mẫu. Ngôn ngữ này dùng rộng rãi cho trang web, dùng để tạo khả viết script sử dụng đối tượng nằm sẵn ứng dụng. 1.1.3. Javascript làm gì? - Trên trình duyệt, nhiều trang web sử dụng JavaScript để thiết kế trang web động một số hiệu ứng hình ảnh thông qua DOM. JavaScript dùng để thực một số tác vụ thực với HTML kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh . - Bên trình duyệt, JavaScript sử dụng tập tin PDF Adobe Acrobat và Adobe Reader. Điều khiển Dashboard hệ điều hành Mac OS X phiên bản 10.4 có sử dụng JavaScript. 1.2. Tổng quan về AngularJs framework 1.2.1 Lịch sử phát triển - Dự án AngularJS năm 2009, lập trình viên Misko Hevery Google viết ra. Misko và nhóm lúc này tham gia vào dự án Google tên Google Feedback. Với AngularJS, Misko rút ngắn số dòng code front-end từ 17000 dòng khoảng 1500. Với thành công đó, đội ngũ dự án Google Feedback định Nguyễn Minh Sang Tìm hiểu về AngularJS phát triển AngularJS theo hướng mã nguồn mở. Theo thông số từ Github mà thấy, dự án AngularJS có gần 11000 người theo dõi và 2000 lượt fork. - Công nghệ HTML hỗ trợ tốt cho trang web tĩnh, kiểu trước năm 2000 vậy. Khi bạn xây dựng trang web với PHP, Node/Express, hay Ruby thì một trang web tĩnh với nội dung thay đổi bạn gửi request về máy chủ, máy chủ render trang với nội dung tương ứng. Tuy nhiên mọi thứ thay đổi nhiều từ phát triển HTML5, có chống lưng từ ông lớn Google, Yahoo, Facebook, và tập hợp đông đảo cộng đồng mã nguồn mở. - Douglas Crockford, người biết đến nhiều qua JSON và JSLint dùng chênh lệch về độ dày sách "Javascript: The definitive guide" "Javascript: The good parts" để châm biếm cách hài hước về JavaScript. - Tuy nhiên, thành công jQuery khiến JavaScript nhiều người yêu thích tính đơn giản dễ sử dụng. Việc phát triển website sử dụng AJAX không khó, bạn dùng jQuery để làm việc với $.ajax nhiên làm nào để xây dựng một phần mềm mở rộng, dễ test, nâng cấp bảo trì không hề đơn giản bản thân JavaScript không thiết kế từ đầu để làm việc này. Do đời framework hỗ trợ lập trình viên xây dựng ứng dụng web cách có hệ thống đời Sencha, Ember, Knockout, Backbone, và AngularJS. Nguyễn Minh Sang Tìm hiểu về AngularJS 1.2.2. Angular JS gì? - Angular framework javascript mạnh mẽ. Angular tăng cường HTML cho ứng dụng web. Nó có chức để giảm bớt trình phát triển ứng dụng web. Từ nhiều năm trước, HTML bắt đầu, dự định để xây dựng trang web nói là một cách để hiển thị tài liệu tĩnh, không để xây dựng một ứng dụng web động. Bây giờ, tưởng tượng HTML lần dùng để xây dựng ứng dụng web động, Angular. Angular HTML có thiết kế để xây dựng ứng dụng web . Lời giải thích khó hiểu đọc tiếp về sau bạn ngạc nhiên với Angular làm hiểu ý nghĩa này. 1.2.3. Các tính chính - Hai cách liên kết liệu Angular khả thay đổi giá trị thuộc tính đối tượng, đồng thời giao diện người dùng đưa thay đổi thời điểm đó, và ngược lại. Ví dụ, bạn có thuộc tính một đối tượng gọi "Page.Title ', lần thay đổi giá trị' Page.Title, giao diện người dùng tự động cập nhật hiển thị giá trị 'Page.Title. Và bạn nhập vào giao diện ứng dụng người dùng bạn, cập nhật giao diện người dùng và cập nhật thuộc tính đối tượng. Tất cả đều xử lý Angular không cần phải viết giống một số framework javascript khác. Những cần làm đơn giản là xác định model chúng ta, bất cứ một model thay đổi, thay đổi bất cứ nơi nào đặt, đối tượng cụ thể lớp đại diện. Model Angular cấu trúc javascript cũ rõ ràng, gì lạ mắt lại hữu ích. - Tính thực là đặc điểm tạo nên một khoảng cách khác lớn Angular framework javascript khác. Directives là đề cập đến một tính để mở rộng nghĩa từ HTML, đồng thời xem là một cách trình duyệt mẹo bạn. Chúng ta biết về header HTML5, là đại diện cho một tiêu đề phần tử tĩnh. Mặc dù HTML có nhiều thẻ , không đủ mạnh để tạo một ứng dụng web đẹp. Với đặc điểm dẫn , tạo từ vựng HTML để trình duyệt hiểu có nghĩa là gì và nên làm gì. Ví dụ với Angular tạo thẻ sau drag me . Các văn bản bên Nguyễn Minh Sang Tìm hiểu về AngularJS tag draggable trở thành draggable trình duyệt, sau cần viết một định nghĩa dẫn draggable ứng dụng Angular là xong.Đây là một ví dụ đơn giản Angular, làm nhiều thứ hữu ích hơn. Và không giới hạn một phần tử html mà có sẵn để thực thi thuộc tính, lớp thích html. Directives Angular khác với directtives tạo html chỗ chúng thực nhiều hành vi động hơn. - Nhiều framework cần có template Angular template lại html. - Dependency injection làm cho ứng dụng Angular dễ dàng để phát triển, xếp mã (code) thành module. Bằng cách này, tạo thành phần tái sử dụng mà gọi về sau, bất cứ cần thiết. Ý tưởng này là đặc biệt tốt ứng dụng mở rộng lớn và cần phải mở rộng, dễ dàng bảo trì kiểm chứng. Dependency injection một cách để ghép đoạn mã code với nhau, điều này đòi hỏi phải phân chia mã code theo chức riêng biệt service, controller, provider không giới hạn chúng. 1.2.4. Đặc trưng - Kiến trúc MVC, Two-way binding, Dynamic templates, Expressions, Modules, Scopes, Dependency injection, Directives, Routing, Services, Filters, Form validation, Testing in mind. 1.2.5. Mô hình MVC Nguyễn Minh Sang Tìm hiểu về AngularJS - Mô hình MVC (Model - View - Controller) một kiến trúc phần mềm hay mô hình thiết kế sử dụng kỹ thuật phần mềm. Nó giúp cho developer tách ứng dụng họ thành phần khác Model, View Controller. Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với thành phần khác. - Mô hình MVC giới thiệu từ năm 70 một phần Smalltalk, nền tảng web, thịnh hành gần đây. - Ý tưởng đằng sau MVC là để chia rõ thành phần model(xử lý, truy xuất database), view(giao diện), controller(điều hướng yêu cầu từ người dùng). - MVC thể tính chuyên nghiệp lập trình, phân tích thiết kế. Do chia thành thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễ nâng cấp, bảo trì. Đối với Angular, View DOM, Controller lớp JavaScript, Model liệu lưu thuộc tính đối tượng JS. - Sau chứng kiến nhiều tranh luận về MV*, một tác giả Angular tuyên bố AngularJS một MVW framework (Model – View – Whatever, Whatever là viết tắt whatever works for you). 1.2.6. SPA – Single Page Application - Một single page application hay gọi là single page interface, là một web app hay website hiển thị vừa vặn một mặt trang web với mục đích giúp người dùng có trải nghiệm giống dùng ứng dụng desktop. - Là ứng dụng chạy bên trình duyệt, không yêu cầu phải tải lại toàn bộ trang web lần sử dụng. Nguyễn Minh Sang Tìm hiểu về AngularJS CHƯƠNG II: ANGULAR JS FRAMEWORK 2.1. Tại phải sử dụng AngularJs? - Angular đưa Google. Tại điều quan trọng để biết ? Như bạn đoán, Google phát triển tài và thiên tài đội bóng họ . Họ thực biết tinh tế trang web phát triển ứng dụng web . Ít thực tế cung cấp cho người dùng đảm bảo Angular xuất phát từ người tin tưởng . Ngoài ra, bạn sử dụng sản phẩm Google Gmail hay Google Plus, bạn không ngạc nhiên với tương tác chúng cả ajax gửi liên tục mọi nơi mà không phải làm toàn bộ trang web và để sử dụng Angular kiến thức chủ yếu cần phải biết trước Javascript. 2.2. AngularJs lập trình nào? 2.2.1. Cài đặt AngularJs 2.2.1.1. Tải AngularJS - Truy cập vào trang web https://angularjs.org https://github.com/angular/angular.js và tải về bản angularjs nhất. Bản là 1.2.16. 2.2.1.2. Chèn Angular vào ứng dụng. * Tự host AngularJS - Theo cách này thì cần phải download angularjs về máy và nhúng trực tiếp vào ứng dụng. * Dùng phiên có sẵn server của Google - Ngoài cách bạn sử dụng phiên bản nén AngularJS có sẵn server Google. Sử dụng cách này có điều lợi tiết kiệm băng thông cho trang web bạn AngularJS load nhanh máy người dùng cache AngularJS. - Nhưng cách này không hoạt động không kết nối mạng. Nguyễn Minh Sang Tìm hiểu về AngularJS 2.2.2. Ví dụ đơn giản Ví dụ AngularJS Hello {{'World' + '!'}} Phân tích ví dụ: ng-app directive: Directives là tùy biến gắn vào DOM (attribute, element name, CSS class …) để HTML compiler AngularJS thêm vào biến đổi DOM element. Ng-app cho biết phạm vi hoạt động AngularJS. Chỉ thị này cho biết vị trí bắt đầu để sử dụng phần tử AngularJS. - Chèn AngularJs vào ứng dụng. Hello {{'World' + '!'}} Một đặc điểm quan trọng AngularJs là khả binding liệu sử dụng cặp dấu ngoặc nhọn {{}}. Đoạn mã này xuất liệu là chuỗi “Hello World !” trình duyệt. Nguyễn Minh Sang Tìm hiểu về AngularJS Trong dấu ngoặc nhọn chứa biến và biểu thức toán học. 1 + = {{ + }} Đoạn mã này in lên trình duyệt chuỗi “1 + = 3” 2.2. Các thành phần của AngularJs 2.2.1 Angular Template Đôi lúc trình xây dựng hệ thống, file HTML trở nên phức tạp để giải vấn đề ta cần chia thành nhiều phần khác nhau, AngularJS cung cấp cho một giải pháp hữu ích là template. - Angular template là đặc tả dạng declarative (khai báo), với thông tin từ Model & Controller, trở thành rendered View mà User thấy trình duyệt. Nó static DOM, chứa HTML, CSS, thành phần, thuộc tính riêng Angular. Các thành phần Angular thuộc tính giúp Angular thêm hành vi biến đổi template DOM thành dynamic view DOM. - Nói cách đơn giản thì template AngularJS là “HTML voi81 additional markup”. Trong Angular, có cách để tạo một template. Dùng file ngoài: Chúng ta dùng thêm một file html bên ngoài để làm template cho file chính, ví dụ: message.html Hello, {{name}}! Dùng script Chúng ta tích hợp thẳng template vào file hành thông qua thẻ script với type là text/ng-template Hello, {{name}}! Nguyễn Minh Sang Tìm hiểu về AngularJS Tạo một module cho ứng dụng: - Đặt biến “demo” chứa module “myApp” ứng dụng. var demo = angular.module('myApp',[]); - Tạo một controller cho module này demo.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hello World!'; }]); 'GreetingController' là tên controller, cách đặt tên nên chứa tên và đuôi “Controller” để dễ nhận biết. ['$scope', function($scope) Viết hàm sử dụng với biến $scope. $scope.greeting = 'Hello World!'; Gán giá trị cho biến greeting. Để in giá trị greeting trình duyệt. {{ greeting}} Ng-controller cho biết controller hoạt động. Đoạn mã này in trình duyệt chuỗi “Hello World! ” khai báo “GreetingController”. 2.2.6.Expression (Biểu thức) Expression sử dụng tất cả phần AngularJs, vì cần phải nắm vững về expression và cách mà Angular sử dụng, tính toán. Nó bao kí hiệu {{ }}. Một biến khởi tạo từ controller thông qua $scope coi là một expression. - Expression snippets giống JS đặt bindings, kiểu {{expression}}. - Được xử lý $parse service. Nguyễn Minh Sang 14 Tìm hiểu về AngularJS Ví dụ: + = {{2 + 2}} Angular tính toán giá trị biểu thức và xuất màn hình kết quả “2 + = 4”. 2.2.7. Filters (Bộ lọc) Trong Angular, một filter cung cấp một định dạng liệu để hiển thị tới người dùng. Theo tinh thần UNIX filters sử dụng cú pháp tương tự | (pipe). Angular cung cấp một số filter xây dựng sẵn như: lowercase, date, number, currency, limitTo, orderBy… Ví dụ: Uppercased: {{ userInput | uppercase }} Khi người dùng nhập liệu vào input thì giá trị chuyển thành chữ viết thường. Một số filter khác: {{ "chuỗi kí tự viết thường" | uppercase }} {{ {name: "Sang", age: 21} | json }} {{ 1304375948024 | date }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} Kết quả: CHUỖI KÍ TỰ VIẾT THƯỜNG { "name": "Sang", "age": 21 } May 3, 2011 05/03/2011 @ 5:39AM Nguyễn Minh Sang 15 Tìm hiểu về AngularJS 2.2.8. Directives Những thứ thuộc tính, class, tên . DOM element gọi chung directive. AngularJS dựa vào chúng để attach thị kiện tới DOM element đó. Bản thân AngularJS có nhiều directive : ng-bind, ng-model, ng-click, ngcontroller . Việc dùng directive giảm thiểu số lượng thẻ HTML , code HTML nhìn gọn gàng sáng sủa hơn. AngularJS cung cấp cho loại directive là : - Directive dạng element ( thẻ HTML ) viết tắt E. - Directive dạng attribute ( thuộc tính thẻ HTML ) viết tắt A, dạng mặc định. - Directive dạng class( class CSS ) viết tắt C. Ví dụ: Chuẩn bị tài liệu HTML với đủ loại directive: Ví dụ AngularJS Nguyễn Minh Sang 16 Tìm hiểu về AngularJS AngularJS var app = angular.module('demoApp', []); app.controller('myController', function($scope) { $scope.customer = { name: 'Sang', address: 'Quang Trung, Go Vap' }; }) .directive('myDirective', function() { return { restrict : 'C', template: 'Name: {{customer.name}} Address: {{customer.address}}' // templateUrl: 'directive_template.html' }; }); Trong myCtrl khai báo thông tin customer với name và địa chỉ. Trong myDirective return object việc hiển thị hay đổ liệu vào directive việc Angular không cần quan tâm. Lưu ý: Tên directive phải khai báo dạng camelCase gọi dùng dấu - để ngăn cách từ để nguyên khai báo restrict : loại directive mặc định E(element), C class, A attribute template: Nội dung directive Nguyễn Minh Sang 17 Tìm hiểu về AngularJS templateUrl: Liên kết tới file template bên ngoài. Template chứa nội dung directive. Name: {{customer.name}} Address: {{customer.address}} Nếu restrict:"A" có liệu Nếu restrict:"C" có liệu Nếu restrict:"E" có liệu Khi thay đổi restrict cần lưu ý infect element để xem đổ liệu vào thẻ nào. 2.2.9. Services AngularJS service một object một function phụ trách một tác vụ nào đó. Việc viết service việc gom đoạn xử lý logic vào object function để dễ quản lý hơn. Cũng giống mô hình MVC tách phần xử lý, điều hướng hiển thị riêng biệt. Trong AngularJS service chứa tất cả phần xử lý, Controller nhận yêu cầu gọi service cần thiết để xử lý, Model handle liệu từ control, View hiển thị liệu, Route điều hướng request tới controller. Bản thân AngularJS chứa service như: $http, $scope, $window, $RouteProvider . Có cách để tạo service Angularjs. Cách 1: Cú pháp: module.service( 'serviceName', function ); Ví dụ: var module = angular.module('myapp', []); module.service('userService', function(){ this.users = ['Sang', 'Nguyen', 'Minh']; }); Nguyễn Minh Sang 18 Tìm hiểu về AngularJS Cách 2: Cú pháp: module.factory('userService', function(){ Ví dụ: var fac = {}; fac.users = ['John', 'James', 'Jake']; return fac; }); Cả cách đều tạo service. Với cách sau đăng ký tên service xong bạn cung cấp thể function mà bạn truyền vào module.service. Với cách sau đăng ký tên factory, function truyền vào module.factory cần return thể đối tượng tạo bên nó. 2.2.10. Multiple Views and Routing Đôi một trang, nhiều muốn hiển thị một phần HTML ứng với chức cụ thể mà ta không cần chuyển đổi trang, Angular một full-stack framework hiệu quả giúp làm việc nhanh chóng dễ dàng. Route bộ điều hướng yêu cầu từ phía người dùng tới controller tương ứng để xử lý dựa theo đối số truyền url. Route AngularJS là thành phần quan trọng giúp AngularJs tạo ứng dụng SPA, chuyển trang mà không cần tải lại trình duyệt. Trong AngularJs sử dụng $routeProvider để bắt yêu cầu. Biểu thức route tính từ sau dấu #. Nguyễn Minh Sang 19 Tìm hiểu về AngularJS Xét ví dụ Ví dụ AngularJS Từ phiên bản AngularJs 1.0.7 thì Route tách thành một file js riêng biệt, và để sử dụng ta phải nhúng file angular-route.min.js vào ứng dụng. Directive ng-view sử dụng để hiển thị liệu. Đăng ký biến app thành một module AngularJS và thiết lập route bản. Để làm việc với Route thì bạn cần gọi sử dụng một extends module angular ngRoute. var app = angular.module('demoApp', ['ngRoute']); app.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/, { templateUrl : index.html', controller : 'homeController' }) .when('/post/:id', { templateUrl : 'detail.html', Nguyễn Minh Sang 20 Tìm hiểu về AngularJS controller : 'postController' }) .otherwise({ redirect: '/' }) }]); app.config là method cho phép khai báo Controller, View tương ứng với url Với route này thì truy cập vào đường dẫn trang web thì trình duyệt load file index.html và bind vào . .when('/post/:id', { Trong route tới chi tiết bài đăng có sử dụng $routeParams service dùng để nhận đối số là id bài viết, giúp xác định xác bài viết cần hiển thị. Đường dẫn truy cập tới chi tiết bài đăng có dạng #/post/id. Trong id là id bài đăng. Khi cấu hình route không cần phải ghi dấu “#”. Khi gặp đường dẫn có dạng #/post/id route gọi tới controller postController sử dụng template từ file detail.html. .when('/post/:id', { templateUrl : 'detail.html', controller : 'postController' }) $routeProvider.otherwise xử lý cho route mặc định. Khi đường dẫn không khớp với route thiết lập thì tái điều hướng về trang chủ. .otherwise({ redirect: '/' }); Nguyễn Minh Sang 21 Tìm hiểu về AngularJS 2.2.11. Form validation - Controls (input, select, textarea) cách mà người dùng nhập liệu. - Form một tập controls với mục đích nhóm controls liên quan với nhau. - Form controls cung cấp validation services, để người dùng báo lỗi liên quan đến nhập liệu. - Server – side validation cần thiết để đảm bảo độ an toàn ứng dụng. - Sử dụng thuộc tính “novalidate” để tắt chức validation mặc định trình duyệt. - CSS Classes: ng-valid: class thêm vào phần tử kiểm tra. ng-invalid: class thêm vào phần tử không kiểm tra. ng-pristine: class thêm vào phần tử lúc ban đầu, trước AngularJS xử lý kiểm tra. ng-dirty: class thêm vào phần tử AngularJS xử lý kiểm tra. - Custom Validation Angular cung cấp xử lý bản cho hầu hết kiểu input HTML5: (text, number, url, email, radio, checkbox) kèm directives để kiểm tra (required, pattern, minlength, maxlength, min, max). Có thể tự đưa validate riêng cách tự tạo directive để đưa hàm validate vào ngModel controller. - Validation xuất chỗ Model to View update: Model thay đổi, tất cả hàm NgModelController#$formatters array pipe – lined, để hàm định dạng giá trị và thay đổi trạng thái valid form control thông qua NgModelController#$setValidity. View to Model update: tương tự vậy, người dùng tương tác với control, gọi NgModelController#$setViewValue. Nó pipe – line tất cả hàm Nguyễn Minh Sang 22 Tìm hiểu về AngularJS NgModelController#$parsers array, để hàm chuyển đổi giá trị trạng thái thay đổi form control thông qua NGModelController#$setValidity. 2.3. Lập trình AngularJS phía server với Node.js 2.3.1.Node.js gì? Node.js nền tảng (platform) chạy môi trường V8 Javascript runtime. Node.js cho phép lập trình viên xây dựng ứng dụng có tính mở rộng cao sử dụng Javascript server. Và vì porting từ C nên về mặt tốc độ xử lý nhanh. 2.3.2.Node.js làm gì? - Xây dựng websocket server (Chat server) - Ứng dụng upload file nhanh client - Ad server - Hoặc ứng dụng liệu thời gian thực nào. Nodejs không phải một web framework.Nó không dành cho người bắt đầu, không phải một nền tảng thực thi tác vụ đa luồng. 2.3.3. Block code Non-block code Ví dụ xây dựng chức đọc file in liệu file. Logic Đọc file từ Filesystem, gán liệu tương ứng với biến "contents" In liệu biến "content" Thực công việc khác tiếp theo. Non-block code: Đọc file từ Filesystem Sau đọc xong in liệu (callback) Thực công việc khác tiếp theo. Code Nguyễn Minh Sang 23 Tìm hiểu về AngularJS Block code var contents = fs.readFileSync('hello.txt'); // Dừng cho đến đọc xong file. console.log(contents); console.log('Thực công việc khác'); Non-block code fs.readFile('hello.txt', function(contents){ console.log(contents); }); console.log('Thực công việc khác'); Ta thấy đây, tốc độ xử lý non-block code là cao so với block code. Giả sử bạn thực công việc file trở lên tốc dộ xử lý Non-block code nhanh Block code nhiều. 2.3.4.Ứng dụng đầu tiên hello.js var http = require('http'); // cách require modules http.createServer(function(request, response){ response.writeHead(200, {'Content-Type':'text/plain'}); // Status code content type response.write("Xin chào lập trình viên!"); // Thông điệp gửi xuống client. response.end(); // Đóng kết nối }).listen(3000); // Chờ kết nối cổng 3000. console.log("Server chờ kết nối cổng 3000"); Chạy server: node hello node hello.js --> Server chờ kết nối cổng 3000 Mở trình duyệt truy cập tới địa http://localhost:3000 dùng terminal: curl http://localhost:3000 --> Xin chào lập trình viên Nguyễn Minh Sang 24 Tìm hiểu về AngularJS 2.4. Công cụ lập trình với AngularJS 2.4.1 Yeoman - Gồm ứng dụng: Yo Grunt Bower - Yeoman không là tool mà sử dụng là một Workflow, tập hợp “best practices” để giúp cho việc phát triển Web dễ dàng hơn. - Lightning – fast scaffolding Dễ dàng tạo khung cho dự án với template tùy biến (vd:HTML5 Boilerplate, Bootstrap), Angular JS . Great buil process Minification and concatenation (thu nhỏ cố kết?) Tối ưu tất cả image files, HTML Compile CoffeScript and Compass files - Automatically lint your script Tất cả Script đề tự động chạy qua JSHint để đảm bảo tuân theo best- practices - Built-in preview server - Tối ưu ảnh cực tốt Dùng OptiPNG JPEGTran - Package management cực tốt Dễ dàng search package thông qua command-line, cài đặt update chúng mà không cần mở trình duyệt - PhantomJS Unit Testing Nguyễn Minh Sang 25 Tìm hiểu về AngularJS Dễ dàng chạy unit test WebKit thông qua PhantomJS - Các công cụ hỗ trợ tốt cho việc lập trình Angular JS: Sublime Text, WebStorm, Emacs 2.4.2. WebStorm - Trang chủ: http://www.jetbrains.com/webstorm/ - Download: http://download-cf.jetbrains.com/webstorm/WebStorm-8.0.2.exe - Feature: http://www.jetbrains.com/webstorm/features/ - Phiên bản 8.0.2 - Là phần mềm có phí. - Là IDEs có hỗ trợ plug-in Angular JS. - Ở WebStorm bạn cần gõ: ngdc [TAB]. directive('$directiveName$', function factory($injectables$) { var directiveDefinitionObject = { $directiveAttrs$ compile: function compile(tElement, tAttrs, transclude) { $END$ return function (scope, element, attrs) { } } }; return directiveDefinitionObject; }); Nguyễn Minh Sang 26 Tìm hiểu về AngularJS 2.5. Khởi chạy ứng dụng - Sử dụng Yeoman: Yeoman cung cấp một cách đơn giản để chạy một Web Server và đáp ứng tất cả yêu cầu tập tin liên quan đến Angular JS. Bạn cần gõ vào command-line: yeoman server Web Server tự động cài đặt mở trình duyệt với trang chủ Angular JS bạn. Và chương trình tự động cập nhật thay đổi code Angular JS. - Không sử dụng Yeoman: Bạn cần một Web Server để khởi động trình duyệt (Xampp, Wamp, AppServ .) Bạn cần lưu ý là phải Refresh lại trình duyệt để xem thay đổi có điều chỉnh về code Angular JS, không giống sử dụng Yeoman. 2.6. Testing and Debug - Việc Testing thực cần thiết với ứng dụng Website. - Angular JS cung cấp công cụ test thực mạnh mẽ, số là Karma. 2.6.1. Karma - Thực test TDD (test-driven development). - Karma sử dụng NodeJSand SocketIO để thực thi ứng dụng bạn test nhiều trình duyệt một cách nhanh chóng. - Trang chủ: https://github.com/vojtajina/karma/ 2.6.2. Cài đặt Karma - Cần cài đặt NodeJS NPM, vào command-line gõ: sudo npm install -g karma 2.6.3. Test với Karma - Gồm bước: Định dạng cấu hình Angular JS: Nguyễn Minh Sang 27 Tìm hiểu về AngularJS o Nếu bạn sử dụng Yeoman, Karma tự động nhận cấu hình Angular JS. o Nếu không sử dụng Yeoman, bạn cần gõ vào command-line: karma init Kết nối server cho Karma o Nhập vào command-line: karma start [optionalPathToConfigFile] o Karma tự động chạy server port 9876 (đây là port mặc định, bạn muốn đổi cần thay đổi file karma.conf.js) Test o Nhập vào command-line: karma run Nguyễn Minh Sang 28 Tìm hiểu về AngularJS TÀI LIỆU THAM KHẢO [1]. AngularJS Cheat Sheet (2013) – tác giả ProLoser – trang. [2]. Professional Node.js(2012) – tác giả Pedro Teixeira – 412 trang. [3]. Ng-book The Complete Book on AngularJS (2013) – tác giả Ari Lerner – 608 trang. [4]. AngularJS (2013) – tác giả Brad Green, Shyam Seshadri – 196 trang. [5]. Single page web applications JavaScript end-to-end (2013) – tác giả Michael Mikowski, Josh Powell – 433 trang. Nguyễn Minh Sang 29 [...]... trong AngularJS là thành phần quan trọng giúp AngularJs tạo được ứng dụng SPA, chuyển trang mà không cần tải lại trình duyệt Trong AngularJs chúng ta sẽ sử dụng $routeProvider để bắt các yêu cầu Biểu thức route được tính từ sau dấu # Nguyễn Minh Sang 19 Tìm hiểu về AngularJS Xét ví dụ Ví dụ AngularJS. .. 05/03/2011 @ 5:39AM Nguyễn Minh Sang 15 Tìm hiểu về AngularJS 2.2.8 Directives Những thứ như thuộc tính, class, tên của 1 DOM element gọi chung là directive AngularJS sẽ dựa vào chúng để attach các chỉ thị hoặc các sự kiện tới DOM element đó Bản thân AngularJS đã có rất nhiều các directive : ng-bind, ng-model, ng-click, ngcontroller Việc dùng directive sẽ giảm thiểu được số lượng thẻ HTML , code HTML... karma.conf.js) Test o Nhập vào command-line: karma run Nguyễn Minh Sang 28 Tìm hiểu về AngularJS TÀI LIỆU THAM KHẢO [1] AngularJS Cheat Sheet (2013) – tác giả ProLoser – 5 trang [2] Professional Node.js(2012) – tác giả Pedro Teixeira – 412 trang [3] Ng-book The Complete Book on AngularJS (2013) – tác giả Ari Lerner – 608 trang [4] AngularJS (2013) – tác giả Brad Green, Shyam Seshadri – 196 trang [5] Single... 3 loại directive: Ví dụ AngularJS Nguyễn Minh Sang 16 Tìm hiểu về AngularJS AngularJS var app = angular.module('demoApp', []); app.controller('myController',... tới controller Bản thân AngularJS cũng chứa những service như: $http, $scope, $window, $RouteProvider Có 2 cách để tạo service trong Angularjs Cách 1: Cú pháp: module.service( 'serviceName', function ); Ví dụ: var module = angular.module('myapp', []); module.service('userService', function(){ this.users = ['Sang', 'Nguyen', 'Minh']; }); Nguyễn Minh Sang 18 Tìm hiểu về AngularJS Cách 2: Cú pháp:... buộc phải nạp toàn bộ ứng dụng vào rồi mới chạy Nguyễn Minh Sang 9 Tìm hiểu về AngularJS Trong AngularJS, module được hỗ trợ trong khai báo ng-app bên cạnh khai báo nó trong mã nguồn script, dưới đây là một template chuẩn của angular sử dụng modules: Module trong AngularJS ...Tìm hiểu về AngularJS Cách sử dụng template Có nhiều cách để sử dụng template, tuy nhiên trong AngularJS có 2 cách thông dụng nhất để dùng template đó là ng-include và ngRoute (sẽ nói ở phần sau), ví dụ: index.html Hello, Angular's Module! Nguyễn Minh Sang 12 Tìm hiểu về AngularJS main.js var app =... tất cả các phần của AngularJs, vì vậy cần phải nắm vững về expression và cách mà Angular sử dụng, tính toán Nó được bao bởi kí hiệu {{ }} Một biến được khởi tạo từ controller thông qua $scope cũng được coi là một expression - Expression các snippets giống JS được đặt trong bindings, kiểu như {{expression}} - Được xử lý bởi $parse service Nguyễn Minh Sang 14 Tìm hiểu về AngularJS Ví dụ: . 2.1. Tại sao phải sử dụng AngularJs? 6 2.2. AngularJs được lập trình như thế nào? 6 2.2.1. Ci đặt AngularJs 6 2.2.2. Ví d đơn gin 7 2.2. Cc thnh phn ca AngularJs 8 2.2.1 Angular. phi biết trước là Javascript. 2.2. AngularJs được lập trình như thế no? 2.2.1. Ci đặt AngularJs 2.2.1.1. Tải AngularJS - Truy cập vo trang web https:/ /angularjs. org hoặc https://github.com/angular/angular.js. Feedback. Với AngularJS, Misko đã rút ngắn số dòng code front-end từ 17000 dòng còn chỉ khong 1500. Với sự thành công đó, đi ngũ của dự án Google Feedback quyết định Tm hiểu v AngularJS