AngularJS: Module trong Angular
Giải phóng thời gian, khai phóng năng lực
Mỗi module trong AngularJS định nghĩa một ứng dụng.
Module là một bộ chứa các thành phần khác nhau của một ứng dụng.
Module là một bộ chứa cho các controller ứng dụng.
Các controller luôn luôn thuộc về một module.
Tạo module
Module được tạo bằng cách sử dụng hàm angular.module()
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Tham số "myApp" tham chiếu tới một phần tử HTML trong đó ứng dụng sẽ chạy.
Bây giờ ta có thể thêm controller, chỉ thị, bộ lọc, ... vào ứng dụng AngularJS "myApp".
Thêm controller
Để thêm một controller tới ứng dụng của bạn ta thêm chỉ thị ng-controller:
Ví dụ
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Bạn sẽ học được nhiều hơn về controller ở bài sau bài này.
Thêm một chỉ thị
AngularJS có một tập các chỉ thị được xây dựng sẵn và bạn có thể dùng để thêm chức năng cho ứng dụng của bạn.
Ngoài ra bạn còn có thể sử dụng module để thêm chính chỉ thị của bạn cho các ứng dụng:
Ví dụ
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Bạn có thể học thêm về chỉ thị ở bài học phía sau.
Module và Controller trong các tập tin
Các ứng dụng trong AngularJS thường đẩy module và controller vào các file JavaScript.
Trong ví dụ này, "myApp.js" chứa một định nghĩa module ứng dụng, còn "myCtrl.js" chứa controller:
Ví dụ
<!DOCTYPE html>
<html>
<script src="https://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>
File myApp.js
var app = angular.module("myApp", []);
Tham số [] trong định nghĩa module có thể được sử dụng để định nghĩa các module phụ thuộc.
Ngoại trừ tham số [] bạn không tạo một module mới mà truy xuất vào module hiện thời.
File myCtrl.js
Những hàm có thể gây tác hại đến namespace Global
Các hàm Global cần phải được tránh trong JavaScript. Chúng có thể dễ dàng được ghi đè hoặc bị hủy bởi các kịch bản khác.
Các module AngularJS sẽ giúp giảm các hàm bằng cách đưa tất cả các hàm cục bộ vào module.
Khi nào thì cần tải thư viện
Trong khi thông thường các ứng dụng HTML thường đặt các kịch bản ở phía cuối thẻ <body> thì lời khuyên được đưa ra là bạn tải thư viện AngularJS vào trong thẻ <head> hoặc phía đầu của thẻ <body>.
Lý do là bởi việc gọi hàm angular.module chỉ có thể được biên dịch sau khi thư viện được load.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<script src="https://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 = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực