Kết nối

[AngularJS] Phần 3: Các module AngularJS

4.867 lượt xem 
 Cập nhật lần cuối: 23/09/2023 lúc 09:50:35
Thể loại: AngularJS, Thiết kế Web 

Module trong AngularJS là nơi chứa các điều khiển (controller) của 1 ứng dụng.

Tạo 1 module
Module được tạo ra bằng cách dùng hàm angular.module

<div ng-app="myApp">...</div>
<script>
       var app = angular.module("myApp", []);
</script>

Tham số “myApp” chỉ rõ phần tử HTML mà ứng dụng sẽ thực thi.

Thêm 1 điều khiển (Controller)

Để thêm 1 điều khiển vào ứng dụng, chúng ta có thể dùng chỉ thị ng-controller như sau:

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

<script>

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

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

</script>

Trong đoạn mã trên, điều khiển được thêm tên là myCtrl, áp dụng điều khiển này, chúng ta có thể khởi tạo 1 hàm với biến $scope chứa thuộc tính firstName và lastName và gán giá trị cho 2 thuộc tính này. Diễn giải {{ firstName + ” ” + lastName }} dùng để xuất nội dung 2 thuộc tính này trên giao diện.

Thêm 1 chỉ thị (directive)

AngularJS có 1 tập các chỉ thị được tích hợp sẵn mà chúng ta có thể dùng để thêm chức năng vào ứng dụng.

Ví dụ sau chỉ ta cách thêm 1 chỉ thị tự tạo vào ứng dụng:

<div ng-app="myApp" dammio-test-directive></div>

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

app.directive("dammioTestDirective", function() {
    return {
        template : "Đây là 1 khởi tạo chỉ thị ! (dammio.com)"
    };
});
</script>

Trong ví dụ trên, đầu tiên chúng ta khai báo 1 chỉ thị có tên là dammio-test-directive, với mỗi từ chứa dấu gạch ngang. Trong phần script, chúng ta phải thêm 1 chỉ thị với tên “dammioTestDirective”, trong đó tên ở đây không có dấu gạch ngang và liền nhau, với mỗi từ viết hóa chữ cái đầu, trừ từ đầu tiên. Chúng ta cùng xem lại:

dammio-test-directive ==> dammioTestDirective

Lưu trữ module và controller trong tập tin

Liên quan:  [AngularJS] Phần 6: Ràng buộc dữ liệu trong AngularJS

Các module và controller trong các ứng dụng AngularJS thông thường sẽ được lưu trong các tập tin. Khi cần đến chỉ cần nhúng các tập tin này vào ứng dụng để sử dụng.

Trong ví dụ sau, chúng ta tạo 2 tập tin *.js với myApp.js chứa định nghĩa module, và myCtrl.js chứa controller.

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

Nội dung myApp.js

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

Tham số [] trong định nghĩa module có thể dùng để định nghĩa các module phụ thuộc. Nếu không có tham số [], bạn sẽ không tạo 1 module mới mà đang truy vấn 1 module cũ.

Nội dung myCtrl.js

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

Các hàm có thể gây ảnh hưởng không gian toàn cục

Các hàm toàn cục nên tránh trong JavaScript vì chúng có thể dễ bị ghi đề hay phá hủy các đoạn mã kịch bản khác.

Các module trong AngularJS giảm thiểu vấn đề này bằng cách giữ các hàm cục bộ bên trong module.

Khi nào nên tải thư viện AngularJS

Thông thường, trong các ứng dụng HTML, các đoạn mã kịch bản sẽ được đặt ở trong cuối phần tử <body> tuy nhiên trong AngularJS, chúng ta nên đặt ở trong phần tử <head> hoặc phần đầu của phần tử <body>.

Ví dụ sau chỉ ra cách đặt thư mục AngularJS ở ngay sau thẻ mở <body>.

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

Kết luận: Như vậy trong bài này chúng ta đã học được cách tạo module trong AngularJS.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [AngularJS] Phần 3: Các module AngularJS. https://www.dammio.com/2017/02/11/angularjs-phan-3-cac-module-angularjs.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[AngularJS] Phần 3: Các module AngularJS},
    year = {2017},
    url = {https://www.dammio.com/2017/02/11/angularjs-phan-3-cac-module-angularjs},
    urldate = {2024-03-28}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x