100 lines
4.5 KiB
HTML
Executable file
100 lines
4.5 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
|
|
<div><span class="hint"></span>
|
|
</div>
|
|
</h1>
|
|
<div><div class="developer-guide-page developer-guide-angular-services-managing-service-dependencies-page"><p>Angular allows services to declare other services as dependencies needed for construction of their
|
|
instances.</p>
|
|
<p>To declare dependencies, you specify them in the factory function signature and annotate the
|
|
function with the inject annotations either using by setting the <code>$inject</code> property, as an array of
|
|
string identifiers or using the array notation. Optionally the <code>$inject</code> property declaration can be
|
|
dropped (see "Inferring <code>$inject</code>" but note that that is currently an experimental feature).</p>
|
|
<p>Using the array notation:</p>
|
|
<pre class="prettyprint linenums">
|
|
function myModuleCfgFn($provide) {
|
|
$provide.factory('myService', ['dep1', 'dep2', function(dep1, dep2) {}]);
|
|
}
|
|
</pre>
|
|
<p>Using the $inject property:</p>
|
|
<pre class="prettyprint linenums">
|
|
function myModuleCfgFn($provide) {
|
|
var myServiceFactory = function(dep1, dep2) {};
|
|
myServiceFactory.$inject = ['dep1', 'dep2'];
|
|
$provide.factory('myService', myServiceFactory);
|
|
}
|
|
</pre>
|
|
<p>Using DI inference (incompatible with minifiers):</p>
|
|
<pre class="prettyprint linenums">
|
|
function myModuleCfgFn($provide) {
|
|
$provide.factory('myService', function(dep1, dep2) {});
|
|
}
|
|
</pre>
|
|
<p>Here is an example of two services, one of which depends on the other and both
|
|
of which depend on other services that are provided by the Angular framework:</p>
|
|
<pre class="prettyprint linenums">
|
|
/**
|
|
* batchLog service allows for messages to be queued in memory and flushed
|
|
* to the console.log every 50 seconds.
|
|
*
|
|
* @param {*} message Message to be logged.
|
|
*/
|
|
function batchLogModule($provide){
|
|
$provide.factory('batchLog', ['$timeout', '$log', function($timeout, $log) {
|
|
var messageQueue = [];
|
|
|
|
function log() {
|
|
if (messageQueue.length) {
|
|
$log('batchLog messages: ', messageQueue);
|
|
messageQueue = [];
|
|
}
|
|
$timeout(log, 50000);
|
|
}
|
|
|
|
// start periodic checking
|
|
log();
|
|
|
|
return function(message) {
|
|
messageQueue.push(message);
|
|
}
|
|
}]);
|
|
|
|
/**
|
|
* routeTemplateMonitor monitors each $route change and logs the current
|
|
* template via the batchLog service.
|
|
*/
|
|
$provide.factory('routeTemplateMonitor',
|
|
['$route', 'batchLog', '$rootScope',
|
|
function($route, batchLog, $rootScope) {
|
|
$rootScope.$on('$routeChangeSuccess', function() {
|
|
batchLog($route.current ? $route.current.template : null);
|
|
});
|
|
}]);
|
|
}
|
|
|
|
// get the main service to kick of the application
|
|
angular.injector([batchLogModule]).get('routeTemplateMonitor');
|
|
</pre>
|
|
<p>Things to notice in this example:</p>
|
|
<ul>
|
|
<li>The <code>batchLog</code> service depends on the built-in <a href="api/ng.$timeout"><code>$timeout</code></a> and
|
|
<a href="api/ng.$log"><code>$log</code></a> services, and allows messages to be logged into the
|
|
<code>console.log</code> in batches.</li>
|
|
<li>The <code>routeTemplateMonitor</code> service depends on the built-in <a href="api/ngRoute.$route">$route</a> service as well as our custom <code>batchLog</code> service.</li>
|
|
<li>Both of our services use the factory function signature and array notation for inject annotations
|
|
to declare their dependencies. It is important that the order of the string identifiers in the array
|
|
is the same as the order of argument names in the signature of the factory function. Unless the
|
|
dependencies are inferred from the function signature, it is this array with IDs and their order
|
|
that the injector uses to determine which services and in which order to inject.</li>
|
|
</ul>
|
|
<h3>Related Topics</h2>
|
|
<ul>
|
|
<li><a href="guide/dev_guide.services.understanding_services">Understanding Angular Services</a></li>
|
|
<li><a href="guide/dev_guide.services.creating_services">Creating Angular Services</a></li>
|
|
<li><a href="guide/dev_guide.services.injecting_controllers">Injecting Services Into Controllers</a></li>
|
|
<li><a href="guide/dev_guide.services.testing_services">Testing Angular Services</a></li>
|
|
</ul>
|
|
<h2>Related API</h3>
|
|
<ul>
|
|
<li><a href="api/ng">Angular Service API</a></li>
|
|
<li><a href="api/angular.injector"><code>Angular Injector API</code></a></li>
|
|
</ul>
|
|
</div></div>
|