Mô-đun AngularJS
Một mô-đun AngularJS định nghĩa một ứng dụng.
Mô-đun là một vùng chứa cho các phần khác nhau của một ứng dụng.
Mô-đun là một vùng chứa cho các bộ điều khiển ứng dụng.
Bộ điều khiển luôn thuộc về một mô-đun.
Tạo một mô-đun
Một mô-đun đượ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" đề cập đến một phần tử HTML trong đó ứng dụng sẽ chạy.
Giờ đây, bạn có thể thêm bộ điều khiển, chỉ thị, bộ lọc và hơn thế nữa vào ứng dụng AngularJS của mình.
Thêm bộ điều khiển
Thêm bộ điều khiển vào ứng dụng của bạn và tham khảo bộ điều khiển với lệnh
ng-controller:
Thí 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ẽ tìm hiểu thêm về bộ điều khiển ở phần sau trong hướng dẫn này.
Thêm chỉ thị
AngularJS có một tập hợp các chỉ thị tích hợp mà bạn có thể sử dụng để thêm chức năng cho ứng dụng của mình.
Để có tài liệu tham khảo đầy đủ, hãy truy cập tài liệu tham khảo chỉ thị AngularJS của chúng tôi .
Ngoài ra, bạn có thể sử dụng mô-đun để thêm các chỉ thị của riêng bạn vào các ứng dụng của bạn:
Thí 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 sẽ tìm hiểu thêm về các lệnh sau trong hướng dẫn này.
Mô-đun và Bộ điều khiển trong Tệp
Thông thường trong các ứng dụng AngularJS là đặt mô-đun và bộ điều khiển trong các tệp JavaScript.
Trong ví dụ này, "myApp.js" chứa định nghĩa mô-đun ứng dụng, trong khi "myCtrl.js" chứa bộ điều khiển:
Thí dụ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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
var app = angular.module("myApp", []);
Tham số [] trong định nghĩa mô-đun có thể được sử dụng để xác định các mô-đun phụ thuộc.
Nếu không có tham số [], bạn sẽ không tạo mô-đun mới, nhưng đang truy xuất mô-đun hiện có.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Các hàm có thể gây ô nhiễm không gian tên toàn cầu
Các hàm toàn cục nên được tránh trong JavaScript. Chúng có thể dễ dàng bị ghi đè hoặc bị phá hủy bởi các tập lệnh khác.
Các mô-đun AngularJS giảm thiểu vấn đề này, bằng cách giữ tất cả các chức năng cục bộ cho mô-đun.
Khi nào tải thư viện
Mặc dù các ứng dụng HTML thường đặt các tập lệnh ở cuối
<body>phần tử, nhưng bạn nên tải thư viện AngularJS ở đầu <head>hoặc ở đầu phần tử <body>.
Điều này là do các lệnh gọi tới angular.modulechỉ có thể được biên dịch sau khi đã tải xong thư viện.
Thí dụ
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>