Hướng dẫn mô-đun AngularJS với ví dụ

Mô-đun AngularJS là gì?

Mô-đun xác định chức năng ứng dụng được áp dụng cho toàn bộ trang HTML bằng chỉ thị 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 sẽ nhận thấy chỉ thị ng-app được sử dụng để xác định ứng dụng Angular chính của bạn. Đây là một trong những khái niệm chính của các mô-đun trong Angular.JS.

Trong hướng dẫn này, bạn sẽ học-

Cách tạo một mô-đun trong AngularJS
Mô-đun và Bộ điều khiển

Cách tạo một mô-đun trong AngularJS

Trước khi bắt đầu với mô-đun là gì, hãy xem ví dụ về một ứng dụng AngularJS không có mô-đun và sau đó hiểu nhu cầu của việc 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 mã bên dưới vào tệp

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 "DemoController" 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 việc cộng các biến này vào một biến mới, 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 của chúng ta, đâ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.


Sự kiện toàn cầu Guru99
{{c}}

Trong đoạn mã trên, chúng ta đang bao gồm DemoController của mình 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 lưu ý chỉ thị ng-app của chúng tôi, nó có một 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 chỉ thị ng-app đều có thể được truy cập trên toàn cầu. Không có ranh giới nào ngăn cách nhiều bộ điều khiển với nhau.
Bây giờ trong lập trình hiện đại, đây là một thực tiễn không tốt khi 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 hợp lý đượ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 mã ở trên để triển khai các mô-đun và đính kèm bộ điều khiển của chúng tôi 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 điểm 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 đang tạo một mô-đun AngularJS được gọi là 'sampleApp'. Điều này sẽ tạo thành một ranh giới hợp lý 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 một bộ điều khiển thực hiện vai trò của việc thêm 2 đối tượng phạm vi. Do đó, chúng ta có thể có một mô-đun với ranh giới logic nói rằng 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)
```
Bây giờ chúng tôi đang gắn bộ điều khiển vào mô-đun AngularJS "SampleApp" của chúng tôi. Đ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 của chúng tôi.

Mã HTML chính của chúng tôi sẽ không giống như hình dưới đây


Guru99 Global Event
{{c}}

Hãy lưu ý sự khác biệt chính trong mã được viết ở trên và mã trước đó của chúng tôi

Trong thẻ cơ thể của chúng tôi,

Thay vì có một chỉ thị ng-app trống, giờ đây chúng ta đang gọi mô-đun sampleApp.
Bằng cách gọi mô-đun ứng dụng này, bây giờ 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 Angular.JS, mô hình đượ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 nhiều cấp chức năng một cách hợp lý.

Thông thường, các mô-đun sẽ được lưu trữ trong các tệp Javascript riêng biệt, sẽ khác với tệp ứng dụng chính.

Hãy xem một ví dụ về cách có thể đạt được điều này.

Trong ví dụ dưới đây,

Chúng tôi sẽ tạo một tệp có tên là Utilities.js, tệp này sẽ chứa 2 mô-đun, một để thực hiện chức năng của phép cộng và một để thực hiện chức năng của phép 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 tôi sẽ truy cập vào mô-đun để cộng và trong tệp khác, chúng tôi 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 Angular riêng biệt được tạo, một mô-đun được đặt tên là 'AdditionApp' và mô-đun thứ hai được đặt tên là '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ộ đượ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 biệt để cộng và trừ các số.

Bước 2) Tạo các tệp ứ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

AdditionAddition :{{c}}

Hãy lưu ý những điểm chính trong đoạn mã được viết ở trên

Chúng tôi đang tham chiếu tệp Utilities.js trong tệp ứng dụng chính của chúng tôi. Đ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.
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à ng-controller tương ứng.
```
{{c}}
```
Vì chúng tôi đang tham chiếu đến mô-đun và bộ điều khiển được đề cập ở trên, chúng tôi có thể tham chiếu đến 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 bổ sung 2 biến phạm vi a và b đã được thực hiện trong Bộ điều khiển 'DemoAddController'

Tương tự như cách chúng ta sẽ làm đối với hàm trừ.

Bước 3) Tạo các tệp ứ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

AdditionSubtraction :{{d}}

Hãy lưu ý những điểm chính trong đoạn mã được viết ở trên

Chúng tôi đang tham chiếu tệp Utilities.js trong tệp ứng dụng chính của chúng tôi. Đ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.
Chúng tôi đang truy cập 'mô-đun SubtractionApp và DemoSubtractController bằng cách sử dụng chỉ thị ng-app và ng-controller tương ứng.
```
{{d}}
```
Vì chúng tôi đang tham chiếu đến mô-đun và bộ điều khiển được đề cập ở trên, chúng tôi có thể tham chiếu đến 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 Bộ điều khiển 'DemoSubtractController'

Tóm lược

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 các phương pháp lập trình không tốt.
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 ra để 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 mô-đun và bộ điều khiển, chúng thường được định nghĩa trong các tệp JavaScript riêng biệt. Các tệp JavaScript này sau đó được tham chiếu trong tệp ứng dụng chính.