Mô-đun AngularJS

Bởi: James Hartman James Hartman
Hours cập nhật

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

  1. 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.

  2. 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ểnping Ứng dụng web hiện đại ngày nay được tạo ra bằng cách tạo nhiều mô-đun và bộ điều khiển để phân tách logic nhiều cấp độ chức năng khác nhau.

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 tin có tên là Utilities.js, chứa 2 mô-đun, một mô-đun thực hiện chức năng cộng và một mô-đun thực hiện chức năng trừ.tracsự.
  • 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 mô-đun phép cộng, còn trong tệp ứng dụng khác, chúng ta sẽ truy cập mô-đun phép trừ.tracsự.

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

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    Có 2 mô-đun Angular riêng biệt được tạo ra, một mô-đun có tên là 'AdditionApp' và mô-đun thứ hai có tên là 'Sub'.tracỨng dụng tionApp'.

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    Mỗi mô-đun được định nghĩa bởi 2 bộ điều khiển riêng biệt, một bộ có tên là DemoAddController và bộ còn lại là DemoSub.tracMỗi bộ điều khiển có logic riêng biệt cho phép cộng và phép trừ.tracsự sắp xếp các con 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

  1. <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.

  2. <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.

  3. {{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'

    Chúng ta sẽ làm tương tự với subtracchức năng hoạt động.

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 là “ApplicationSub”.tracmở tệp "tion.html" và thêm đoạn 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

  1. <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.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    Chúng tôi đang truy cập vào 'Sub'.tracMô-đun tionApp và DemoSubtracSử dụng tController bằng cách dùng directive ng-app và ng-controller.

  3. {{d}}

    Vì chúng ta đang tham chiếu đến mô-đun và bộ điều khiển đã đề cập ở trên, nên chúng ta có thể tham chiếu đến biến $scope.d thông qua một biểu thức. Biểu thức này sẽ là kết quả của hàm con.tracviệc xác định 2 biến phạm vi a và b đã được thực hiện trong 'DemoSubtracBộ điều khiển 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.

Tóm tắt bài viết này với: