Rate this post

AngularJS đi kèm với một cơ chế injection phụ thuộc được tích hợp sẵn. Nó tạo điều kiện cho bạn chia ứng dụng của mình thành nhiều loại thành phần khác nhau có thể được chèn vào nhau dưới dạng phụ thuộc.

Dependency Injection là một mẫu thiết kế phần mềm chỉ định cách các thành phần nắm giữ các phần phụ thuộc của chúng. Trong mẫu này, các thành phần được cung cấp các phụ thuộc của chúng thay vì mã hóa chúng trong thành phần.

Các bài viết liên quan:

Mô-đun hóa ứng dụng của bạn giúp việc sử dụng lại, cấu hình và kiểm tra các thành phần trong ứng dụng của bạn trở nên dễ dàng hơn. Sau đây là các loại đối tượng và thành phần cốt lõi:

  • value
  • factory
  • service
  • provider
  • constant

Các đối tượng và thành phần này có thể được injection vào nhau bằng cách sử dụng AngularJS Dependency Injection.

Value

Trong AngularJS, value là một đối tượng đơn giản. Nó có thể là một số, chuỗi hoặc đối tượng JavaScript. Nó được sử dụng để chuyển các Value trong Factory, Service hoặc bộ điều khiển trong giai đoạn chạy và cấu hình.

// xác định một mô-đun  
var myModule = angular.module("myModule", []);  
// tạo một đối tượng Value và chuyển cho nó một dữ liệu.   
myModule.value("numberValue", 100);  
myModule.value("stringValue", "abc");  
myModule.value("objectValue", { val1 : 123, val2 : "abc"} );  

Ở đây, các Value được xác định bằng cách sử dụng hàm value () trên mô-đun. Tham số đầu tiên chỉ định tên của Value và tham số thứ hai là chính Value đó. Các Factory, Service và bộ điều khiển hiện có thể tham chiếu các Value này theo tên của chúng.

Injection một Value

Để đưa một Value vào hàm bộ điều khiển AngularJS, hãy thêm một tham số với cùng một tham số khi Value được xác định.

var myModule = angular.module("myModule", []);  
myModule.value("numberValue", 100);  
myModule.controller("MyController", function($scope, numberValue) {  
 console.log(numberValue);  
});  

Factory

Factory là một hàm được sử dụng để trả về Value. Khi một Service hoặc bộ điều khiển cần một Value được đưa vào từ Factory, nó sẽ tạo ra Value theo yêu cầu. Nó thường sử dụng một hàm gốc để tính toán và trả về Value.

Hãy lấy một ví dụ xác định một Factory sản xuất trên một mô-đun và một bộ điều khiển nhận Value được tạo ra từ Factory được đưa vào:

var myModule = angular.module("myModule", []);  
myModule.factory("myFactory", function() {  
    return "a value";  
});  
myModule.controller("MyController", function($scope, myFactory) {  
console.log(myFactory);  
});  

Đưa các Value vào Factory

Để đưa một Value vào hàm bộ điều khiển AngularJS, hãy thêm một tham số với cùng một tham số khi Value được xác định.

var myModule = angular.module("myModule", []);  
myModule.value("numberValue", 100);  
myModule.controller("MyController", function($scope, numberValue) {  
 console.log(numberValue);  
});  

Lưu ý: Nó không phải là hàm Factory được đưa vào, mà là Value được tạo ra bởi hàm Factory.

Service

Trong AngularJS, service là một đối tượng JavaScript chứa một tập hợp các hàm để thực hiện các tác vụ nhất định. Các Service được tạo bằng cách sử dụng hàm service () trên một mô-đun và sau đó được đưa vào bộ điều khiển.

//Xác định một mô-db8
var mainApp = angular.module("mainApp", []);  
...  

mainApp.service('CalcService', function(MathService){  
   this.square = function(a) {  
      return MathService.multiply(a,a);   
   }  
});  

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {  
   $scope.number = defaultInput;  
   $scope.result = CalcService.square($scope.number);  
    $scope.square = function() {  
      $scope.result = CalcService.square($scope.number);  
   }  
});  

Provider

Trong AngularJS, Provider được sử dụng nội bộ để tạo các Service, Factory, v.v. trong giai đoạn cấu hình (giai đoạn trong đó AngularJS tự khởi động). Đây là hình thức Factory linh hoạt nhất mà bạn có thể tạo ra. Provider là một phương thức Factory đặc biệt với một hàm get () được sử dụng để trả về Value / Service / Factory.

// xác định một mô-đun  
var mainApp = angular.module("mainApp", []);  
...  
// tạo một Service bằng cách sử dụng Provider để xác định một phương thức bình phương để trả về bình phương của một số.  
mainApp.config(function($provide) {  
   $provide.provider('MathService', function() {  
      this.$get = function() {  
         var factory = {};    
         factory.multiply = function(a, b) {  
            return a * b;   
         }  
         return factory;  
      };  
   });  
});  

Constant

Bạn không thể đưa các Value vào hàm module.config (). Thay vào đó, các Constant được sử dụng để chuyển các Value ở giai đoạn cấu hình.

mainApp.constant(“configParam”, “constant value”);   

Hãy lấy một ví dụ để triển khai tất cả các chỉ thị đã đề cập ở trên.

<!DOCTYPE html>  
<html>  
   <head>  
      <title>AngularJS Dependency Injection</title>  
   </head>  
   <body>  
      <h2>Mẫu ứng dụng AngularJS  </h2>  
        
      <div ng-app = "mainApp" ng-controller = "CalcController">  
         <p>Nhập vào 1 số: 
<input type = "number" ng-model = "number" /></p>  
         <button ng-click = "square()">X<sup>2</sup></button>  
         <p>Kết quả: {{result}}</p>  
      </div>  
        
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
        
      <script>  
         var mainApp = angular.module("mainApp", []);  
           
         mainApp.config(function($provide) {  
            $provide.provider('MathService', function() {  
               this.$get = function() {  
                  var factory = {};  
                    
                  factory.multiply = function(a, b) {  
                     return a * b;  
                  }  
                  return factory;  
               };  
            });  
         });  
              
         mainApp.value("defaultInput", 10);  
           
         mainApp.factory('MathService', function() {  
            var factory = {};  
              
            factory.multiply = function(a, b) {  
               return a * b;  
            }  
            return factory;  
         });  
           
         mainApp.service('CalcService', function(MathService){  
            this.square = function(a) {  
               return MathService.multiply(a,a);  
            }  
         });  
           
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {  
            $scope.number = defaultInput;  
            $scope.result = CalcService.square($scope.number);  
  
            $scope.square = function() {  
               $scope.result = CalcService.square($scope.number);  
            }  
         });  
          </script>  
      </body>  
</html>  

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Call now