12/08/2018, 13:19
Tìm Hiểu AngularJS - API (P10)
Như vậy chúng ta đã cùng nhau tìm hiểu AngularJS trong seri gồm 9 bài, bao gồm các nội dung cơ bản nhất dành cho người mới bắt đầu, các bạn có thể xem lại toàn bộ tại đây Tìm Hiểu AngularJS. Đây sẽ là bài viết cuối trong loạt bài này, trước khi ta chuyển sang viết một ứng dụng nhỏ có sử dụng ...
- Như vậy chúng ta đã cùng nhau tìm hiểu AngularJS trong seri gồm 9 bài, bao gồm các nội dung cơ bản nhất dành cho người mới bắt đầu, các bạn có thể xem lại toàn bộ tại đây Tìm Hiểu AngularJS. Đây sẽ là bài viết cuối trong loạt bài này, trước khi ta chuyển sang viết một ứng dụng nhỏ có sử dụng AngularJS. Có thể mình sẽ dụng laravel kết hợp với AngularJS, vì hiện tại Laravel đang là một framework rất được ưa chuộng hiện nay.
- Còn ở bài này ta sẽ cùng nhau tìm hiểu về Angular API, viết tắt của Application Programming Interface, ta có thể tạm hiểu là Giao diện lập trình ứng dụng, còn cụ thể ta sẽ cùng xem xét bên dưới:
Angular API
-
AngularJS Global API là tập hợp các hàm toàn cục để thực hiện các chức năng phổ biến như:
- Comparing objects: so sánh đối tượng
- Iterating objects: lặp đối tượng
- Converting data: chuyển đổi đối tượng
-
để sử dụng được các hàm global này, ta sẽ sử dụng angular object để truy cập gọi đến chúng.
-
Dưới đây là một số hàm API phổ biết hay được sử dụng, mà trong loạt seri này cũng có lần mình đã nhắc đến:
- angular.lowercase() - chuyển đổi chuỗi thành chữ thường - angular.uppercase() - chuyển đổi chuỗi thành chữ hoa - angular.isString() - trả lại true nếu tham chiếu tới là chuỗi - angular.isNumber() - trả lại true nếu tham chiếu tới là số
-
Ví dụ:
<!DOCTYPE html> <html lang='en'> <head> <meta charset="utf8"> <title>AngularJS Validation</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>{{ x1 }}</p> <p>{{ x2 }}</p> <p>{{ x3 }}</p> <p>{{ x4 }}</p> <p>{{ x5 }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.x1 = "JOHN"; $scope.x2 = angular.lowercase($scope.x1); $scope.x3 = angular.uppercase($scope.x1); $scope.x4 = angular.isString($scope.x1); $scope.x5 = angular.isNumber($scope.x1); }); </script> </body> </html>
- Ta sẽ nhận được kết quả như sau:
- JOHN
- jonh
- JOHN
- true
- false
- Trên đây chỉ là một vài hàm cơ bản được Angular tích hợp sẵn trong core module, được viết rất trực quan và dễ hiểu cho người đọc, ta chỉ việc dùng angular object gọi đến chúng để có kết quả như mong muốn.
- Ngoài ra còn những hàm chức năng khác mà khi ta cần dùng đến chúng thì ta cần include module đó và ứng dụng trước khi có thể gọi đến chúng.
- Vậy ngoài core module thì còn những module nào, sử dụng chúng ra sao, cách đơn giản nhất là ta vào trang chủ và truy cập link này: AngularJS API Reference rồi ngâm cứu.
- AngularJS API Reference được viết cho phiên bản mới nhất 1.5.3. Tài liệu này được tổ chức thành các module chứa các components của một ứng dụng AngularJS như: directives, services, filters, providers, templates, global APIs, và testing mocks.
- ng (core module): Là module mặc định chứa các core components của AngularJS (các Global API ở trên là nằm trong module này)
- Directives: các directive core được sử dụng trong template nhứ ngClick, ngInclude, ngRepeat,..
- Services / Factories: các service core như $compile, $http, $location,..
- Filters: filter, date, currency, lowercase, uppercase,..
- Global APIs: angular.copy(), angular.equals(), angular.element(),..
- ngRoute: module cho phép dịnh tuyến URL trong ứng dụng của bạn, lưu ý ta cần include file angular-route.js trước khi sử dụng.
- ngAnimate: dùng khi ta cần hiển thị các hiệu ứng chuyển động linh hoạt cho ứng dụng bằng cách sử dụng CSS transitions/animations hoặc JavaScript callbacks. Lúy ý cần include file angular-animate.js.
- ngAria, ngResource, ngCookies, ngTouch, ngSanitize, ngMock: tương tự với các module này ta cũng cần include file js trước khi có thể sử dụng chúng.
Kết luận và tham khảo
-
AngularJS API Reference là tài liệu tham khảo rất hữu dụng và cần thiết cho lập trình viên, nó giống như kiểu phpmanual đối với PHP, ta chỉ cần nhớ những hàm chính, những hàm cơ bản hay dùng, còn khi nào lỡ quên, hay chưa chắc chắn lắm về cách dùng, kết quả trả lại thì ta chỉ cần lục lại API, ở đó chứa tất tần tật từ cách dùng cho tới kết quả đầu ra. Nó sẽ rất hữu ích cho bạn, hy vọng loạt bài về Angular này có thể giúp ích được cho các bạn.
-
Và dưới đây là một số nguồn mình tham khảo trong khi viết bài:
- API Reference
- http://www.w3schools.com/angular/angular_api.asp
- Ở bài sau ta sẽ tìm hiểu cách tích hợp AngularJS và Laravel trong một ứng dụng, cũng là để mở đầu cho seri mới về laravel sắp tới của mình. Rất mong nhận được sự ủng hộ!
- Nếu các bạn có ý kiến đóng góp xin vui lòng để lại comment bên dưới, chúng ta sẽ cùng nhau mổ xẻ vấn đề. Xin cảm ơn!
