mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
55 lines
1.8 KiB
Text
55 lines
1.8 KiB
Text
|
@workInProgress
|
|||
|
|
@ngdoc overview
|
|||
|
|
@name Developer Guide: DI: Using DI in Controllers
|
|||
|
|
@description
|
|||
|
|
|
|||
|
|
The most common place to use dependency injection in angular applications is in {@link
|
|||
|
|
dev_guide.mvc.understanding_controller controllers}. Here is a simple example:
|
|||
|
|
|
|||
|
|
<pre>
|
|||
|
|
function MyController($route){
|
|||
|
|
// configure the route service
|
|||
|
|
$route.when(...);
|
|||
|
|
}
|
|||
|
|
MyController.$inject = ['$route'];
|
|||
|
|
</pre>
|
|||
|
|
|
|||
|
|
In this example, the `MyController` constructor function takes one argument, the {@link
|
|||
|
|
api/angular.service.$route $route} service. Angular is then responsible for supplying the instance
|
|||
|
|
of `$route` to the controller when the constructor is instantiated. There are two ways to cause
|
|||
|
|
controller instantiation – by configuring routes with the `$route` service, or by referencing the
|
|||
|
|
controller from the HTML template, as follows:
|
|||
|
|
|
|||
|
|
<pre>
|
|||
|
|
<!doctype html>
|
|||
|
|
<html xmlns:ng="http://angularjs.org" ng:controller="MyController">
|
|||
|
|
<script src="http://code.angularjs.org/angular.min.js" ng:autobind></script>
|
|||
|
|
<body>
|
|||
|
|
...
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
</pre>
|
|||
|
|
|
|||
|
|
When angular is instantiating your controller, it needs to know what services, if any, should be
|
|||
|
|
injected (passed in as arguments) into the controller. Since there is no reflection in JavaScript,
|
|||
|
|
we have to supply this information to angular in the form of an additional property on the
|
|||
|
|
controller constructor function called `$inject`. Think of it as annotations for JavaScript.
|
|||
|
|
|
|||
|
|
<pre>
|
|||
|
|
MyController.$inject = ['$route'];
|
|||
|
|
</pre>
|
|||
|
|
|
|||
|
|
The information in `$inject` is then used by the {@link api/angular.injector injector} to call the
|
|||
|
|
function with the correct arguments.
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Related Topics
|
|||
|
|
|
|||
|
|
* {@link dev_guide.di About Dependency Injection}
|
|||
|
|
* {@link dev_guide.di.understanding_di Understanding Dependency Injection in Angular}
|
|||
|
|
* {@link dev_guide.services Angular Services}
|
|||
|
|
|
|||
|
|
## Related API
|
|||
|
|
|
|||
|
|
* {@link api/angular.injector Angular Injector API}
|