Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.
依赖注入是一个软件设计规则 用来 解决:组件怎样得到他们的依赖
The Angular injector subsystem is in charge of creating components,resolving their dependencies,and providing them to other components as requested.
Angular 注入器 辅助系统 负责 创建组件,得到组件的依赖,提供组件自身到别的组件 ,当别的组件请求这些组件时。
Using Dependency Injection
DI is pervasive throughout Angular. You can use it when defining components or when providing
run
and
config
blocks for a module.
DI在Angular里是无处不在的。你可以在为一个模块 定义组件 或 规定run和config块的时候使用它。
-
Components such as services,directives,filters,and animations are defined by an injectable factory method or constructor function. These components can be injected with "service" and "value" components as dependencies.组件像 services,filters和 animations 都是通过可被注入的工厂函数或构造函数定义的。
-
Controllers are defined by a constructor function,which can be injected with any of the "service" and "value" components as dependencies,but they can also be provided with special dependencies. See Controllersbelow for a list of these special dependencies.controllers是通过构造函数定义的,可被注入'service'或'value'组件来作为依赖,但他们也可以作为特殊的依赖被提供。可通过点击蓝色链接来查看controllers作为特殊依赖的情况。
-
The
run
method accepts a function,which can be injected with "service","value" and "constant" components as dependencies. Note that you cannot inject "providers" intorun
blocks.
-
Theconfig方法接收一个函数,用来被注入'provider'和'constant'组件作为依赖。注意,你不能注入'service'和'value'组件进入配置。
config
method accepts a function,which can be injected with "provider" and "constant" components as dependencies. Note that you cannot inject "service" or "value" components into configuration.
SeeModulesfor more details aboutrun
andconfig
blocks.
Factory Methods
The way you define a directive,service,or filter is with a factory function. The factory methods are registered with modules. The recommended way of declaring factories is:
angular.module('myModule', []).factory('serviceId', ['depService', function(depService) { // ...}]).directive('directiveName',136)">// ...}]).filter('filterName',136)">// ...}]);
Module Methods
We can specify functions to run at configuration and run time for a module by calling the
config
and
run
methods. These functions are injectable with dependencies just like the factory functions above.
[]).config(['depProvider', function(depProvider) { // ...}]).run([ ControllersControllers are "classes" or "constructor functions" that are responsible for providing the application behavior that supports the declarative markup in the template. The recommended way of declaring Controllers is using the array notation:someModule.controller('MyController',68)">'$scope', 'dep1',68)">'dep2', function($scope, dep1, dep2) { ... $scope.aMethod = function() { ... } ...}]);Unlike services,there can be many instances of the same type of controller in an application.不像services,在一个应用中可以有很多同类controller的实例Moreover,additional dependencies are made available to Controllers:而且,追加的依赖 也可被Controllers获取。service.
$scope
: Controllers are associated with an element in the DOM and so are provided with access to thescope. Other components (like services) only have access to the$rootScope$scope: 控制器是和DOM中的一个元素关联的,所以能够访问$scope。其他组件(像services)只能访问$rootScope服务。
- resolves: If a controller is instantiated as part of a route,then any values that are resolved as part of the route are made available for injection into the controller.
resolves: 如果一个controller 被作为route的一部分实例化,那么任何作为路由一部分得到的值 是可注入进controller的。
Dependency Annotation
Angular invokes certain functions (like service factories and controllers) via the injector. You need to annotate these functions so that the injector knows what services to inject into the function. There are three ways of annotating your code with service name information:
- Using the inline array annotation (preferred)
使用行内数组注释(首选)
- Using the
$inject
property annotation
使用$inject属性注释
- Implicitly from the function parameter names (has caveats)
从函数参数中隐式注释
Inline Array Annotation(内联数组注释)
This is the preferred way to annotate application components. This is how the examples in the documentation are written.
这是首选的方法注释应用组件。下面是文档中的例子:
For example:
'greeter', greeter) { // ...}]);
Here we pass an array whose elements consist of a list of strings (the names of the dependencies) followed by the function itself.
When using this type of annotation,take care to keep the annotation array in sync with the parameters in the function declaration.
当使用这种类型的注释时,要注意保持注释数组和函数参数同步。
$inject
Property Annotation($inject属性注释)
To allow the minifiers to rename the function parameters and still be able to inject the right services,the function needs to be annotated with the
$inject
property. The
$inject
property is an array of service names to inject.
var MyController = function($scope,136)">// ...}@H_113_502@MyController.$inject = ['greeter']; someModule.controller( @H_113_502@MyController);
In this scenario the ordering of the values in the
$inject
array must match the ordering of the parameters in
@H_113_502@MyController
.
在这个场景中,$inject数组中的值的顺序必须和被注释的函数参数的顺序匹配。
Just like with the array annotation,you'll need to take care to keep the
$inject
in sync with the parameters in the function declaration.
就像‘数组注释’,你需要注意保持$inject和函数声明中参数的同步。
Implicit Annotation(隐式注释)
Careful:If you plan to
minifyyour code,your service names will get renamed and break your app.
The simplest way to get hold of the dependencies is to assume that the function parameter names are the names of the dependencies.
// ...});
Given a function,the injector can infer the names of the services to inject by examining the function declaration and extracting the parameter names. In the above example,
$scope
and
greeter
are two services which need to be injected into the function.
One advantage of this approach is that there's no array of names to keep in sync with the function parameters. You can also freely reorder dependencies.
However this method will not work with JavaScript minifiers/obfuscators because of how they rename parameters.
无论如何不能够生效当使用JavaScript压缩器/ 因为他们会重命名参数。