|
2 | 2 | @name Developer Guide: Angular Services: Understanding Angular Services
|
3 | 3 | @description
|
4 | 4 |
|
5 |
| -Angular services are singletons that carry out specific tasks common to web apps, such as the |
6 |
| -{@link api/ng.$http $http service} that provides low level access to the browser's |
7 |
| -`XMLHttpRequest` object. |
| 5 | +## What are Angular Services? |
8 | 6 |
|
9 |
| -To use an Angular service, you identify it as a dependency for the dependent (a controller, or |
10 |
| -another service) that depends on the service. Angular's dependency injection subsystem takes care |
11 |
| -of the rest. The Angular injector subsystem is in charge of service instantiation, resolution of |
12 |
| -dependencies, and provision of dependencies to factory functions as requested. |
| 7 | +Angular services are singletons objects or functions that carry out specific tasks common to web apps. |
| 8 | +Angular has a number of built in services, such as the {@link api/ng.$http $http service}, which |
| 9 | +provides access to the browser's `XMLHttpRequest` object for making requests to a server. Like other core |
| 10 | +Angular variables and identifiers, the built-in services always start with `$` (such as `$http` mentioned |
| 11 | +above). You can also create your own custom services. |
13 | 12 |
|
14 |
| -The purpose of a service factory function is to generate a single object or function that |
15 |
| -represents the service to the rest of the application. That object or function will then be |
16 |
| -passed as a parameter to any other factory function which specifies a dependency on this service. |
| 13 | +## Using a Service |
17 | 14 |
|
18 |
| -Angular factory functions are executed lazily. That is, they are only executed when needed |
19 |
| -to satisfy a dependency, and are then executed exactly once for each service. Everything which is |
20 |
| -dependent on this service gets a reference to the single instance generated by the service factory. |
| 15 | +To use an Angular service, you identify it as a dependency for the component (controller, service, |
| 16 | +filter or directive) that depends on the service. Angular's dependency injection subsystem takes |
| 17 | +care of the rest. The Angular injector subsystem is in charge of service instantiation, resolution |
| 18 | +of dependencies, and provision of dependencies to components as requested. |
21 | 19 |
|
22 |
| -Angular injects dependencies using "constructor" injection (the service is passed in via a factory |
23 |
| -function). Because JavaScript is a dynamically typed language, Angular's dependency injection |
24 |
| -subsystem cannot use static types to identify service dependencies. For this reason a dependent |
25 |
| -must explicitly define its dependencies by using the `$inject` property. For example: |
| 20 | +Angular injects dependencies using |
| 21 | +{@link http://misko.hevery.com/2009/02/19/constructor-injection-vs-setter-injection/ "constructor" injection}. |
| 22 | +The dependency is passed to the component's factory/constructor function. Because JavaScript is a dynamically |
| 23 | +typed language, Angular's dependency injection subsystem cannot use static types to identify service |
| 24 | +dependencies. For this reason a component must, explicitly, define its dependencies by using one of the |
| 25 | +{@link di injection annotation} methods. For example, by providing a `$inject` property: |
26 | 26 |
|
27 |
| - myController.$inject = ['$location']; |
| 27 | + var MyController = function($location) { ... }; |
| 28 | + MyController.$inject = ['$location']; |
| 29 | + myModule.controller('MyController', MyController); |
28 | 30 |
|
29 |
| -The Angular web framework provides a set of services for common operations. Like other core Angular |
30 |
| -variables and identifiers, the built-in services always start with `$` (such as `$http` mentioned |
31 |
| -above). You can also create your own custom services. |
| 31 | +Or by providing an "inline" injection annotation: |
| 32 | + |
| 33 | + var myService = function($http) { ... }; |
| 34 | + myModule.factory('myService', ['$http', myService]); |
| 35 | + |
| 36 | +## Defining a Service |
| 37 | + |
| 38 | +Application developers are free to define their own services by registering a their name, and **service |
| 39 | +factory function**, in Angular modules. |
| 40 | + |
| 41 | +The purpose of the **service factory function** is to generate the single object, or function, that |
| 42 | +represents the service to the rest of the application. That object, or function, will then be |
| 43 | +injected into any component (controller, service, filter or directive) that specifies a dependency |
| 44 | +on the service. |
| 45 | + |
| 46 | +Angular factory functions are executed lazily. That is, they are only executed when needed |
| 47 | +to satisfy a dependency, and are then executed exactly once for each service. Everything that is |
| 48 | +dependent on this service gets a reference to the single instance generated by the service factory. |
32 | 49 |
|
33 | 50 | ## Related Topics
|
34 | 51 |
|
|
0 commit comments