欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解AngularJS中的依賴注入機(jī)制

 更新時間:2015年06月17日 11:25:43   投稿:goldensun  
這篇文章主要介紹了詳解AngularJS中的依賴注入機(jī)制,對JavaScript各組件的使用起到非常重要的作用,需要的朋友可以參考下

 依賴注入是一個在組件中給出的替代了硬的組件內(nèi)的編碼它們的依賴關(guān)系的軟件設(shè)計模式。這減輕一個組成部分,從定位的依賴,依賴配置。這有助于使組件可重用,維護(hù)和測試。

AngularJS提供了一個至高無上的依賴注入機(jī)制。它提供了一個可注入彼此依賴下列核心組件。

  •     值
  •     工廠
  •     服務(wù)
  •     提供者
  •     常值

值是簡單的JavaScript對象,它是用來將值傳遞過程中的配置相位控制器。

//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
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);
  }
});

工廠

工廠是用于返回函數(shù)的值。它根據(jù)需求創(chuàng)造值,每當(dāng)一個服務(wù)或控制器需要。它通常使用一個工廠函數(shù)來計算并返回對應(yīng)值

//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {   
  var factory = {}; 
  factory.multiply = function(a, b) {
   return a * b 
  }
  return factory;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
...

服務(wù)

服務(wù)是一個單一的JavaScript包含了一組函數(shù)對象來執(zhí)行某些任務(wù)。服務(wù)使用service()函數(shù),然后注入到控制器的定義。

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
//inject the service "CalcService" into the controller
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);
  }
});

提供者

提供者所使用的AngularJS內(nèi)部創(chuàng)建過程中配置階段的服務(wù),工廠等(相AngularJS引導(dǎo)自身期間)。下面提到的腳本,可以用來創(chuàng)建,我們已經(jīng)在前面創(chuàng)建MathService。提供者是一個特殊的工廠方法以及get()方法,用來返回值/服務(wù)/工廠。

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
  $provide.provider('MathService', function() {
   this.$get = function() {
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b; 
     }
     return factory;
   };
  });
});

常量

常量用于通過配置相位值考慮事實(shí),值不能使用期間的配置階段被傳遞。

mainApp.constant("configParam", "constant value");

例子

下面的例子將展示上述所有指令。
testAngularJS.html

<html>
<head>
  <title>AngularJS Dependency Injection</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="CalcController">
   <p>Enter a number: <input type="number" ng-model="number" />
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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", 5);

   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>

結(jié)果

在Web瀏覽器打開textAngularJS.html??吹浇Y(jié)果如下。

2015617111816048.jpg (560×240)

相關(guān)文章

  • 詳解AngularJS 模態(tài)對話框

    詳解AngularJS 模態(tài)對話框

    在涉及GUI程序開發(fā)的過程中,常常有模態(tài)對話框以及非模態(tài)對話框的概念。接下來通過本文給大家介紹AngularJS 模態(tài)對話框 ,感興趣的朋友一起學(xué)習(xí)吧
    2016-04-04
  • angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼

    angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼

    本篇文章主要介紹了angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Angularjs 基礎(chǔ)入門

    Angularjs 基礎(chǔ)入門

    這篇文章主要介紹了Angularjs 基礎(chǔ)入門的一些知識,需要的朋友可以參考下
    2014-12-12
  • 淺析angularJS中的ui-router和ng-grid模塊

    淺析angularJS中的ui-router和ng-grid模塊

    下面小編就為大家?guī)硪黄獪\析angularJS中的ui-router和ng-grid模塊。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • AngularJS教程之MVC體系結(jié)構(gòu)詳解

    AngularJS教程之MVC體系結(jié)構(gòu)詳解

    本文主要講解AngularJS MVC體系結(jié)構(gòu),這里提供詳細(xì)的教程供大家學(xué)習(xí)參考,有需要的小伙伴可以參考下
    2016-08-08
  • Angular重構(gòu)數(shù)組字段的解決方法示例

    Angular重構(gòu)數(shù)組字段的解決方法示例

    這篇文章主要為大家介紹了Angular重構(gòu)數(shù)組字段的解決方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • angularjs實(shí)現(xiàn)的購物金額計算工具示例

    angularjs實(shí)現(xiàn)的購物金額計算工具示例

    這篇文章主要介紹了angularjs實(shí)現(xiàn)的購物金額計算工具,涉及AngularJS事件監(jiān)聽、數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下
    2018-05-05
  • 動手寫一個angular版本的Message組件的方法

    動手寫一個angular版本的Message組件的方法

    本篇文章主要介紹了動手寫一個angular版本的Message組件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • angularjs實(shí)現(xiàn)Tab欄切換效果

    angularjs實(shí)現(xiàn)Tab欄切換效果

    這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)Tab欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Angular之toDoList的實(shí)現(xiàn)代碼示例

    Angular之toDoList的實(shí)現(xiàn)代碼示例

    本篇文章主要介紹了Angular之toDoList的實(shí)現(xiàn)代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12

最新評論