AngularJS Module

AngularJS module là gì

AngularJS module dùng để định nghĩa một ứng dụng AngularJS. Module giống như một chiếc hộp để chứa các thành phần khác của ứng dụng bên trong nó. Vì vậy, Module còn được gọi là một container của ứng dụng.

AngularJS Module cũng chứa các controller bên trong nó. Chúng ta sẽ tìm hiểu về điều này trong các phần tiếp theo khi tìm hiểu về AngularJS controller.

Tạo module trong AngularJS

Để tạo 1 module trong AngularJS chúng ta sử dụng hàm angular.module:

<div ng-app="myApp">...</div>

<script>

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

</script>

Đối số myApp ở trên tham chiếu tới phần tử HTML đã được dùng định nghĩa ứng dụng myApp, ví dụ: <div ng-app="myApp">.

Thêm controller vào module

Ví dụ dưới đây sẽ thêm controller vào module app mới được định nghĩa và gán các giá trị cho các biến dùng trong ứng dụng..

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "Lê Văn";
    $scope.lastName = "Tèo";
});
</script>

Chạy

. AngularJS sử dụng chỉ thị ng-controller để xác định vị trí phần tử HTML của module. Chúng ta sẽ tìm hiểu về controller trong các bài học tiếp theo.

Thêm chỉ thị vào module

Bạn có thể thêm chỉ thị vào 1 module:

<div ng-app="myApp" my-directive></div>

<script>

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

app.directive("myDirective", function() {
    return {
        template : "Tôi được thêm vào từ chỉ thị của mô-đun!"
    };
});
</script>

Chạy Chúng ta sẽ tìm hiểu kỹ hơn về chỉ thịtemplate ở các bài học sau.

Tách biệt module và controller trong 1 tệp

Để mã lệnh HTML được gọn gàng và đồng thời dễ dàng cho việc quản lý các mã lệnh JavaScript thì các module và controller thường được để trong các tệp riêng rẽ và sau đó tham chiếu lại trong trang HTML.

<!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>

Và lúc này myApp.jsmyCtrl.js sẽ lần lượt chứa mã lệnh liên quan tới module và controller. Ví dụ myApp.js sẽ trông giống như sau:

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

Vị Trí Tham Chiếu Thư Viện AngularJS

Thông thường chúng ta được khuyên nên để các thư viện JavaScript ở trước thẻ đóng </body>. Tuy nhiên thì khi làm việc vơi AngularJS chúng ta cần phải tham chiếu tới thư viện này trong cặp thẻ <head></head> hoặc trước thẻ đóng </body>. Điều này đảm bảo các module và controller hoạt động đúng.

<!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 = "Trần Văn";
    $scope.lastName = "Tí";
});
</script>

</body>
</html>

Chạy

AngularJS JavaScript
Thêm Bình Luận: