Angular开发者指南（七）依赖注入

依赖注入

依赖注入（DI）是一种软件设计模式，处理组件如何获取其依赖关系。

AngularJS注入器子系统负责创建组件，解析它们的依赖关系，并根据请求将它们提供给其他组件。

使用依赖注入

DI遍布AngularJS。可以在定义组件或为模块提供运行和配置块时使用它。

诸如服务，指令，过滤器和动画之类的组件由注入工厂方法或构造函数定义。这些组件可以注入“服务”和“值”组件作为依赖关系。
控制器由构造函数定义，可以使用任何“服务”和“值”组件作为依赖关系注入，但是它们也可以提供特殊的依赖关系。
run方法接受一个函数，它可以注入"service"，"value"和"constant"组件作为依赖。请注意，不能将"providers"注入运行块。
config方法接受一个函数，它可以注入"provider"和"constant"组件作为依赖。请注意，无法将“服务”或“值”组件注入配置。

工厂方法

定义指令，服务或过滤器的方式是使用工厂函数。工厂方法使用模块注册。推荐的工厂声明方式是：

angular.module('myModule', [])

.factory('serviceId', ['depService', function(depService) {

  // ...

}])

.directive('directiveName', ['depService', function(depService) {

  // ...

}])

.filter('filterName', ['depService', function(depService) {

  // ...

}]);

模块方法

我们可以通过调用config和run方法指定要在模块的配置和运行时运行的函数。这些函数是可注入的依赖关系，就像上面的工厂函数。

angular.module('myModule', [])

.config(['depProvider', function(depProvider) {

  // ...

}])

.run(['depService', function(depService) {

  // ...

}]);

控制器

控制器是“类”或“构造函数”，它们负责提供支持模板中的声明性标记的应用程序行为。推荐的声明控制器的方法是使用数组符号：

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {

  ...

  $scope.aMethod = function() {

    ...

  }

  ...

}]);

与服务不同，应用程序中可能有许多相同类型的控制器实例。

此外，对控制器提供附加的依赖性：

$scope：控制器与DOM中的元素相关联，因此提供对该作用域的访问。其他组件（如服务）只能访问$rootScope服务。
resolves：如果将控制器实例化为路由的一部分，则作为路由的一部分解析的任何值都可用于注入到控制器中。

依赖注解

AngularJS通过注入器调用某些功能（如服务工厂和控制器）。需要注解这些函数，以便注入器知道要注入到函数中的服务。有三种方法用服务名称信息注解代码：

使用内联数组注解（首选）
使用$inject属性注解
隐含地从函数参数名称（有警告）

内联数组注解

这是注解应用程序组件的首选方式。这是文档中的示例如何编写。

例如：

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {

  // ...

}]);

这里我们传递一个数组，其元素由一个字符串列表（依赖项的名称）和函数本身组成。

当使用这种类型的注解时，注意保持注解数组与函数声明中的参数同步。

$inject属性注解

为了允许简写重命名函数参数并仍然能够注入正确的服务，该函数需要使用$inject属性注解。 $inject属性是要注入的服务名称的数组。

var MyController = function($scope, greeter) {

  // ...

}

MyController.$inject = ['$scope', 'greeter'];

someModule.controller('MyController', MyController);

在这种情况下，$inject数组中的值的顺序必须与MyController中的参数的顺序匹配。

就像数组注解一样，你需要注意保持$inject与函数声明中的参数同步。

隐式注解

注意：如果计划缩小代码，你的服务名称将被重命名并破坏你的应用程序。

someModule.controller('MyController', function($scope, greeter) {

  // ...

});

给定一个函数，注入器可以通过检查函数声明并提取参数名称来推断要注入的服务的名称。在上面的例子中，$scope和greeter是需要注入到函数中的两个服务。

这种方法的一个优点是没有与函数参数保持同步的名称数组。可以自由地重新排序依赖项。

但是这个方法不能使用JavaScript minifiers / obfuscators，因为他们会重命名参数。

像ng-annotate这样的工具可以在应用程序中使用隐式依赖关系注解，并在缩小之前自动添加内联数组注解。如果你决定采取这种方法，你可能想使用ng-strict-di。

由于这些注意事项，我们建议避免使用此样式的注解。

使用严格依赖注入

可以在与ng-app相同的元素上添加ng-strict-di指令以选择进入严格DI模式：

<!doctype html>

<html ng-app="myApp" ng-strict-di>

<body>

  I can add: {{ 1 + 2 }}.

  <script src="angular.js"></script>

</body>

</html>

只要服务尝试使用隐式注解，严格模式就会抛出错误。

考虑这个模块，其中包括一个使用隐式DI的willBreak服务：

angular.module('myApp', [])

.factory('willBreak', function($rootScope) {

  // $rootScope是被隐式注解

})

.run(['willBreak', function(willBreak) {

  //当它运行时AngularJS抛出这个异常

}]);

当willBreak服务被实例化时，AngularJS将抛出一个错误，因为严格的模式。当使用ng-annotate等工具确保所有应用程序组件都有注解时，这是非常有用的。

如果使用手动引导，还可以通过在可选配置参数中提供strictDi：true来使用严格的DI：

angular.bootstrap(document, ['myApp'], {

  strictDi: true

});

为什么要依赖注入？

这部分激励和解释AngularJS使用DI。有关如何使用DI，请参见上文。

组件（对象或函数）只有三种方式可以获得它的依赖：

组件可以创建依赖关系，通常使用new运算符。
组件可以通过引用全局变量来查找依赖关系。
组件可以在需要的地方传递依赖。

创建或查找依赖关系的前两个选项不是最优的，因为它们会对组件的依赖性进行硬编码。这使得很难，即使不是不可能，修改依赖性。这在测试中尤其成问题，其中通常期望提供用于测试隔离的模拟依赖性。

第三个选项是最可行的，因为它消除了从组件定位依赖性的责任。依赖项简单地交给组件。

function SomeClass(greeter) {

  this.greeter = greeter;

}

SomeClass.prototype.doSomething = function(name) {

  this.greeter.greet(name);

}

在上面的例子中，SomeClass不关心创建或定位greeter依赖，它只是在实例化时传递给greeter。

这是可取的，但它负责获取构造SomeClass的代码的依赖。

为了管理依赖项创建的责任，每个AngularJS应用程序都有一个注入器。注入器是负责构建和查找依赖性的服务定位器。

以下是使用注入器服务的示例：

// 在模块中提供连接信息

var myModule = angular.module('myModule', []);

指示注入器如何建立一个greeter服务。注意greeter依赖于$window服务。 greeter服务是一个包含greet方法的对象。

myModule.factory('greeter', function($window) {

  return {

    greet: function(text) {

      $window.alert(text);

    }

  };

});

创建一个新的注入器，它可以提供myModule模块中定义的组件，并从注入器请求我们的greeter服务。（这通常由AngularJS引导自动完成）。

var injector = angular.injector(['ng', 'myModule']);

var greeter = injector.get('greeter');

请求依赖性解决了硬编码的问题，但它也意味着注入器需要在整个应用程序中传递。通过注入器打破了Demeter的定律。为了弥补这一点，我们在HTML模板中使用声明符号，将创建组件的责任交给注入器，如下例所示：

<div ng-controller="MyController">

  <button ng-click="sayHello()">Hello</button>

</div>

function MyController($scope, greeter) {

  $scope.sayHello = function() {

    greeter.greet('Hello World');

  };

}

当AngularJS编译HTML时，它会处理ng-controller指令，然后请求注入器创建控制器及其依赖关系的实例。

injector.instantiate(MyController);

这一切都在幕后完成。注意，通过让ng-controller要求注入器实例化类，它可以满足MyController的所有依赖性，而控制器不知道注入器。

这是最好的结果。应用程序代码简单地声明它需要的依赖性，而不必处理注入器。这个设置不打破德米特法。

巴特西

Angular开发者指南（七）依赖注入

最新文章

热门文章