Bài 5: AngularJS – Modules
Một module AngularJS định nghĩa một ứng dụng. Module là một nơi chứa (container) cho các phần khác nhau của một ứng dụng Module là một container cho ứng dụng controller. Controller luôn thuộc về một module. Tạo Một Module Một module được tạo bằng cách sử dụng hàm AngularJS ...
Một module AngularJS định nghĩa một ứng dụng.
Module là một nơi chứa (container) cho các phần khác nhau của một ứng dụng
Module là một container cho ứng dụng controller.
Controller luôn thuộc về một module.
Tạo Một Module
Một module được tạo bằng cách sử dụng hàm AngularJS angular.module
<div ng-app=”myApp”>…</div>
<script>
var app = angular.module(“myApp”, []);
</script>
Tham số “myApp” tham chiếu tới một element HTMLtrong ứng dụng sẽ chạy.
Bây giờ bạn có thể thêm controller, directive, filter và nhiều thứ tới ứng dụng AngularJS của bạn.
Thêm Một Controller
Thêm một controller tới ứng dụng của bạn và tham chiếu tới controller với directive ng-controller.
Example
<div ng-app=”myApp” ng-controller=“myCtrl”>
{{ firstName + ” ” + lastName }}
</div>
<script>
var app = angular.module(“myApp”, []);
app.controller(“myCtrl”, function($scope) {
$scope.firstName = “Ku Tin”;
$scope.lastName = “Nguyen”;
});
</script>
Bạn sẽ học nhiều về controller ở bài học sau.
Thêm Một Directive
AngularJS có một bộ directive được xây dựng mà bạn có thể sử dụng để thêm chức năng cho ứng dụng của bạn. Bạn có thể tham khảo lại bài Directives để biết nếu bạn chưa xem nó.
Trong việc thêm directive bạn có thể sử dụng module để thêm directive của riêng bạn tới ứng dụng.
Example
<div ng-app=”myApp” dammelaptrinh-test-directive></div>
<script>
var app = angular.module(“myApp”, []);
app.directive(“dammelaptrinhTestDirective”, function() {
return {
template : “I was made in a directive constructor!”
};
});
</script>
Modules và Controllers Trong File
Ứng dụng AngularJS cho phép đặt module và controller trong các file javascript.
Trong ví dụ này, “myApp.js” chứa đựng một định nghĩa module, “myCtr.js” chứa đựng controller.
<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”myApp” ng-controller=”myCtrl“>
{{ firstName + ” ” + lastName }}
</div>
<script src=”myApp.js“></script>
<script src=”myCtrl.js“></script>
</body>
</html>
myApp.js có nội dung sau:
var app = angular.module(“myApp”,[]);
Lưu ý: tham số [] trong định nghĩa module có thể được sử dụng để định nghĩa các module phụ thuộc nhau, nghĩa là nếu không đưa vào tham số [], bạn sẽ không tạo module mới, nhưng nhận một module đang tồn tại.
myCtrl.js với nội dung sau:
app.controller(“myCtrl”, function($scope) {
$scope.firstName = “Ku Tin”;
$scope.lastName= “Nguyen”;
});
Rồi các bạn hãy tạo các file và chạy thử ứng dụng cho sáng mắt.
Với module bạn có thể thấy, nó giúp làm giảm các hàm global trong javascript bị ghi đè hoặc phá hỏng bởi các script khác. Vì các hàm luôn được giữ cục bộ tới module.
Giả sử bạn ghi một hàm với tên là Total trong javascript,nhưng vô tình ở một file script khác cũng có hàm này thì nó lại bị ghi đè rồi, nhưng với AngularJS module thì thoải mái nhé, vì dù có giống nhau tên thì nó vẩn thuộc module khác nhau và sẽ bị ảnh hưởng ở nơi nào định nghĩa module đó.
Khi Nào Để Load Thư Viện
Trong khi hầu hết trong ứng dụng HTML đặt scripts ở cuối element <body>,với AngularJS library hoặc đặt trong <head> hoặc bắt đầu của <body>.
Bởi vì sao?, vì angular.module chỉ có thể được biên dịch sau khi thư viện đã được load.
Example
<!DOCTYPE html>
<html>
<body>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<div ng-app=”myApp” ng-controller=”myCtrl”>
{{ firstName + ” ” + lastName }}
</div>
<script>
var app = angular.module(“myApp”, []);
app.controller(“myCtrl”, function($scope) {
$scope.firstName = “Ku Tin”;
$scope.lastName = “Nguyen”;
});
</script>
</body>
</html>
Đây là chúng ta load thư viện ngay sau <body>. Nếu để sau định nghĩa script của module thì nó không làm việc.
Tóm tắt:
Module cũng giống như là một đại diện của ứng dụng AngularJS, nếu bạn muốn tạo thêm các đối tượng khác, định nghĩa v.v… thì bạn phải tạo một module của ứng dụng đó, rồi dùng module đi khắp thế gian.
