Services (服务)

*/

.hljs {
display: block; padding: 0.5em;
background: #F0F0F0;
}

.hljs,
.hljs-subst,
.hljs-tag .hljs-title,
.lisp .hljs-title,
.clojure .hljs-built_in,
.nginx .hljs-title {
color: black;
}

.hljs-string,
.hljs-title,
.hljs-constant,
.hljs-parent,
.hljs-tag .hljs-value,
.hljs-rules .hljs-value,
.hljs-rules .hljs-value .hljs-number,
.hljs-preprocessor,
.hljs-pragma,
.haml .hljs-symbol,
.ruby .hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.hljs-aggregate,
.hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.hljs-addition,
.hljs-flow,
.hljs-stream,
.bash .hljs-variable,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.tex .hljs-special,
.erlang_repl .hljs-function_or_atom,
.asciidoc .hljs-header,
.markdown .hljs-header,
.coffeescript .hljs-attribute {
color: #800;
}

.smartquote,
.hljs-comment,
.hljs-annotation,
.hljs-template_comment,
.diff .hljs-header,
.hljs-chunk,
.asciidoc .hljs-blockquote,
.markdown .hljs-blockquote {
color: #888;
}

.hljs-number,
.hljs-date,
.hljs-regexp,
.hljs-literal,
.hljs-hexcolor,
.smalltalk .hljs-symbol,
.smalltalk .hljs-char,
.go .hljs-constant,
.hljs-change,
.lasso .hljs-variable,
.makefile .hljs-variable,
.asciidoc .hljs-bullet,
.markdown .hljs-bullet,
.asciidoc .hljs-link_url,
.markdown .hljs-link_url {
color: #080;
}

.hljs-label,
.hljs-javadoc,
.ruby .hljs-string,
.hljs-decorator,
.hljs-filter .hljs-argument,
.hljs-localvars,
.hljs-array,
.hljs-attr_selector,
.hljs-important,
.hljs-pseudo,
.hljs-pi,
.haml .hljs-bullet,
.hljs-doctype,
.hljs-deletion,
.hljs-envvar,
.hljs-shebang,
.apache .hljs-sqbracket,
.nginx .hljs-built_in,
.tex .hljs-formula,
.erlang_repl .hljs-reserved,
.hljs-prompt,
.asciidoc .hljs-link_label,
.markdown .hljs-link_label,
.vhdl .hljs-attribute,
.clojure .hljs-attribute,
.asciidoc .hljs-attribute,
.lasso .hljs-attribute,
.coffeescript .hljs-property,
.hljs-phony {
color: #88F
}

.hljs-keyword,
.hljs-id,
.hljs-title,
.hljs-built_in,
.hljs-aggregate,
.css .hljs-tag,
.hljs-javadoctag,
.hljs-phpdoc,
.hljs-yardoctag,
.smalltalk .hljs-class,
.hljs-winutils,
.bash .hljs-variable,
.apache .hljs-tag,
.go .hljs-typename,
.tex .hljs-command,
.asciidoc .hljs-strong,
.markdown .hljs-strong,
.hljs-request,
.hljs-status {
font-weight: bold;
}

.asciidoc .hljs-emphasis,
.markdown .hljs-emphasis {
font-style: italic;
}

.nginx .hljs-built_in {
font-weight: normal;
}

.coffeescript .javascript,
.javascript .xml,
.lasso .markup,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
}

pre, code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
pre ol.linenums {
margin-left: 0;
}

.pln {
color: #48484C; }

.str {
color: #DD1144; }

.kwd {
color: #1E347B; }

.com {
color: #93A1A1; }

.typ {
color: teal; }

.lit {
color: #195F91; }

.pun {
color: #93A1A1; }

.opn {
color: #93A1A1; }

.clo {
color: #93A1A1; }

.tag {
color: #008; }

.atn {
color: teal; }

.atv {
color: #DD1144; }

.dec {
color: teal; }

.var {
color: teal; }

.fun {
color: #DC322F; }

/* Put a border around prettyprinted code snippets. */
pre.prettyprint {
background-color: #F7F7F9;
padding: 10px;
border: 1px solid #E1E1E8; }

pre.prettyprint.linenums {
box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset; }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
color: #1E347B;
margin: 0 0 0 40px; }

ol.linenums li {
color: #BEBEC5;
line-height: 18px;
padding-left: 12px; }

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
list-style-type: normal; }
.wiz-todo,
.wiz-todo-img {
width: 16px;
height: 16px;
cursor: default;
padding: 0 10px 0 2px;
vertical-align: -10%;
-webkit-user-select: none;
}

.wiz-todo-label {
display: inline-block;
padding-top: 7px;
padding-bottom: 6px;
line-height: 1.5;
}

.wiz-todo-label-checked {
/*text-decoration: line-through;*/
color: #666;
}

.wiz-todo-label-unchecked {
text-decoration: initial;
}

.wiz-todo-completed-info {
padding-left: 44px;
display: inline-block;
}

.wiz-todo-avatar {
width: 20px;
height: 20px;
vertical-align: -20%;
margin-right: 10px;
border-radius: 2px;
}

.wiz-todo-account,
.wiz-todo-dt {
color: #666;
}
-->

Services（服务）

Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

Angular services are:

• Lazily instantiated - Angular only instantiates a service when an application component depends on it.

• Singletons - Each component dependent on a service gets a reference to the single instance generated by the service factory.

Angular offers several useful services (like $http), but for most applications you'll also want to create your own.

Angular服务是使用依赖注入串起来的可替换的对象。你可以用服务来为你的应用组织和共享代码。

Angular的服务有这些特性：

• 懒初始化：Angular只有在应用中某个组件依赖它的时候才初始化

• 单例：每个依赖某服务的组件只获取该服务的一个引用，这些引用都指向服务工厂创建的那个实例（单例）

Note: Like other core Angular identifiers, built-in services always start with $ (e.g. $http).

---

Using a Service（使用服务）

To use an Angular service, you add it as a dependency for the component (controller, service, filter or directive) that depends on the service. Angular's dependency injection takes care of the rest.

咋使用服务呢？给你的组件添加一个对它的依赖就可以了。剩下的工作交给Angular的依赖注入机制即可。

index.html:

 <div id = "simple" ng-controller = "MyController" >
     <p> Let's try this simple notify service, injected into the controller... </p>
     <input ng-init = "message='test'" ng-model = "message" >
     <button ng-click = "callNotify(message);" > NOTIFY </button>
     <p> (you have to click 3 times to see an alert) </p>
 </div>

script.js:

 angular .
 module ( 'myServiceModule' , []).
 controller ( 'MyController' , [ '$scope' , 'notify' , function ( $scope , notify ) {
    $scope . callNotify = function ( msg ) {
        notify ( msg );
     };
 }]).
 factory ( 'notify' , [ '$window' , function ( win ) {
     var msgs = [];
     return function ( msg ) {
        msgs . push ( msg );
         if ( msgs . length == 3 ) {
            win . alert ( msgs . join ( "\n" ));
            msgs = [];
         }
     };
 }]);

Creating Services（创建服务）

Application developers are free to define their own services by registering the service's name and service factory function, with an Angular module.

The service factory function generates the single object or function that represents the service to the rest of the application. The object or function returned by the service is injected into any component (controller, service, filter or directive)
that specifies a dependency on the service.

开发者可以通过把服务的名字和工厂方法注册进一个Angular模块中，来定义自己的服务。

服务工厂方法是用来创建这个服务的单例对象或方法的。这个创建出来的服务（无论是个对象还是方法）就会被注入到依赖它的组件中去。

Registering Services（注册服务）

Services are registered to modules via the Module API. Typically you use the Module factory API to register a service:

 var myModule = angular . module ( 'myModule' , []);
 myModule . factory ( 'serviceId' , function () {
     var shinyNewServiceInstance ;
     // factory function body that constructs shinyNewServiceInstance
     return shinyNewServiceInstance ;
 });

Note that you are not registering a service instance, but rather a factory function that will create this instance when called.

可以通过Module API来注册服务。一般情况下，使用Module的factory API来注册。

注意啊，你注册的不是服务的实例，而是一个能创建服务实例的工厂函数。

Dependencies（依赖项）

Services can have their own dependencies. Just like declaring dependencies in a controller, you declare dependencies by specifying them in the service's factory function signature. The example module below has two services, each with various dependencies:

服务也可以有自己的依赖项。类似于控制器中声明依赖关系，我们在注册服务的时候，也可以使用类似的写法来为服务声明依赖项。

 var batchModule = angular . module ( 'batchModule' , []);
 /**
 * The '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.
 */
 batchModule . factory ( 'batchLog' , [ '$internal' , '$log' , function ( $internal , $log ) {
     var messageQueue = [];
     function log () {
         if ( messageQueue . length ) {
            $log . log ( 'batchLog message: ' , messageQueue );
            messageQueue = [];
         }
     }
     // start periodic checking
    $internal ( log , 50000 );
     return function ( message ) {
        messageQueue . push ( message );
     }
 }]);
 /**
 * 'routeTemplateMonitor' monitors each '$route' change and logs the current
 * template via the 'batchLog' service.
 */
 batchModule . factory ( 'routeTemplateMonitor' , [ '$route' , 'batchLog' , '$rootScope' ,
     function ( $route , batchLog , $rootScope ) {
        $rootScope . $on ( '$routeChangeSuccess' , function () {
            batchLog ( $route . current ? $route . current . template : null );
         });
     }]);

In the example, note that:

• The batchLog service depends on the built-in $internal and $log services.

• The routeTemplateMonitor service depends on the built-in $route service and our custom batchLog service.

• Both services use the array notation to declare their dependencies.

• The order of identifiers in the array is the same as the order of argument names in the factory function.

上面的例子里，注意下：

• batchLog服务依赖于内置服务$internal和$log

• routeTemplateMonitor服务依赖于内置的$route服务，也依赖于我们的batchLog服务

• 这俩自定义服务都是使用array记法声明的依赖关系

• 依赖注入的顺序和工厂函数的参数顺序一定要对上

Registering a Service with $provide（用$provide来注册服务）

You can also register services via the $provide service inside of a module's config function:

angular . module ( 'myModule' , []). config ([ '$provide' , function ( $provide ) {
   $provide . factory ( 'serviceId' , function () {
        var shinyNewServiceInstance ;
        // factory function body that constructs shinyNewServiceInstance
        return shinyNewServiceInstance ;
    });
}]);

This technique is often used in unit tests to mock out a service's dependencies.

当然，你也可以在模块的config方法里，使用$provide来注册服务。

不过这种技术通常用于单元测试中，模拟服务依赖项的时候用。