Tài liệu AngularJS tiếng Việt

AngularJS là một thư viện JavaScript mạnh mẽ. Nó đươc sử dụng trong các dự án Ứng dụng trang đơn Single Page Application. Nó kế thừa HTML DOM với các thuộc tính bổ sung và làm cho thao tác người dùng trở lên linh hoạt. AngularJS có mã nguồn mở, hoàn toàn miễn phí và được sử dụng bởi hàng ngàn lập trình viên trên thế giới. t

http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Mục lục Giới thiệu chung AngularJS Đối với độc giả Điều kiện tiền đề . Tổng quan AngularJS AngularJS gì? Các tính chung . Các tính cốt lõi Khái niệm Ưu điểm AngularJS . Nhược điểm AngularJS . Các thành phần AngularJS Cài đặt môi trường AngularJS Ví dụ . 11 Khai báo AngularJS 12 Chỉ đến ứng dụng AngularJS . 12 View . 12 Controller 12 Thực . 13 AngularJS - Cấu trúc MVC 13 Phần Model 14 Phần View 14 Phần Controller . 15 AngularJS - Ứng dụng . 15 Các bước tạo ứng dụng AngularJS: 15 Bước 1: Tải framework 15 Bước 2: Định nghĩa ứng dụng AngularJS sử dụng ng-app directive. 15 Bước 3: Định nghĩa tên model sử dụng ng-model directive. . 15 http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Bước 4: Bind giá trị model định nghĩa sử dụng ng-bind directive. . 16 Các bước để chạy ứng dụng AngularJS 16 Kết . 16 Cách AngularJS tích hợp với HTML . 17 Các Directive AngularJS 17 ng-app directive 18 ng-init directive 18 ng-model directive . 18 ng-repeat directive 19 Ví dụ . 19 Kết . 20 Expression AngularJS 20 Sử dụng số 20 Sử dụng chuỗi 21 Sử dụng đối tượng . 21 Sử dụng mảng 21 Ví dụ . 21 Kết . 21 Thành phần Controller AngularJS 22 Ví dụ . 24 Kết . 25 Các Filter (bộ lọc) AngularJS 25 Bộ lọc uppercase 26 Bộ lọc lowercase . 26 Bộ lọc currency . 26 Bộ lọc filter 26 Bộ lọc orderby . 27 Ví dụ . 27 http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Kết . 29 AngularJS - Bảng 29 Ví dụ . 30 Kết . 32 Phần tử HTML DOM AngularJS 33 ng-disabled directive . 34 ng-show directive 34 ng-hide directive 34 ng-click directive 34 Ví dụ . 34 Kết . 35 Các Module AngularJS 36 Module ứng dụng . 36 Module điều khiển . 37 Sử dụng Module 37 Ví dụ . 38 Kết . 40 Form AngularJS . 40 Các biến 41 ng-click 41 Validate liệu . 42 Ví dụ . 42 Kết . 44 Include AngularJS 45 Ví dụ . 45 Kết . 48 Ajax AngularJS 48 Các ví dụ 49 data.txt 49 http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com testAngularJS.jsp 50 Kết . 51 AngularJS - View 52 ng-view . 52 Cách sử dụng . 52 ng-template . 52 Cách sử dụng . 52 $routeProvider 53 Cách sử dụng . 53 Ví dụ . 54 Kết . 55 AngularJS - Scope 56 Tính kế thừa Scope 57 Ví dụ . 57 Kết . 59 Các Service AngularJS 59 Sử dụng phương thức factory 60 Sử dụng phương thức service 60 Ví dụ . 60 Kết . 62 Dependency Injection AngularJS . 62 value - giá trị 63 factory . 63 service 64 provider . 65 constant 65 Ví dụ . 66 Kết . 67 Các Custom Directive AngularJS . 68 http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Tìm hiểu Custom Directive 68 Ví dụ . 70 Kết . 71 AngularJS - Các chức quốc tế hóa 72 Ví dụ cho ví trị Đan Mạch 72 Kết . 73 Ví dụ sử dụng vị trí Browser . 73 Kết . 74 AngularJS - Tài liệu tham khảo . 75 Các đường link hữu ích AngularJS 75 Giới thiệu chung AngularJS AngularJS thư viện JavaScript mạnh mẽ. Nó đươc sử dụng dự án Ứng dụng trang đơn – Single Page Application (SPA). Nó kế thừa HTML DOM với thuộc tính bổ sung làm cho thao tác người dùng trở lên linh hoạt. AngularJS có mã nguồn mở, hoàn toàn miễn phí sử dụng hàng ngàn lập trình viên giới. Nó hoạt động giấy phép mã nguồn mở 2.0. Loạt hướng dẫn dựa nguồn tài liệu của: Tutorialspoint Đối với độc giả Bài hướng dẫn thiết kế cho kỹ sư phần mềm chuyên nghiệp, người muốn có hiểu biết AngularJS có kiến thức lập trình bản. Bài hướng dẫn mô tả thành phần AngularJS với ví dụ phù hợp. Điều kiện tiền đề Bạn phải có hiểu biết JavaScript chương trình soạn thảo văn (text editor). Khi bắt đầu tìm hiểu phát triển ứng dụng sử dụng AngularJS, tốt hết bạn phải có kiến thức công nghệ web HTML, CSS, AJAX, etc. http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Tổng quan AngularJS AngularJS gì? AngularJS khung (framework) ứng dụng web mã nguồn mở. Nó phát triển lần đầu năm 2009 Misko Hevery Adam Abrons. Hiện trì Google. Phiên 1.3.14 Định nghĩa AngularJS đưa thức sau: AngularJS khung cấu trúc cho ứng dụng trang web động. Nó cho phép bạn sử dụng HTML ngôn ngữ mẫu cho phép bạn mở rộng cú pháp HTML để diễn đạt thành phần ứng dụng bạn cách rõ ràng súc tích. Hai tính cốt lõi: Data binding – Liên kết liệu vàDependency injection – Sự tiêm vật phụ thuộc AngularJS loại bỏ phần lớn code mà bạn thường phải viết. Nó xảy tất trình duyệt, làm cho trở thành đối tác lý tưởng công nghệ Server nào. Các tính chung  AngularJS khung phát triển mạnh mẽ dựa JavaScript để tạo ứng dụng RICH Internet Application (RIA).  AngularJS cung cấp cho lập trình viên tùy chọn để viết ứng dụng client-side mô hình MVC (Model View Controller) cách rõ ràng.  Các ứng dụng viết AngularJS tương thích với nhiều phiên trình duyệt web. AngularJS tự động xử lý mã JavaScript để phù hợp với trình duyệt.  AngularJS có mã nguồn mở, miễn phí hoàn toàn, sử dụng hàng ngàn lập trình viên giới. Nó hoạt động giấy phép Apache License version 2.0. Nhìn chung, AngularJS framework để tạo ứng dụng lớn, hiệu cao giữ cho chúng dễ dàng bảo dưỡng (maintain). Các tính cốt lõi Dưới tính cốt lõi AngularJS:  Data-binding: Nó tự động đồng hóa liệu thành phần model view. http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp  Copyright © vietjack.com Scope: Là đối tượng hướng đến model, hoạt động cầu nối giữacontroller view.  Controller: Đây tính AngularJS mà giới hạn tới scopecụ thể.  Services: AngularJS hoạt động với vài dịch vụ (service) có sẵn , ví dụ $http để tạo XMLHttpRequests. Nó singleton object mà khởi tạo lần ứng dụng.  Filters: Nó lựa chọn tập item từ mảng trả mảng mới.  Directives: Directive marker phần tử DOM (như phần tử, thuộc tính, css nhiều thế). Nó dùng để tạo thẻ HTML riêng phục vụ mục đích riêng. AngularJS có directives có sẵn ngBind,ngModel…  Templates:Là rendered view với thông tin từ controller model. Nó sử dụng file riêng rẽ (ví dụ index.jsp) nhiều view với trang sử dụng “partials”.  Routing: Là khái niệm chuyển dịch qua lại view.  Model View Whatever: MVC mô hình thiết kế để phân chia ứng dụng thành nhiều phần khác (gọi Model, View Controller), phần sử dụng với nhiệm vụ định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liên với Model-View-ViewModel. Nhóm phát triển AngularJS đặt tên vui cho mô hình Model View Whatever.  Deep Linking: Cho phép bạn mã hóa trạng thái ứng dụng địa URL để bookmark. Các ứng dụng phục hồi lại từ địa URL với trạng thái.  Dependency Injection: AngularJS có sẵn hệ thống dependency injectionđể giúp lập trình viên tạo ứng dụng dễ phát triển, dễ hiểu kiểm tra. Khái niệm Biểu đồ mô tả thành phần quan trọng AngularJS mà đề cập cụ thể chương tiếp theo. http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Ưu điểm AngularJS  AngularJS cung cấp khả tạo Single Page Application rõ ràng theo cách dễ bảo dưỡng (maintain).  AngularJS cung cấp khả Data binding tới HTML đưa tới người dùng cảm giác linh hoạt, thân thiện.  AngularJS code dễ dàng unit test.  AngularJS sử dụng dependency injection.  AngularJS cung cấp khả tái sử dụng component.  Với AngularJS, lập trình viên viết code hơn, với nhiều chức hơn.  Với AngularJS, view thành phần trang HTML thuần, controllerđược viết JavaScript với trình xử lý nghiệp vụ. http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Và tất cả, ứng dụng AngularJS chạy hết trình duyệt web, tảng Android iOs. Nhược điểm AngularJS Mặc dù AngularJS kể đến nhiều ưu điểm, đến thời điểm này, có số điểm yếu sau:  Không an toàn : Là JavaScript framework, ứng dụng viết AngularJS không an toàn. Phải có tính bảo mật xác thực phía server giúp ứng dụng trở nên an toàn hơn.  Nếu ứng dụng AngularJS bị vô hiệu hóa JavaScript phía người dùng bạn nhìn trang bản, không thấy thêm. Các thành phần AngularJS AngularJS framework chia thành ba phần sau:  ng-app : directive định nghĩa liên kết ứng dụng AngularJS tới HTML.  ng-model : directive bind giá trị liệu ứng dụng AngularJS đến điều khiển đầu vào HTML.  ng-bind : directive bind liệu ứng dụng AngularJS đến thẻ HTML. Cài đặt môi trường AngularJS Ở chương này, thảo luận cách cài đặt thư viện AngularJS để sử dụng việc phát triển ứng dụng web. Chúng ta giới thiệu qua cấu trúc thư mực nội dụng nó. Khi bạn truy cập https://angularjs.org/, bạn thấy có lựa chọn để bạn tải AngularJS: http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp  Copyright © vietjack.com View on GitHub- Nhấn chuột vào nút để truy cập vào GitHub, bạn có phiên AngularJS nhất.  Download- Hoặc nhấn vào nút hình sau lên: Màn hình cho có nhiều lựa chọn bạn sử dụng AngularJS sau: o Tải xuống host file máy cá nhân bạn: http://vietjack.com/ Trang chia sẻ học online miễn phí Page 10 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com $http sử dụng để tạo ajax request lên server để lấy liệu về. $route sử dụng để định nghĩa thông tin routing …. Những service mặc định AngularJS bắt đầu biểu tượng $. Có cách để tạo service là:  factory  service Sử dụng phương thức factory Khi sử dụng factory method, định nghĩa factory gắn method cho nó. var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); Sử dụng phương thức service Sử dụng service method, định nghĩa service sau gán method với nó. Chúng ta inject service có sẵn cho nó. mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); Ví dụ Dưới ví dụ minh họa cho dẫn bên trên. testAngularJS.jsp http://vietjack.com/ Trang chia sẻ học online miễn phí Page 60 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Angular JS Services AngularJS Sample Application Enter a number: X2 Result: {{result}} var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService) { $scope.square = function() { $scope.result = CalcService.square($scope.number); } http://vietjack.com/ Trang chia sẻ học online miễn phí Page 61 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com }); Kết Mở trang textAngularJS.jsp trình duyệt web xem kết quả: Dependency Injection AngularJS Dependency Injection mô hình thiết kế phần mềm mà thành phần đưa từ phần phụ thuộc - dependencies thay cho việc hard coding chúng thành phần. Điều làm cho cách thành phần phụ thuộc phần cấu hình. Nó giúp việc làm có thành phần có tính tái sử dụng cao, dễ bảo dưỡng kiểm thử. AngularJS cung cấp kỹ thuật Dependency Injection, cho phép thành phần lõi AngularJS inject tới thành phần phụ thuộc khác. http://vietjack.com/ Trang chia sẻ học online miễn phí Page 62 http://vietjack.com/angularjs/index.jsp  value  factory  service  provider  constant Copyright © vietjack.com value - giá trị đối tượng JavaScript đơn giản sử dụng để thiết lập giá trị tới controller bước cấu hình. //define a module var mainApp = angular.module("mainApp", []); //create a value object as "defaultInput" and pass it a data. mainApp.value("defaultInput", 5); . //inject the value in the controller using its name "defaultInput" mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); factory factory hàm để sử dụng trả giá trị. Nó tạo giá trị theo yêu cầu service controller yêu cầu. Ta thường dùng hàm factory để tính trả giá trị. //define a module var mainApp = angular.module("mainApp", []); http://vietjack.com/ Trang chia sẻ học online miễn phí Page 63 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com //create a factory "MathService" which provides a method multiply to return multiplication of two numbers mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); //inject the factory "MathService" in a service to utilize the multiply method of factory. mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); . service service đối tượng singleton javascript chứa tập hàm cho mục đích cụ thể. Service định nghĩa sử dụng hàm service() sau inject đến controller. //define a module var mainApp = angular.module("mainApp", []); . //create a service which defines a method square to return square of a number. mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); //inject the service "CalcService" into the controller mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; http://vietjack.com/ Trang chia sẻ học online miễn phí Page 64 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); provider provider sử dụng nội AngularJS để tạo service, factory … trình cài đặt (quá trình mà AngularJS khởi tạo nó). Dưới mô tả script tạo MathService tạo trước đó. Provider phương thức factory đặc biệt với phương thức get() trả giá trị value/service/factory. //define a module var mainApp = angular.module("mainApp", []); . //create a service using provider which defines a method square to return square of a number. mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); }); constant constants sử dụng thể thiết lập giá trị trình cài đặc giá trị không thiết lập trình cài đặt. mainApp.constant("configParam", "constant value"); http://vietjack.com/ Trang chia sẻ học online miễn phí Page 65 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Ví dụ Dưới ví dụ cho phần diễn giải bên trên: testAngularJS.jsp AngularJS Dependency Injection AngularJS Sample Application Enter a number: X2 Result: {{result}} var mainApp = angular.module("mainApp", []); mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); }); mainApp.value("defaultInput", 5); http://vietjack.com/ Trang chia sẻ học online miễn phí Page 66 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }); mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); Kết Mở trang textAngularJS.jsp trình duyệt web xem kết quả. http://vietjack.com/ Trang chia sẻ học online miễn phí Page 67 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Các Custom Directive AngularJS Custom directive sử dụng AngularJS kết thừa chức HTML. Custom directive định nghĩa sử dụng hàm “directive”. Một custom directive đơn giản thay thành phần cho kích hoạt. Ứng dụng AngularJS trình khởi tạo tìm kiếm thành phần phù hợp hoạt động lần sử dụng phương thức compile()trong custom directive sau sử dụng phương thức link() để tạo custom directive dựa vào scope directive. AngularJS cung cấp cho cách tạo custom directive theo loại sau:  Element directives - Directive kích hoạt thành phần trùng tên với gặp phải.  Attribute - Directive kích hoạt gặp phải thuộc tính trùng với nó.  CSS - Directive kích hoạt gặp phải css style trùng tên với nó.  Comment - Directive kích hoạt gặp phải comment trùng với nó. Tìm hiểu Custom Directive Định nghĩa thẻ custom html. Định nghĩa custom directive để xử lý thẻ custom HTML trên. var mainApp = angular.module("mainApp", []); http://vietjack.com/ Trang chia sẻ học online miễn phí Page 68 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com //Create a directive, first parameter is the html element to be attached. //We are attaching student html tag. //This directive will be activated as soon as any student element is encountered in html mainApp.directive('student', function() { //define the directive object var directive = {}; //restrict = E, signifies that directive is Element directive directive.restrict = 'E'; //template replaces the complete element with its text. directive.template = "Student: {{student.name}} , Roll No: {{student.rollno}}"; //scope is used to distinguish each student element based on criteria. directive.scope = { student : "=name" } //compile is called during application initialization. AngularJS calls it once when html page is loaded. directive.compile = function(element, attributes) { element.css("border", "1px solid #cccccc"); //linkFunction is linked with each element with scope to get the element specific data. var linkFunction = function($scope, element, attributes) { element.jspl("Student: "+$scope.student.name +" , Roll No: "+$scope.student.rollno+""); element.css("background-color", "#ff00ff"); } return linkFunction; } return directive; }); Định nghĩa controller để cập nhật scope cho directive. Ở đặt tên thuộc tính biến scope. mainApp.controller('StudentController', function($scope) { http://vietjack.com/ Trang chia sẻ học online miễn phí Page 69 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com $scope.Mahesh = {}; $scope.Mahesh.name = "Mahesh Parashar"; $scope.Mahesh.rollno = 1; $scope.Piyush = {}; $scope.Piyush.name = "Piyush Parashar"; $scope.Piyush.rollno = 2; }); Ví dụ Angular JS Custom Directives AngularJS Sample Application var mainApp = angular.module("mainApp", []); mainApp.directive('student', function() { var directive = {}; directive.restrict = 'E'; directive.template = "Student: {{student.name}} , Roll No: {{student.rollno}}"; directive.scope = { student : "=name" } http://vietjack.com/ Trang chia sẻ học online miễn phí Page 70 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com directive.compile = function(element, attributes) { element.css("border", "1px solid #cccccc"); var linkFunction = function($scope, element, attributes) { element.jspl("Student: "+$scope.student.name +" , Roll No: "+$scope.student.rollno+""); element.css("background-color", "#ff00ff"); } return linkFunction; } return directive; }); mainApp.controller('StudentController', function($scope) { $scope.Mahesh = {}; $scope.Mahesh.name = "Mahesh Parashar"; $scope.Mahesh.rollno = 1; $scope.Piyush = {}; $scope.Piyush.name = "Piyush Parashar"; $scope.Piyush.rollno = 2; }); Kết Mở trang textAngularJS.jsp trình duyệt web xem kết quả. http://vietjack.com/ Trang chia sẻ học online miễn phí Page 71 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com AngularJS - Các chức quốc tế hóa AngularJS cung cấp sẵn chức quốc tế hóa với kiểu filter currency, date number. Chúng ta cần kết hợp đoạn js tương ứng với theo vị trí tùy Quốc gia. Mặc định gắn với ví trị trình duyệt web. Ví dụ, sử dụng ví trí Đan Mạch, bạn sử dụng đoạn script sau đây: Ví dụ cho ví trị Đan Mạch testAngularJS.jsp Angular JS Forms AngularJS Sample Application {{fees | currency }} {{admissiondate | date }} {{rollno | number }} http://vietjack.com/ Trang chia sẻ học online miễn phí Page 72 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com var mainApp = angular.module("mainApp", []); mainApp.controller('StudentController', function($scope) { $scope.fees = 100; $scope.admissiondate = new Date(); $scope.rollno = 123.45; }); Kết Mở trang textAngularJS.jsp trình duyệt web xem kết quả. Ví dụ sử dụng vị trí Browser testAngularJS.jsp Angular JS Forms http://vietjack.com/ Trang chia sẻ học online miễn phí Page 73 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com AngularJS Sample Application {{fees | currency }} {{admissiondate | date }} {{rollno | number }} var mainApp = angular.module("mainApp", []); mainApp.controller('StudentController', function($scope) { $scope.fees = 100; $scope.admissiondate = new Date(); $scope.rollno = 123.45; }); Kết Mở trang textAngularJS.jsp trình duyệt web xem kết quả. http://vietjack.com/ Trang chia sẻ học online miễn phí Page 74 http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com AngularJS - Tài liệu tham khảo Các tài liệu sau chứa thông tin hữu ích AngularJS. Bạn nên sử dụng chúng để nâng cao kiến thức hiểu chủ đề loạt hướng dẫn này. Các đường link hữu ích AngularJS  Tutorialspoint − Loạt hướng dẫn xây dựng dựa nguồn này.  AngularJS - Trang Web thức AngularJS  AngularJS - Wiki - Tham khảo Wikipedia cho AngularJS. http://vietjack.com/ Trang chia sẻ học online miễn phí Page 75 [...]...  Tài liệu HTML sẽ được tải vào trình duyệt, được ước lượng bởi trình duyệt, AngularJS JavaScript được tải, các đối tượng global của AngularJS được khởi tạo Sau đó, JavaScript sẽ đăng ký hàm controller cho việc thực thi  Tiếp theo AngularJS duyệt qua các phần tử HTML để kiểm tra ứng dụng AngularJS và các view Khi view được tìm thấy, nó kết nối view với tính năng controller tương ứng  Tiếp theo, AngularJS. .. thể thay đổi trạng thái dữ liệu model AngularJS là một khung làm việc dựa trên mô hình MVC Ở các chương tiếp theo, chúng ta sẽ thấy cách AngularJS sử dụng phương thức MVC AngularJS - Ứng dụng đầu tiên Để mở đầu, chúng ta bắt đầu với việc tạo ứng dụng thực tế HelloWorld sử dụng AngularJS, chúng tôi sẽ cho các bạn thấy các phần cụ thể của một ứng dụng AngularJS Một ứng dụng AngularJS sẽ bao gồm các thành... các thành phần sau:  ng-app : Directive này định nghĩa và liên kết một ứng dụng AngularJS đến trang HTML  ng-model : Directive này bind các giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào của HTML  ng-bind : Directive này bind dữ liệu của ứng dụng AngularJS đến các thẻ HTML Các bước tạo một ứng dụng AngularJS: Bước 1: Tải framework Là một khung JavaScript thuần, nó có thể được thêm... ứng dụng AngularJS Các Directive trong AngularJS AngularJS directive được sử dụng để kế thừa HTML Có những thuộc tính đặc biệt bắt đầu với tiền tố ng- Chúng ta sẽ thảo luận những directive:  ng-app - Directive để bắt đầu một ứng dụng AngularJS  ng-init - Directive để khởi tạo dữ liệu cho ứng dụng http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 17 http://vietjack.com /angularjs/ index.jsp... src="http://ajax.googleapis.com/ajax/libs /angularjs/ 1.3.14/angular.min.js"> Kết quả Mở trang textAngularJS.jsp trên trình duyệt web và xem kết quả dưới đây http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 21 http://vietjack.com /angularjs/ index.jsp Copyright © vietjack.com Thành phần Controller trong AngularJS Một ứng dụng AngularJS hoạt động chính dựa vào phần controller để điều khiển luồng dữ liệu. .. sau: Kiểm tra phiên bản AngularJS mới nhất trên trang web chính thức của họ Chỉ đến ứng dụng AngularJS Phần tiếp theo là phần HTML chứa ứng dụng AngularJS Cái này được thêm bởi thuộc tínhngapp tại tại phần tử root của HTML trong ứng dụng AngularJS Bạn có thể hoặc thêm vào phần tử html hoặc trong... dụng trong AngularJS  ng-repeat - Directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp ng-app directive ng-app directive bắt đầu một ứng dụng AngularJS Nó định nghĩa phần tử root Nó tự động khởi tạo ứng dụng và khởi tạo ứng dựng web sử dụng AngularJS Nó cũng được sử dụng để tải các module khác nhau của ứng dụng AngularJS Ở các ví dụ tiếp theo, chúng ta định nghĩa một ứng dụng AngularJS. .. online miễn phí Page 19 http://vietjack.com /angularjs/ index.jsp Copyright © vietjack.com Kết quả Mở trang textAngularJS.jsp trên trình duyệt, nhập tên của bạn và xem kết quả dưới đây Expression trong AngularJS Expression được sử dụng để bind các dữ liệu ứng dụng ra thẻ HTML Expression được... liệu cho phần view Phần view sử dụng dữ liệu được chuẩn bị bởi controller và sau đó tạo ra các dữ liệu được nhìn thấy phía người sử dụng Phần mô hình hóa MVC có thể được mô tả bằng hình vẽ dưới đây: Phần Model Phần model cho nhiệm vụ quản lý dữ liệu Nó phản hồi các yêu cầu từ phần view và thực hiện những phần lệnh từ controller để cập nhật các giá trị cho bản thân nó Phần View Là phần hiển thị dữ liệu. .. Kết quả Mở trang textAngularJS.jsp trên trình duyệt web và xem kết quả http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 35 http://vietjack.com /angularjs/ index.jsp Copyright © vietjack.com Các Module trong AngularJS AngularJS hỗ trợ tiếp cận theo hướng module Module được . Include trong AngularJS 45 Ví dụ 45 Kết quả 48 Ajax trong AngularJS 48 Các ví dụ 49 data.txt 49 http://vietjack.com /angularjs/ index.jsp Copyright © vietjack.com http://vietjack.com/. Tổng quan về AngularJS 6 AngularJS là gì? 6 Các tính năng chung 6 Các tính năng cốt lõi 6 Khái niệm 7 Ưu điểm của AngularJS 8 Nhược điểm của AngularJS 9 Các thành phần của AngularJS 9 Cài. http://vietjack.com /angularjs/ index.jsp Copyright © vietjack.com http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 Mục lục Giới thiệu chung về AngularJS 5 Đối