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

Chia sẻ: Nguyen Thanh Tuyen | Ngày: | Loại File: PDF | Số trang:75

Thêm vào BST

Báo xấu

288
lượt xem 78
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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. Tham khảo tài liệu "AngularJS tiếng Việt" để hiểu hơn về vấn đề này.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tài liệu AngularJS tiếng Việt

http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Mục lục Giới thiệu chung về AngularJS.............................................................................................. 5 Đối với độc giả ...................................................................................................................... 5 Điều kiện tiền đề ................................................................................................................... 5 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 đặt môi trường AngularJS .............................................................................................. 9 Ví dụ ............................................................................................................................... 11 Khai báo AngularJS ................................................................................................ 12 Chỉ đến ứng dụng AngularJS ............................................................................... 12 View........................................................................................................................... 12 Controller .................................................................................................................. 12 Thực hiện ................................................................................................................. 13 AngularJS - Cấu trúc MVC.................................................................................................. 13 Phần Model .................................................................................................................... 14 Phần View ...................................................................................................................... 14 Phần Controller............................................................................................................... 15 AngularJS - Ứng dụng đầu tiên........................................................................................... 15 Các bước tạo một ứ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 một model sử dụng ng-model directive. ................... 15 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Bước 4: Bind giá trị của model đã được định nghĩa ở trên sử dụng ng-bind directive. ................................................................................................................... 16 Các bước để chạy một ứng dụng AngularJS.................................................................. 16 Kết quả ........................................................................................................................... 16 Cách AngularJS tích hợp với HTML ............................................................................... 17 Các Directive trong AngularJS ............................................................................................ 17 ng-app directive .............................................................................................................. 18 ng-init directive ................................................................................................................ 18 ng-model directive........................................................................................................... 18 ng-repeat directive .......................................................................................................... 19 Ví dụ ............................................................................................................................... 19 Kết quả ........................................................................................................................... 20 Expression trong AngularJS................................................................................................ 20 Sử dụng các số .............................................................................................................. 20 Sử dụng các chuỗi.......................................................................................................... 21 Sử dụng đối tượng ......................................................................................................... 21 Sử dụng mảng................................................................................................................ 21 Ví dụ ............................................................................................................................... 21 Kết quả ........................................................................................................................... 21 Thành phần Controller trong AngularJS .............................................................................. 22 Ví dụ ............................................................................................................................... 24 Kết quả ........................................................................................................................... 25 Các Filter (bộ lọc) trong 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ẻ các bài học online miễn phí Page 2
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Kết quả ........................................................................................................................... 29 AngularJS - Bảng................................................................................................................ 29 Ví dụ ............................................................................................................................... 30 Kết quả ........................................................................................................................... 32 Phần tử HTML DOM trong AngularJS ................................................................................ 33 ng-disabled directive ....................................................................................................... 34 ng-show directive ............................................................................................................ 34 ng-hide directive.............................................................................................................. 34 ng-click directive.............................................................................................................. 34 Ví dụ ............................................................................................................................... 34 Kết quả ........................................................................................................................... 35 Các Module trong AngularJS .............................................................................................. 36 Module ứng dụng ........................................................................................................... 36 Module điều khiển........................................................................................................... 37 Sử dụng các Module ...................................................................................................... 37 Ví dụ ............................................................................................................................... 38 Kết quả ........................................................................................................................... 40 Form trong AngularJS......................................................................................................... 40 Các sự biến .................................................................................................................... 41 ng-click............................................................................................................................ 41 Validate dữ liệu ............................................................................................................... 42 Ví dụ ............................................................................................................................... 42 Kết quả ........................................................................................................................... 44 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/ Trang chia sẻ các bài học online miễn phí Page 3
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com testAngularJS.jsp .................................................................................................... 50 Kết quả ........................................................................................................................... 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 quả ........................................................................................................................... 55 AngularJS - Scope.............................................................................................................. 56 Tính kế thừa của Scope.................................................................................................. 57 Ví dụ ............................................................................................................................... 57 Kết quả ........................................................................................................................... 59 Các Service trong 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 quả ........................................................................................................................... 62 Dependency Injection trong AngularJS ............................................................................... 62 value - giá trị.................................................................................................................... 63 factory............................................................................................................................. 63 service ............................................................................................................................ 64 provider........................................................................................................................... 65 constant .......................................................................................................................... 65 Ví dụ ............................................................................................................................... 66 Kết quả ........................................................................................................................... 67 Các Custom Directive trong AngularJS ............................................................................... 68 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 4
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Tìm hiểu Custom Directive .............................................................................................. 68 Ví dụ ............................................................................................................................... 70 Kết quả ........................................................................................................................... 71 AngularJS - Các chức năng quốc tế hóa ............................................................................ 72 Ví dụ cho ví trị Đan Mạch ................................................................................................ 72 Kết quả ........................................................................................................................... 73 Ví dụ sử dụng vị trí của Browser ..................................................................................... 73 Kết quả ........................................................................................................................... 74 AngularJS - Tài liệu tham khảo ........................................................................................... 75 Các đường link hữu ích về AngularJS ............................................................................ 75 Giới thiệu chung về AngularJS 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 (SPA). 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. Nó hoạt động dưới giấy phép mã nguồn mở 2.0. Loạt bài hướng dẫn của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint Đối với độc giả Bài hướng dẫn này thiết kế cho những kỹ sư phần mềm chuyên nghiệp, những người muốn có những hiểu biết cơ bản về AngularJS và có kiến thức lập trình căn bản. Bài hướng dẫn mô tả những thành phần của AngularJS với những ví dụ phù hợp. Điều kiện tiền đề Bạn phải có những hiểu biết cơ bản về JavaScript và bất kỳ chương trình soạn thảo văn bản nào (text editor). Khi chúng ta bắt đầu tìm hiểu và phát triển các ứng dụng sử dụng AngularJS, tốt hơn hết là bạn phải có kiến thức về công nghệ web như HTML, CSS, AJAX, etc. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 5
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Tổng quan về AngularJS AngularJS là gì? AngularJS là một khung (framework) ứng dụng web mã nguồn mở. Nó được phát triển lần đầu năm 2009 bởi Misko Hevery và Adam Abrons. Hiện tại nó được duy trì bởi Google. Phiên bản mới nhất của nó hiện tại là 1.3.14 Định nghĩa về AngularJS được đưa ra chính thức như sau: AngularJS là một khung cấu trúc cho các ứng dụng trang web động. Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích. Hai tính năng cốt lõi: Data binding – Liên kết dữ liệu vàDependency injection – Sự tiêm vật phụ thuộc của AngularJS loại bỏ phần lớn code mà bạn thường phải viết. Nó xảy ra trong tất cả các trình duyệt, làm cho nó trở thành đối tác lý tưởng của bất kỳ công nghệ Server nào. Các tính năng chung  AngularJS là một khung phát triển mạnh mẽ dựa trên JavaScript để tạo các ứng dụng RICH Internet Application (RIA).  AngularJS cung cấp cho lập trình viên những tùy chọn để viết các ứng dụng client-side trong mô hình MVC (Model View Controller) một cách rõ ràng.  Các ứng dụng được viết bởi AngularJS tương thích với nhiều phiên bản trình duyệt web. AngularJS tự động xử lý mã JavaScript để phù hợp với mỗi trình duyệt.  AngularJS có mã nguồn mở, miễn phí hoàn toàn, được sử dụng bởi hàng ngàn lập trình viên trên thế giới. Nó hoạt động dưới giấy phép Apache License version 2.0. Nhìn chung, AngularJS là một framework để tạo các ứng dụng lớn, các hiệu năng cao trong khi giữ cho chúng có thể dễ dàng bảo dưỡng (maintain). Các tính năng cốt lõi Dưới đây là các tính năng cốt lõi của AngularJS:  Data-binding: Nó tự động đồng bộ hóa dữ liệu giữa thành phần model và view. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 6
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com  Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu nối giữacontroller và view.  Controller: Đây là những tính năng của AngularJS mà được giới hạn tới một scopecụ thể.  Services: AngularJS hoạt động với một vài dịch vụ (service) có sẵn , ví dụ $http để tạo XMLHttpRequests. Nó là các singleton object mà được khởi tạo duy nhất một lần trong ứng dụng.  Filters: Nó lựa chọn các tập con của item từ các mảng và trả về các mảng mới.  Directives: Directive là các marker trong các phần tử DOM (như các phần tử, thuộc tính, css và nhiều hơn thế). Nó có thể dùng để tạo các thẻ HTML riêng phục vụ những mục đích riêng. AngularJS có những directives có sẵn như ngBind,ngModel…  Templates:Là các rendered view với các thông tin từ controller và model. Nó có thể được sử dụng trong các file riêng rẽ (ví dụ như index.jsp) hoặc nhiều view với một trang sử dụng “partials”.  Routing: Là khái niệm của sự chuyển dịch qua lại các view.  Model View Whatever: MVC là một mô hình thiết kế để phân chia các ứng dụng thành nhiều phần khác nhau (gọi là Model, View và Controller), một phần sử dụng với một nhiệm vụ nhất định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liên hơn với Model-View-ViewModel. Nhóm phát triển AngularJS đã đặt tên vui cho mô hình này là Model View Whatever.  Deep Linking: Cho phép bạn mã hóa trạng thái các ứng dụng trên địa chỉ URL để nó có thể được bookmark. Các ứng dụng có thể được phục hồi lại từ các địa chỉ URL với cùng một trạng thái.  Dependency Injection: AngularJS có sẵn một hệ thống con dependency injectionđể giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra. Khái niệm Biểu đồ dưới đây mô tả những thành phần quan trọng của AngularJS mà chúng ta sẽ đề cập cụ thể ở các chương tiếp theo. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 7
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Ưu điểm của AngularJS  AngularJS cung cấp khả năng tạo ra các Single Page Application một các rất rõ ràng và theo cách dễ bảo dưỡng (maintain).  AngularJS cung cấp khả năng Data binding tới HTML do đó đưa tới người dùng cảm giác linh hoạt, thân thiện.  AngularJS code dễ dàng khi unit test.  AngularJS sử dụng dependency injection.  AngularJS cung cấp khả năng tái sử dụng các component.  Với AngularJS, lập trình viên sẽ viết ít code hơn, với nhiều chức năng hơn.  Với AngularJS, view là thành phần trong trang HTML thuần, trong khi controllerđược viết bởi JavaScript với quá trình xử lý nghiệp vụ. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 8
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Và trên tất cả, ứng dụng AngularJS có thể chạy trên hết các trình duyệt web, trên các nền tảng Android và iOs. Nhược điểm của AngularJS Mặc dù AngularJS có thể kể đến rất nhiều các ưu điểm, nhưng đến thời điểm này, nó vẫn có một số điểm yếu sau:  Không an toàn : Là một JavaScript framework, ứng dụng được viết bởi AngularJS không an toàn. Phải có các tính năng bảo mật và xác thực phía server sẽ 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 thì bạn chỉ nhìn được trang cơ bản, không thấy gì thêm. Các thành phần của AngularJS AngularJS framework có thể được chia thành ba phần chính sau:  ng-app : directive này định nghĩa và liên kết một ứng dụng AngularJS tới HTML.  ng-model : directive này bind giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào HTML.  ng-bind : directive này bind dữ liệu ứng dụng AngularJS đến các thẻ HTML. Cài đặt môi trường AngularJS Ở trong chương này, chúng ta sẽ thảo luận về cách cài đặt thư viện AngularJS để được sử dụng trong việc phát triển ứng dụng web. Chúng ta sẽ giới thiệu qua về cấu trúc thư mực và các nội dụng của nó. Khi bạn truy cập https://angularjs.org/, bạn sẽ thấy có 2 lựa chọn để bạn tải AngularJS: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 9
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com  View on GitHub- Nhấn chuột vào nút này để truy cập vào GitHub, tại đây bạn sẽ có phiên bản AngularJS mới nhất.  Download- Hoặc nhấn vào nút này và màn hình sau đây sẽ hiện lên: Màn hình này cho có rất nhiều lựa chọn khi bạn sử dụng AngularJS như sau: o Tải xuống và host các file trên máy cá nhân của bạn: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 10
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com  Có 2 sự lựa chọn khác nhau là legacy và lastest. Lagacy dành cho các phiên bản 1.2.x trở về trước, bản lastest là 1.3.x.  Bạn có thể sử dụng các bản thu nhỏ, không nén cũng như các phiên bản nén. o Truy cập CDN: Bạn cũng có thể truy cập AngularJS sử dụng CDN. Điều này có nghĩa là bạn sử dụng AngularJS trên server của Google. Điều này có lợi thế là khi một người sử dụng trang web đã tải một bản AngularJS trên CDN trên, nó sẽ không phải tải lại nữa. Chúng tôi sử dụng phiên bản CDN qua loạt bài hướng dẫn này. Ví dụ Bây giờ chúng ta bắt đầu viết ví dụ đơn giản sử dụng thư viện AngularJS. Đầu tiên tôi tạo trang myfirstexample.jspl như dưới đây: Welcome {{helloTo.title}} to the world of Tutorialspoint! angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; }); http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 11
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Dưới đây là những thành phần mô tả đoạn code bên trên 1 cách chi tiết: Khai báo AngularJS Để khai báo JavaScript trong đoạn code của bạn, bạn có thể khai báo như 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ínhng- app 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 phần tử body như sau: View View là thành phần sau: Welcome {{helloTo.title}} to the world of Tutorialspoint! ng-controller thông báo cho AngularJS là controller nào được sử dụng trong phần view.helloTo.title thông báo cho AngularJS viết giá trị của model với tên helloTo.title vào phần HTML. Controller Controller là phần sau: angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 12
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com $scope.helloTo.title = "AngularJS"; }); Đoạn code trên đăng ký một hàm controller với tên HelloController trong AngularJS module với tên myapp .... Chúng ta sẽ tìm hiểu sâu hơn về Các module và Thành phần controllers trong các chương tương ứng. Hàm controller được đăng ký với AngularJS qua cách gọi hàm angular.module(...).controller(...). Tham số $scope đã truyền tới hàm controller là một model. Hàm controller thêm 1 đối tượng helloTo JavaScript , và thêm trường title vào trong đối tượng đó. Thực hiện Sau khi bạn lưu đoạn code dưới tên myfirstexample.jspl và mở dưới bất kỳ trình duyệt web nào. Bạn sẽ thấy phần kết quả như sau: Khi trang trên được tải trong trình duyệt đó, những điều sau sẽ xảy ra:  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ực hiện các hàm controller, và trả về kết quả đến phần view với dữ liệu là model được khởi tạo trong phần controller. Trang web được tải lên hoàn toàn. AngularJS - Cấu trúc MVC Model View Controller hoặc MVC là cách gọi phổ biến, là một mô hình thiết kế phần mềm cho các ứng dụng phát triển trên nền tảng web. Một Model View Controller được tạo thành bởi 3 thành phần chính sau:  Model - Là thành phần thấp nhất của mô hình có nhiệm vụ duy trì dữ liệu. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 13
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com  View - Có nhiệm vụ hiển thị các phần dữ liệu đến người sử dụng.  Controller - Là phần Code phần mềm mà điều khiển sự tương tác giữa Model và View MVC trở lên phổ biến bởi nó phân tách ứng dụng một cách hợp lý giữa tầng giao diện người dùng và hỗ trợ các phần có liên quan. Phần controller nhận tất cả các request cho ứng dụng và sau đó làm việc với phần model để chuẩn bị dữ 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 theo một định dạng cụ thể, được trigger bởi phần controller để hiển thị dữ liệu. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 14
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Phần Controller Phần controller tương tác với dữ liệu người dùng và thực hiện các sự thay đổi trên đối tượng model. Phần controller nhận các tham số đầu vào, làm cho các tham số có hiệu lực, sau đó thực hiện các hoạt động business mà trong đó có 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 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 vào bởi sử dụng thẻ . Bước 2: Định nghĩa ứng dụng AngularJS sử dụng ng-app directive. ... Bước 3: Định nghĩa tên một model sử dụng ng-model directive. Enter your Name: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 15
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Bước 4: Bind giá trị của model đã được định nghĩa ở trên sử dụng ng-bind directive. Hello ! Các bước để chạy một ứng dụng AngularJS Sử dụng các bước bên trên để tạo ra một trang HTML. testAngularJS.jsp AngularJS First Application Sample Application Enter your Name: Hello ! 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ả. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 16
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Cách AngularJS tích hợp với HTML  ng-app directive khai báo để bắt đầu một ứng dụng AngularJS.  ng-model directive sau đó tạo biến model tên “name” được sử dụng trong trang web HTML và trong thẻ div với ng-app directive.  ng-bind sau đó sử dụng tên model để hiển thị trong thẻ span của HTML bất cứ khi nào người dùng nhập một thứ gì đó vào hộp văn bản.  Thẻ đóng để thông báo kết thúc một ứ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 Copyright © vietjack.com  ng-model - Directive định nghĩa model như là một biến có thể sử 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 mặc định sử dụng thuộc tính ng-app của một phần tử div. ... ng-init directive ng-init khởi tạo các dữ liệu cho ứng dụng AngularJS. Nó được sử dụng để khởi tạo các giá trị cho một biến được sử dụng trong ứng dụng. Ở ví dụ dưới đây, chúng ta định nghĩa một mảng các Quốc gia. Chúng ta sử dụng cú pháp JSON để định nghĩa cho mảng các Quốc gia. ... ng-model directive ng-model directive định nghĩa các model/biến được sử dụng trong ứng dụng AngularJS. Ở trong ví dụ sau, chúng ta sẽ định nghĩa một model dưới tên “name”. ... Enter your Name: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 18
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com ng-repeat directive ng-repeat directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp. Ở ví dụ dưới đây, chúng ta sẽ duyệt qua một mảng các Quốc gia. ... List of Countries with locale: {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} Ví dụ Dưới đây là ví dụ bao gồm tất cả các directive mô tả bên trên: testAngularJS.jsp AngularJS Directives Sample Application Enter your Name: Hello ! List of Countries with locale: {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} http://vietjack.com/ Trang chia sẻ các bài học 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 viết trong dấu {{ expression}}. Expression có cách hoạt động tương đối giống ng-bind directive. Các expression trong ứng dụng AngularJS là các JavaScript expression thuần túy và xuất kết quả là dữ liệu mà chúng ta sử dụng. Sử dụng các số Expense on Books : {{cost * quantity}} Rs http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 20