Mô-đun AngularJS
Mô-đun AngularJS là gì?
Một mô-đun xác định chức năng ứng dụng được áp dụng cho toàn bộ trang HTML bằng lệnh ng-app. Nó xác định chức năng, chẳng hạn như dịch vụ, chỉ thị và bộ lọc, theo cách giúp bạn dễ dàng sử dụng lại nó trong các ứng dụng khác nhau.
Trong tất cả các hướng dẫn trước đây của chúng tôi, bạn hẳn đã nhận thấy lệnh ng-app được sử dụng để xác định ứng dụng Angular chính của mình. Đây là một trong những khái niệm chính về mô-đun trong Angular.JS.
Cách tạo mô-đun trong AngularJS
Trước khi bắt đầu tìm hiểu mô-đun là gì, hãy xem ví dụ về ứng dụng AngularJS không có mô-đun và sau đó hiểu nhu cầu có mô-đun trong ứng dụng của bạn.
Hãy xem xét việc tạo một tệp có tên “DemoController.js” và thêm đoạn mã dưới đây vào tập tin
Function Democontroller($scope) { $scope.a=1; $scope.b=2; $scope.c=$scope.b + $scope.a; });
Trong đoạn mã trên, chúng ta đã tạo một hàm có tên là “DemoController”, hàm này sẽ hoạt động như một bộ điều khiển trong ứng dụng của chúng ta.
Trong bộ điều khiển này, chúng ta chỉ thực hiện phép cộng 2 biến a và b và gán phép cộng các biến này cho một biến mới là c và gán nó trở lại đối tượng phạm vi.
Bây giờ hãy tạo Sample.html chính, đây sẽ là ứng dụng chính của chúng ta. Hãy chèn đoạn mã dưới đây vào trang HTML của chúng tôi.
<body ng-app=""> <div ng-controller="DemoController"> <h3> Guru99 Global Event</h3> {{c}}
Trong đoạn mã trên, chúng tôi đang bao gồm DemoController và sau đó gọi giá trị của biến $scope.c thông qua một biểu thức.
Nhưng hãy chú ý chỉ thị ng-app của chúng tôi, nó có giá trị trống.
- Về cơ bản, điều này có nghĩa là tất cả các bộ điều khiển được gọi trong ngữ cảnh của lệnh ng-app đều có thể được truy cập trên toàn cầu. Không có ranh giới ngăn cách nhiều bộ điều khiển với nhau.
- Hiện nay trong lập trình hiện đại, đây là một thực tiễn tồi nếu không gắn bộ điều khiển vào bất kỳ mô-đun nào và làm cho chúng có thể truy cập được trên toàn cầu. Phải có một số ranh giới logic được xác định cho bộ điều khiển.
Và đây là lúc các mô-đun xuất hiện. Các mô-đun được sử dụng để tạo ra sự phân tách ranh giới đó và hỗ trợ phân tách các bộ điều khiển dựa trên chức năng.
Hãy thay đổi đoạn mã trên để triển khai các mô-đun và gắn bộ điều khiển của chúng ta vào mô-đun này
var sampleApp = angular.module('sampleApp',[]); sampleApp.controller('DemoController', function($scope) { $scope.a=1; $scope.b=2; $scope.c=$scope.b + $scope.a; });
Hãy lưu ý những khác biệt chính trong đoạn mã được viết ở trên
-
var sampleApp = angular.module('sampleApp',[]);
Chúng tôi đặc biệt tạo một mô-đun AngularJS có tên là 'sampleApp'. Điều này sẽ tạo thành một ranh giới logic cho chức năng mà mô-đun này sẽ chứa. Vì vậy, trong ví dụ trên, chúng ta có một mô-đun chứa bộ điều khiển thực hiện vai trò bổ sung 2 đối tượng phạm vi. Do đó, chúng ta có thể có một mô-đun có ranh giới logic cho biết mô-đun này sẽ chỉ thực hiện chức năng tính toán toán học cho ứng dụng.
-
sampleApp.controller('DemoController', function($scope)
Chúng tôi hiện đang gắn bộ điều khiển vào mô-đun AngularJS “SampleApp”. Điều này có nghĩa là nếu chúng tôi không tham chiếu mô-đun 'sampleApp' trong mã HTML chính của mình, chúng tôi sẽ không thể tham chiếu chức năng của bộ điều khiển.
Mã HTML chính của chúng ta sẽ không giống như hình bên dưới
<body ng-app="'sampleApp'"> <div ng-controller="DemoController"> <h3> Guru99 Global Event</h3> {{c}}
Hãy lưu ý những điểm khác biệt chính trong mã được viết ở trên và mã trước đó của chúng tôi
<body ng-app="'sampleApp'">
Trong thẻ body của chúng tôi,
- Thay vì có một lệnh ng-app trống, chúng tôi hiện đang gọi mô-đun sampleApp.
- Bằng cách gọi mô-đun ứng dụng này, giờ đây chúng ta có thể truy cập bộ điều khiển 'DemoController' và chức năng có trong bộ điều khiển demo.
Mô-đun và bộ điều khiển trong AngularJS
In Góc cạnh.JS, mẫu được sử dụng để phát triển các ứng dụng web hiện đại là tạo nhiều mô-đun và bộ điều khiển để phân tách một cách hợp lý nhiều cấp độ chức năng.
Thông thường các mô-đun sẽ được lưu trữ riêng biệt Javascript các tệp này sẽ khác với tệp ứng dụng chính.
Hãy xem một ví dụ về cách đạt được điều này.
Trong ví dụ dưới đây,
- Chúng ta sẽ tạo một tệp có tên Utilities.js. Tệp này sẽ chứa 2 mô-đun, một mô-đun để thực hiện chức năng cộng và mô-đun còn lại để thực hiện chức năng trừ.
- Sau đó, chúng tôi sẽ tạo 2 tệp ứng dụng riêng biệt và truy cập tệp Tiện ích từ mỗi tệp ứng dụng.
- Trong một tệp ứng dụng, chúng ta sẽ truy cập vào mô-đun để cộng và trong tệp kia, chúng ta sẽ truy cập vào mô-đun để trừ.
Bước 1) Xác định mã cho nhiều mô-đun và bộ điều khiển.
var AdditionApp = angular.module('AdditionApp',[]); AdditionApp.controller('DemoAddController', function($scope) { $scope.a=5; $scope.b=6; $scope.c=$scope.a + $scope.b; }); var SubractionApp = angular.module('SubtractionApp',[]); SubractionApp.controller('DemoSubtractController', function($scope) { $scope.a=8; $scope.b=6; $scope.d=$scope.a - $scope.b; });
Hãy lưu ý những điểm chính trong đoạn mã được viết ở trên
-
var AdditionApp = angular.module('AdditionApp',[]); var SubractionApp = angular.module('SubtractionApp',[]);
Có 2 Mô-đun góc riêng biệt được tạo, một mô-đun có tên 'AdditionApp' và mô-đun thứ hai có tên 'SubtractionApp'.
-
AdditionApp.controller('DemoAddController', function($scope) SubractionApp.controller('DemoSubtractController', function($scope)
Có 2 bộ điều khiển riêng biệt được xác định cho mỗi mô-đun, một bộ điều khiển được gọi là DemoAddController và bộ điều khiển còn lại là DemoSubtractController. Mỗi bộ điều khiển có logic riêng để cộng và trừ các số.
Bước 2) Tạo các tập tin ứng dụng chính của bạn. Hãy tạo một tệp có tên ApplicationAddition.html và thêm mã bên dưới
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Addition</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="lib/utilities.js"></script> </head> <body> <div ng-app = "AdditionApp" ng-controller="DemoAddController"> Addition :{{c}} </div> </body> </html>
Hãy lưu ý những điểm chính trong đoạn mã được viết ở trên
-
<script src="/lib/Utilities.js"></script>
Chúng tôi đang tham chiếu tệp Utilities.js trong tệp ứng dụng chính của mình. Điều này cho phép chúng tôi tham chiếu bất kỳ mô-đun AngularJS nào được xác định trong tệp này.
-
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
Chúng tôi đang truy cập mô-đun 'AdditionApp' và DemoAddController bằng cách sử dụng lệnh ng-app và bộ điều khiển ng tương ứng.
-
{{c}}
Vì chúng ta đang tham chiếu mô-đun và bộ điều khiển được đề cập ở trên nên chúng ta có thể tham chiếu biến $scope.c thông qua một biểu thức. Biểu thức sẽ là kết quả của việc thêm 2 biến phạm vi a và b được thực hiện trong Bộ điều khiển 'DemoAddController'
Cách tương tự chúng ta sẽ làm với hàm trừ.
Bước 3) Tạo các tập tin ứng dụng chính của bạn. Hãy tạo một tệp có tên “ApplicationSubtraction.html” và thêm mã bên dưới
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Addition</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="lib/utilities.js"></script> </head> <body> <div ng-app = "SubtractionApp" ng-controller="DemoSubtractController"> Subtraction :{{d}} </div> </body> </html>
Hãy lưu ý những điểm chính trong đoạn mã được viết ở trên
-
<script src="/lib/Utilities.js"></script>
Chúng tôi đang tham chiếu tệp Utilities.js trong tệp ứng dụng chính của mình. Điều này cho phép chúng tôi tham chiếu bất kỳ mô-đun nào được xác định trong tệp này.
-
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
Chúng tôi đang truy cập mô-đun 'SubtractionApp và DemoSubtractController bằng cách sử dụng lệnh ng-app và bộ điều khiển ng tương ứng.
-
{{d}}
Vì chúng ta đang tham chiếu mô-đun và bộ điều khiển được đề cập ở trên nên chúng ta có thể tham chiếu biến $scope.d thông qua một biểu thức. Biểu thức sẽ là kết quả của phép trừ 2 biến phạm vi a và b được thực hiện trong 'DemoSubtractContoder' Người điều khiển
Tổng kết
- Nếu không sử dụng các mô-đun AngularJS, bộ điều khiển bắt đầu có phạm vi toàn cầu, dẫn đến thực tiễn lập trình kém.
- Các mô-đun được sử dụng để phân tách logic nghiệp vụ. Nhiều mô-đun có thể được tạo để phân tách một cách hợp lý trong các mô-đun khác nhau này.
- Mỗi mô-đun AngularJS có thể có bộ điều khiển riêng được xác định và gán cho nó.
- Khi xác định các mô-đun và bộ điều khiển, chúng thường được xác định riêng biệt JavaScript các tập tin. Này JavaCác tệp tập lệnh sau đó được tham chiếu trong tệp ứng dụng chính.