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.
-
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
[]).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
- 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
- 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)">// ...}MyController.$inject = ['greeter']; someModule.controller( MyController);
In this scenario the ordering of the values in the
$inject
array must match the ordering of the parameters in
MyController
.
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.
// ...});
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.