mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
52 lines
1.8 KiB
Text
52 lines
1.8 KiB
Text
@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($location){
|
||
// do stuff with the $location service
|
||
}
|
||
MyController.$inject = ['$location'];
|
||
</pre>
|
||
|
||
In this example, the `MyController` constructor function takes one argument, the {@link
|
||
api/angular.module.ng.$location $location} service. Angular is then responsible for supplying the
|
||
instance of `$location` to the controller when the constructor is instantiated. There are two ways
|
||
to cause controller instantiation – by configuring routes with the `$location` service, or by
|
||
referencing the controller from the HTML template, as follows:
|
||
|
||
<pre>
|
||
<!doctype html>
|
||
<html ng-controller="MyController" ng-app>
|
||
<script src="http://code.angularjs.org/angular.min.js"></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 = ['$location'];
|
||
</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}
|