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 c a AngularJS thêm v̀o biến đổi DOM element Ng-app cho biết phạm vi hoạt đ̣ng c a AngularJS Chỉ thị ǹy cho biết vị trí bắt đầu để sử ḍng phần tử c a AngularJS - Ch̀n AngularJs v̀o ́ng ḍngHello {{'World' + '!'}}
Ṃt đặc điểm quan tṛng c a AngularJs l̀ kh̉ binding liệu sử ḍng cặp dấu ngoặc nḥn {{}} Đoạn mư ǹ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 nḥn ch́a biến v̀ biểu th́c toán ḥc1 + = {{ + }}
Đoạn mư ǹy in lên tr̀nh duyệt chuỗi “1 + = 3” 2.2 Ć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 để gỉi vấn đ̀ ta cần chia thành nhìu phần khác nhau, AngularJS cung cấp cho ṃt gỉ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, thục tính riêng c a Angular Các thành phần Angular thụ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 gỉn th̀ template AngularJS l̀ “HTML voi81 additional markup” Trong Angular, có cách để tạo ṃt template Dùng file ngồi: Chúng ta dùng thêm ṃt file html bên ngòi để làm template cho file chính, ví ḍ: 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 Ví ḍ: + = {{2 + 2}} Angular tính tốn giá trị biểu th́c v̀ xuất m̀n h̀nh kết qủ “2 + = 4” 2.2.7 Filters (Bộ ḷc) Trong Angular, ṃt filter cung cấp ṃt định dạng liệu để hiển thị tới ng i dùng Theo tinh thần c a UNIX filters sử ḍng cú pháp t ơng tự | (pipe) Angular cung cấp ṃt số filter đ ợc xây dựng sẵn nh : lowercase, date, number, currency, limitTo, orderBy… Ví ḍ: Uppercased: {{ userInput | uppercase }} Khi ng i dùng nhập liệu v̀o input th̀ giá trị đ ợc chuyển th̀nh chữ viết th ng Ṃt số filter khác: {{ "chũi ḱ ṭ vít thừng" | uppercase }} {{ {name: "Sang", age: 21} | json }} {{ 1304375948024 | date }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} K t qu : CHŨI Ḱ Ṭ VÍ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́ nh thục tính, class, tên c a 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ó nhìu directive : ng-bind, ng-model, ng-click, ngcontroller Việc dùng directive gỉm thiểu đ ợc số l ợng thẻ HTML , code HTML nhìn g̣n gàng sáng s a AngularJS cung cấp cho loại directive l̀ : - Directive dạng element ( thẻ HTML ) viết tắt E - Directive dạng attribute ( thục tính c a thẻ HTML ) viết tắt A, dạng mặc định - Directive dạng class( class CSS ) viết tắt C Ví ḍ: Chuẩn bị t̀i liệu HTML với đ loại directive: V́ ḍ 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 Trong myDirective return object việc hiển thị hay đổ liệu v̀o directive nh việc c a Angular không cần quan tâm L u ý: Tên directive ph̉i khai báo dạng camelCase cịn g̣i dùng dấu - để ngăn cách từ để nguyên nh khai báo đ ợc restrict : loại directive mặc định E(element), C class, A attribute template: Ṇi dung c a directive Nguyễn Minh Sang 17 T̀m hiểu v̀ AngularJS templateUrl: Liên kết tới file template bên Template ch́a ṇi dung c a 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ẻ 2.2.9 Services AngularJS service ṃt object ṃt function pḥ trách ṃt tác ṿ ǹo Việc viết service việc gom đoạn xử lý logic vào object function để dễ qủn lý Cũng giống nh mô h̀nh MVC tách phần xử lý, đì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 đìu h ớng request tới controller B̉n thân AngularJS ch́a service nh : $http, $scope, $window, $RouteProvider Có ćch để t o service Angularjs Cách 1: Cú pháp: module.service( 'serviceName', function ); Ví ḍ: 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í ḍ: var fac = {}; fac.users = ['John', 'James', 'Jake']; return fac; }); C̉ cách đ̀u tạo đ ợc service Với cách sau đăng ký tên service xong bạn đ ợc cung cấp thể c a function mà bạn truỳn vào module.service Với cách sau đăng ký tên factory, function truỳn vào module.factory cần return thể c a đối t ợng tạo bên 2.2.10 Multiple Views and Routing Đôi ṃt trang, nhìu muốn hiển thị ṃt phần HTML ́ng với ch́c c̣ thể mà ta không cần chuyển đổi trang, Angular ṃt full-stack framework hiệu qủ giúp l̀m đ ợc việc nhanh chóng dễ dàng Route ḅ đì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ố truỳn url Route AngularJS l̀ th̀nh phần quan tṛng giúp AngularJs tạo đ ợc ́ng ḍng SPA, chuyển trang m̀ không cần t̉i lại tr̀nh duyệt Trong AngularJs sử ḍng $routeProvider để bắt 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í ḍ V́ ḍ AngularJS Từ phiên b̉n AngularJs 1.0.7 th̀ Route đư đ ợc tách th̀nh ṃt file js riêng biệt, v̀ để sử ḍng đ ợc ta ph̉i nhúng file angular-route.min.js v̀o ́ng ḍng Directive ng-view đ ợc sử ḍng để hiển thị liệu Đăng ký biến app th̀nh ṃ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ử ḍng ṃt extends module c a 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 ǹy th̀ truy cập v̀o đ ng dẫn c a 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ử ḍng $routeParams service dùng để nhận đối số l̀ id c a b̀i viết, giúp xác định đ ợc 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 c a 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ử ḍ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 đư đ ợc thiết lập th̀ đ ợc tá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 ṃt tập controls với ṃc đích nhóm controls liên quan với - Form controls cung cấp validation services, để ng i dùng đ ợc 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 c a ́ng ḍng - Sử ḍng thục tính “novalidate” để tắt ch́c validation mặc định c a trình duyệt - CSS Classes: ng-valid: class đ ợc thêm vào phần tử kiểm tra ng-invalid: class đ ợc thêm vào phần tử không kiểm tra ng-pristine: class đ ợc thêm vào phần tử lúc ban đầu, tr ớc AngularJS xử lý kiểm tra ng-dirty: class đ ợc 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 c a vào ngModel controller - Validation xuất chỗ Model to View update: Model thay đổi, tất c̉ hàm NgModelController#$formatters array đ ợc pipe – lined, để hàm định dạng đ ợc giá trị v̀ thay đổi trạng thái valid c a form control thông qua NgModelController#$setValidity View to Model update: t ơng tự nh 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 lần l ợt chuyển đổi giá trị trạng thái thay đổi c a 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 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 ḍng có tính m ṛng cao sử ḍng Javascript server V̀ v̀ đ ợc porting từ C nên v̀ mặt tốc đ̣ xử lý nhanh 2.3.2.Node.js lƠm đ c gì? - Xây dựng websocket server (Chat server) - ng ḍng upload file nhanh client - Ad server - Hoặc ́ng ḍng liệu th i gian thực Nodejs khơng ph̉i ṃt web framework.Nó không d̀nh cho ng không ph̉i ṃt ǹn t̉ng thực thi tác ṿ đa luồng i bắt đầu, 2.3.3 Block code Non-block code Ví ḍ xây dựng ch́c đ̣c file in liệu c a 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 Non-block code: Đ̣c file từ Filesystem Sau đ̣c xong in liệu (callback) Thực công việc khác 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 'Tḥc công việc khác' ; Non-block code fs.readFile('hello.txt', function(contents){ console.log(contents); }); console.log 'Tḥc cơng việc khác' ; Ta thấy đây, tốc đ̣ xử lý c a non-block code l̀ cao so với block code Gỉ sử bạn thực cơng việc file tr lên tốc ḍ xử lý c a Non-block code nhanh Block code nhì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 ḱt nối } listen 3000 ; // Ch̀ ḱt nối cổng 3000 console.log "Server ch̀ ḱ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 ḍng: Yo Grunt Bower - Yeoman không l̀ tool m̀ đ ợc sử ḍng nh l̀ ṃt Workflow, tập hợp “best practices” để giúp cho việc phát triển Web dễ d̀ng - Lightning – fast scaffolding Dễ dàng tạo khung cho dự án với template tùy biến đ ợc (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 đ̀ đ ợc 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 đ ợc 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ử ḍng Yeoman: Yeoman cung cấp ṃt cách đơn gỉn để chạy ṃt Web Server v̀ đáp ́ng tất c̉ yêu cầu c a 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 c̀i đặt m trình duyệt với trang ch Angular JS c a bạn V̀ ch ơng tr̀nh tự đ̣ng đ ợc cập nhật thay đổi code Angular JS - Không sử ḍng Yeoman: Bạn cần ṃ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ó đìu chỉnh v̀ code Angular JS, không giống nh sử ḍng Yeoman 2.6 Testing and Debug - Việc Testing thực cần thiết với ́ng ḍng nh 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ử ḍng NodeJSand SocketIO để thực thi ́ng ḍng c a bạn test nhìu trình duyệt ṃ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 c a Angular JS: Nguyễn Minh Sang 27 T̀m hiểu v̀ AngularJS o Nếu bạn sử ḍng Yeoman, Karma tự đ̣ng nhận đ ợc cấu hình c a Angular JS o Nếu không sử ḍ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 ... Javascript 2.2 AngularJs đ c lập trình nh th 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. .. biến $scope $scope.greeting = 'Hello World!'; Gán giá trị cho biến greeting Để in đ ợc giá trị c a greeting tr̀nh duyệt {{ greeting}} Ng-controller... Với AngularJS, Misko đư rút ngắn số dòng code front-end từ 17000 dòng khỏng 1500 Với thành cơng đó, đ̣i ngũ c a dự án Google Feedback định Nguyễn Minh Sang T̀m hiểu v̀ AngularJS phát triển AngularJS
