Mô-đun AngularJS

Mô-đun AngularJS định nghĩa một ứng dụng.

Mô-đun là chứa đựng của các phần khác nhau của ứng dụng.

Mô-đun là chứa đựng của trình điều khiển ứng dụng.

Trình điều khiển luôn thuộc về một mô-đun.

Tạo mô-đun

Bằng cách sử dụng hàm AngularJSangular.module Tạo một mô-đun:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
tham số "myApp" là phần tử HTML mà ứng dụng sẽ chạy.

Hiện tại, bạn có thể thêm kiểm soát viên, hướng dẫn, bộ lọc, v.v. vào ứng dụng AngularJS của mình.

thêm kiểm soát viên

thêm kiểm soát viên vào ứng dụng của bạn và sử dụng ng-controller hướng dẫn tham chiếu kiểm soát viên:

thuộc

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

Thử trực tiếp

Bạn sẽ tìm hiểu thêm về kiểm soát viên trong phần sau của hướng dẫn này.

thêm hướng dẫn

AngularJS có một bộ hướng dẫn nội bộ, bạn có thể sử dụng chúng để thêm các tính năng vào ứng dụng của mình.

Để có tài liệu tham khảo đầy đủ, vui lòng truy cập tài liệu hướng dẫn hướng dẫn AngularJS của chúng tôi.

Ngoài ra, bạn có thể sử dụng mô-đun để thêm các hướng dẫn của riêng bạn vào ứng dụng của mình:

thuộc

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "Tôi được tạo trong constructor hướng dẫn!"
  };
});
</script>

Thử trực tiếp

Bạn sẽ tìm hiểu thêm về hướng dẫn trong phần sau của hướng dẫn này.

mô-đun và kiểm soát viên trong tệp

Trong ứng dụng AngularJS, việc đặt mô-đun và kiểm soát viên trong tệp JavaScript là rất phổ biến.

Trong ví dụ này, "myApp.js" chứa định nghĩa mô-đun ứng dụng, còn "myCtrl.js" chứa kiểm soát viên:

thuộc

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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>

Thử trực tiếp

myApp.js

var app = angular.module("myApp", []);

tham số [] trong định nghĩa mô-đun có thể được sử dụng để định nghĩa mô-đun phụ thuộc.

nếu không có tham số [] thì bạn không phải tạo mô-đun mới mà là truy vấn mô-đun hiện có.

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

các hàm có thể làm cho không gian tên toàn cục bị nhiễm.

trong JavaScript nên tránh sử dụng các hàm toàn cục. Chúng dễ bị các script khác ghi đè hoặc phá hủy.

Mô-đun AngularJS giảm thiểu vấn đề này bằng cách giữ tất cả các hàm trong mô-đun cục bộ.

khi nào tải thư viện

mặc dù trong ứng dụng HTML, việc đặt script trong <body> thường thấy ở cuối phần tử <head> hoặc <body> bắt đầu tải thư viện AngularJS.

vì chỉ khi tải thư viện sau đó mới có thể biên dịch đối angular.module của việc gọi.

thuộc

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/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 = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

Thử trực tiếp