Mô-đun AngularJS
Một mô-đun AngularJS định nghĩa một ứng dụng.
Mô-đun này là nơi chứa các phần khác nhau của ứng dụng.
Mô-đun này là nơi chứa 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 angular.module AngularJS Angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>Tham số "myApp" đề cập đến phần tử HTML mà ứng dụng sẽ chạy trong đó.
Giờ đây, bạn có thể thêm bộ điều khiển, lệnh, bộ lọc, v.v. 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 bằng lệnh 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>
Hãy tự mình thử »Bạn sẽ tìm hiểu thêm về bộ điều khiển sau trong hướng dẫn này.
Thêm một chỉ thị
AngularJS có một bộ chỉ thị tích hợp mà bạn có thể sử dụng để thêm chức năng vào ứ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 này để thêm các chỉ thị của riêng mình vào ứng dụng của mình:
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> Hãy tự mình thử »Bạn sẽ tìm hiểu thêm về các chỉ thị sau trong hướng dẫn này.
Mô-đun và bộ điều khiển trong tệp
Trong các ứng dụng AngularJS, việc đặt mô-đun và bộ điều khiển vào các tệp JavaScript là điều phổ biến.
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:
Ví 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>
Hãy tự mình thử »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 mà đ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ể làm ô nhiễm không gian tên toàn cầu
Nên tránh các hàm toàn cục trong JavaScript. Chúng có thể dễ dàng bị ghi đè hoặc 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ộ trong mô-đun.
Khi nào cần tải thư viện
Mặc dù các ứng dụng HTML thường đặt tập lệnh ở cuối phần tử <body> , nhưng bạn nên tải thư viện AngularJS trong <head> hoặc ở đầu <body> .
Điều này là do các lệnh gọi tới angular.module chỉ có thể được biên dịch sau khi thư viện đã được tải.
Ví 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>
Hãy tự mình thử »