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 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. 15http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 2Bước 4: Bind giá trị của model đã được định nghĩa ở trên sử dụng ng-binddirective. 16Các bước để chạy một ứng dụng AngularJS 16Kết quả 16Cách AngularJS tích hợp với HTML 17Các Directive trong AngularJS 17ng-app directive 18ng-init directive 18ng-model directive 18ng-repeat directive 19Ví dụ 19Kết quả 20Expression trong AngularJS 20Sử dụng các số 20Sử dụng các chuỗi 21Sử dụng đối tượng 21Sử dụng mảng 21Ví dụ 21Kết quả 21Thành phần Controller trong AngularJS 22Ví dụ 24Kết quả 25Các Filter (bộ lọc) trong AngularJS 25Bộ lọc uppercase 26Bộ lọc lowercase 26Bộ lọc currency 26Bộ lọc filter 26Bộ lọc orderby 27Ví dụ 27http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 3Kết quả 29AngularJS – Bảng 29Ví dụ 30Kết quả 32Phần tử HTML DOM trong AngularJS 33ng-disabled directive 34ng-show directive 34ng-hide directive 34ng-click directive 34Ví dụ 34Kết quả 35Các Module trong AngularJS 36Module ứng dụng 36Module điều khiển 37Sử dụng các Module 37Ví dụ 38Kết quả 40Form trong AngularJS 40Các sự biến 41ng-click 41Validate dữ liệu 42Ví dụ 42Kết quả 44Include trong AngularJS 45Ví dụ 45Kết quả 48Ajax trong AngularJS 48Các ví dụ 49data.txt 49http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 4testAngularJS.jsp 50Kết quả 51AngularJS – View 52ng-view 52Cách sử dụng 52ng-template 52Cách sử dụng 52$routeProvider 53Cách sử dụng 53Ví dụ 54Kết quả 55AngularJS – Scope 56Tính kế thừa của Scope 57Ví dụ 57Kết quả 59Các Service trong AngularJS 59Sử dụng phương thức factory 60Sử dụng phương thức service 60Ví dụ 60Kết quả 62Dependency Injection trong AngularJS 62value – giá trị 63factory 63service 64provider 65constant 65Ví dụ 66Kết quả 67Các Custom Directive trong AngularJS 68http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 5Tìm hiểu Custom Directive 68Ví dụ 70Kết quả 71AngularJS – Các chức năng quốc tế hóa 72Ví dụ cho ví trị Đan Mạch 72Kết quả 73Ví dụ sử dụng vị trí của Browser 73Kết quả 74AngularJS – Tài liệu tham khảo 75Các đường link hữu ích về AngularJS 75Giới thiệu chung về AngularJSAngularJS là một thư viện JavaScript mạnh mẽ. Nó đươc sử dụng trong các dự án Ứng dụngtrang đơ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ồnmở 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ơnhết là bạn phải có kiến thức về công nghệ web như HTML, CSS, AJAX, etc.http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 6Tổng quan về AngularJSAngularJS là gì?AngularJS là một khung (framework) ứng dụng web mã nguồn mở. Nó được phát triển lần đầună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ớinhấ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ụngHTML 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ànhphầ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ếtdữ liệu vàDependency injection – Sự tiêm vật phụ thuộc của AngularJS loại bỏ phần lớn codemà 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 RICHInternet 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-sidetrong 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ìnhviê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õiDướ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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 7 Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu nốigiữ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ầntrong ứ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 đíchriê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ể đượcsử 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ànhnhiề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ệmvụ nhất định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liên hơnvới Model-View-ViewModel. Nhóm phát triển AngularJS đã đặt tên vui cho mô hình nàylà 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ộttrạng thái. Dependency Injection: AngularJS có sẵn một hệ thống con dependency injectionđể giúpcá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ệmBiể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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 8Ư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áclinh 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ếtbởi JavaScript với quá trình xử lý nghiệp vụ.http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 9Và 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ảngAndroid và iOs.Nhược điểm của AngularJSMặ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ộtsố đ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ôngan 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ênan 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 đượctrang cơ bản, không thấy gì thêm.Các thành phần của AngularJSAngularJS 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ụngtrong 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ộidụ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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 10 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ênbả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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 11 Có 2 sự lựa chọn khác nhau là legacy và lastest. Lagacy dành cho cácphiê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ảnné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à khimột người sử dụng trang web đã tải một bản AngularJS trên CDN trên, nó sẽ khôngphả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ạotrang myfirstexample.jspl như dưới đây:
Tóm Tắt
Welcome {{helloTo.title}} to the world of Tutorialspoint!
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 12Dướ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 AngularJSPhầ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ầntử html hoặc trong phần tử body như sau:ViewView 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ầnview.helloTo.title thông báo cho AngularJS viết giá trị của model với tên helloTo.title vào phầnHTML.ControllerController là phần sau:Đoạn code trên đăng ký một hàm controller với tên HelloController trong AngularJS module vớitên myapp Chúng ta sẽ tìm hiểu sâu hơn về Các module và Thành phần controllers trongcác chương tương ứng. Hàm controller được đăng ký với AngularJS qua cách gọi hàmangular.module( ).controller( ).Tham số $scope đã truyền tới hàm controller là một model. Hàm controller thêm 1 đốitượng helloTo JavaScript , và thêm trường title vào trong đối tượng đó.Thực hiệnSau 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, AngularJSJavaScript được tải, các đối tượng global của AngularJS được khởi tạo. Sau đó, JavaScriptsẽ đă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ácview. 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 MVCModel 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ànhphầ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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 14 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à ViewMVC 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ùngvà 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 đượcchuẩ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 ModelPhầ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ệnnhững phần lệnh từ controller để cập nhật các giá trị cho bản thân nó.Phần ViewLà 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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 15Phần ControllerPhầ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ượngmodel. 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ựchiệ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ấycá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úngtô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ềukhiể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 frameworkLà 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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 16Bước 4: Bind giá trị của model đã được định nghĩa ở trên sử dụngng-bind directive.
Hello
!Các bước để chạy một ứng dụng AngularJSSử dụng các bước bên trên để tạo ra một trang HTML.testAngularJS.jspAngularJS 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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 17Cá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 HTMLvà 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àongườ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 AngularJSAngularJS 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ềntố 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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 18 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 directiveng-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ácmodule khác nhau của ứng dụng AngularJS. Ở các ví dụ tiếp theo, chúng ta định nghĩa một ứngdụng AngularJS mặc định sử dụng thuộc tính ng-app của một phần tử div.ng-init directiveng-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ị chomộ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ácQuố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 directiveng-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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 19ng-repeat directiveng-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.jspAngularJS Directives
Sample Application
Enter your Name:
Hello
!
List of Countries with locale:
- {{ ‘Country: ‘ + country.name + ‘, Locale: ‘ + country.locale }}
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 20Kế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 AngularJSExpression được sử dụng để bind các dữ liệu ứng dụng ra thẻ HTML. Expression được viết trongdấu {{ expression}}. Expression có cách hoạt động tương đối giống ng-bind directive. Cácexpression 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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 21Sử dụng các chuỗi
Hello {{student.firstname + ” ” + student.lastname}}!
Sử dụng đối tượng
Roll No: {{student.rollno}}
Sử dụng mảng
Marks(Math): {{marks[3]}}
Ví dụDưới đây là ví dụ cho các expression mô tả bên trên:testAngularJS.jspAngularJS Expressions
Sample Application
Hello {{student.firstname + ” ” + student.lastname}}!
Expense on Books : {{cost * quantity}} Rs
Roll No: {{student.rollno}}
Marks(Math): {{marks[3]}}
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/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 22Thành phần Controller trong AngularJSMộ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ệutrong ứng dụng. Một controller được định nghĩa bởi sử dụng directive là ng-controller. Mộtcontroller là một đối tượng JavaScript bao gồm các thuộc tính và các hàm. Mỗi một controller chấpnhận $scope là tham số để hướng đến ứng dụng/module mà phần controller này điều khiển.Ở đây là phần thông báo studentController sử dụng ng-controller directive. Những bước tiếptheo, chúng ta sẽ định nghĩa studentController như sau: studentController nghĩa như là một đối tượng JavaScript với $scope là tham số. $scope hướng đến ứng dụng và được sử dụng bởi đối tượng studentController. $scope.student là thuộc tính của đối tượng studentController. firstName và lastName là hai thuộc tính của đối tượng $scope.student. Chúng ta khởi tạocác giá trị cho chúng (firstName:Mahesh, lastName:Parashar). fullName là hàm của đối tượng $scope.student có nhiệm vụ là trả về giá trị là tên đầy đủ củastudent này. Trong hàm fullname chúng ta nhận đối tượng student và sau đó trả lại tên đã kết nối. Chú ý, chúng ta cũng có thể định nghĩa đối tượng controller ở các tệp JS riêng rẽ và khaibáo trong trang HTML.Bây giờ chúng ta sử dụng thuộc tính studentController với ng-model hoặc expression như sau:Enter first name:
Enter last name:
You are entering: {{student.fullName()}} Chúng ta đã bind giá trị student.firstName và student.lastName vào 2 hộp input. Chúng ta đã bind giá trị student.fullName() tới trang HTML.http://vietjack.com/angularjs/index.jsp Copyright © vietjack.comhttp://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 24 Bây giờ, mỗi khi chúng ta nhập một giá trị firstName hay lastName vào trong hộp input, tênđầy đủ của sinh viên này sẽ được tự động cập nhật.Ví dụDưới đây là ví dụ cho phần giải thích controller bên trên:testAngularJS.jspAngular JS Controller
AngularJS Sample Application
Enter first name:
Enter last name:
You are entering: {{student.fullName()}}Kết quảMở trang textAngularJS.jsp trên trình duyệt web. Và xem kết quả.Các Filter (bộ lọc) trong AngularJSFilter được sử dụng để thay đổi, lọc dữ liệu cho kết quả là một chuỗi khác. Dưới đây là danh sáchcác filter thông dụng thường được sử dụng.STTTênMiêu tảuppercaseChuyển đổi văn bản sang dạng chữ hoa
