Angularjs学习笔记（三）----依赖注入

一、定义

　　如前所述，$scope对象被神秘的注入到了控制器中，实际上，这是因为控制器声明了它需要$scope，所以AngularJS才会创建并注入它。这套依赖管理系统可以这样总结："为了正常工作，我需要一个依赖（协作对象）：我不知道它从哪里来，也不知道它如何创建。我只知道我需要它，所以请为我提供它"。

　　AngularJS拥有内建的依赖注入（dependeny injection,DI)引擎，职责如下：

理解对象对其协作对象的需求。
找到所需的协作对象。
连接协作对象，以形成功能完备的应用。

二、注册服务

　　AngularJS只连接其认识的对象。因此，接入依赖注入机制的第一步，是将对象注册在模块(module)上。我们不直接注册对象的实例，而是将对象创建方案抛给依赖注入系统。然后AngularJS解释这些方案以初始化对象，并在之后连接他们，最后成为可运行的项目。

　　AngularJS的$provide服务可以注册不同的对象创建方案。之后$injector服务会解释这些方案，生成完备而可用的对象实例（已经解决好所有的依赖关系）。

　　$injector服务创建的对象成为服务（service）。在整个应用的生命中，每种方案AngularJS仅解释一次，也就是说，每个对象仅有一个实例。

http://www.yiibai.com/angularjs/angularjs_dependency_injection.html

　　五种对象创建方案：

　　2.1 值

　　定义一个名为defaultInput值，可以注入到控制器中

// 定义一个模块

var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据

mainApp.value("defaultInput", );

...

// 将 "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);

   }

});

　　2.2 服务

　　定义一个名为CalcService的服务，可以注入到控制器中

//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);

   }

});

　　2.3 Factory

//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);

   }

});

...

　　2.4 常量

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

　　2.5 Provider

//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;

      };

   });

});

巴特西

Angularjs学习笔记（三）----依赖注入

最新文章

热门文章