Tìm hiểu về Angular Modules
Một module AngularJS định nghĩa một Application. Module được sử dụng để phân biệt phần xử lý logic (service), controller và application … và giúp code trở nên rõ ràng
Module chứa các bộ phận khác nhau của Application.
Module chứa các Controller của Application.
Controller luôn thuộc về một Module .
Cách tạo một Module
Một module được tạo ra bằng cách sử dụng hàm angular.module trong AngularJS
<div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script>
Tham số "MyApp" dùng để chỉ một phần tử HTML sẽ chạy Ứng dụng AngularJS.
Bây giờ bạn có thể thêm controllers, directives, filters và nhiều hơn nữa, vào ứng dụng AngularJS của bạn.
Thêm 1 Controller vào Module Angular
Để thêm 1 controller vào Module Angular ta sử dụng:
<div ng-app="myApp" ng-controller="myCtrl"> {{ ho + " " + ten }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.ten= "A"; $scope.ho= "Nguyen"; }); </script>
Kết quả nhận được: Nguyen A
Trong đó:
ng-app="myApp" cho ta biết thẻ HTML này sẽ liên kết với Module của AngularJS Application
ng-controller="myCtrl" cho thấy Angular Module của mình sẽ sử dụng controller tên là myCtrl
Trong thực tế, chúng ta thường chia Ứng dụng AngularJS thành các file Javascript để có thể dễ dàng quản lý và sửa chữa.
<!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"> {{ ten + " " + ho }} </div> <script src="myApp.js"></script> <script src="myCtrl.js"></script> </body> </html>
Trong ví dụ này mình chia nhỏ ứng dụng thành 2 file myApp.js và myCtrl.js
Trong đó:
File myApp.js sẽ chứa lời khai báo Ứng dụng AngularJS
var app = angular.module("myApp", []);
File myCtrl.js sẽ chứa controller của Ứng dụng
app.controller("myCtrl", function($scope) { $scope.ten = "A"; $scope.ho = "Nguyen"; });
