AngularJS中的provider,factory,service方法

使用$provide中的provider方法定义服务

       前面已经知道了module的定义为angular.module(name,[requires],configFn);configFn参数是配置服务的。ng供服务的过程涉及它的依赖注入机制。AngularJS是用$provider对象来实现自动依赖注入机制的。$provide.provider是一种定义服务的方法。注入机制通过调用provider的$get方法，把得到的对象作为参数进行相关的调用。

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code> <code>ng-app</code><code>=</code><code>"app"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code> <code>ng-app</code><code>=</code><code>"app"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>ng-controller</code><code>=</code><code>"Controller1"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"http://cdn.bootcss.com/angular.js/1.4.1/angular.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>    </code><code>angular.module('app', [], function($provide) {</code>

<code>        </code><code>//自定义服务</code>

<code>        </code><code>$provide.provider('helloService', function() {</code>

<code>            </code><code>this.$get = function() {</code>

<code>                </code><code>return {</code>

<code>                    </code><code>message: 'how are you ?'</code>

<code>                </code><code>}</code>

<code>            </code><code>}</code>

<code>        </code><code>});</code>

<code>    </code><code>})</code>

<code>    </code><code>.controller('Controller1', function($scope, helloService) {</code>

<code>        </code><code>console.log(helloService);</code>

<code>    </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

        定义了名字叫helloService的服务，通过$get方法，让helloService就等于$get返回的对象。在控制器Controller1中，用到了helloService这个服务，就将它写在参数列表里。这里可以看出$scope也是一个服务。在控制台打印出helloService，结果如下：

<a href="http://s3.51cto.com/wyfs02/M01/6E/FB/wKioL1WOW9GhqHePAABn47kDtaY009.jpg" target="_blank"></a>

        上面这种方法一般不会用，因为有更加简便的方法，比如$provide里的factory和service方法。

$provide中的factory和service方法

       factory方法和service方法可以看作是provider方法的简写，它们省去了写$get方法，具体用法如下：

factory方法

<code>        </code><code>$provide.factory('myFactory', function() {</code>

<code>            </code><code>return 'i am factory'</code>

<code>    </code><code>.controller('Controller1', function($scope, myFactory) {</code>

<code>        </code><code>console.log(myFactory);</code>

        对factory方法来说，返回可以是任意类型，所以这里返回字符串是没有问题的。

<a href="http://s3.51cto.com/wyfs02/M01/6E/FF/wKiom1WOX2KB2WEFAABkaqd0IyE432.jpg" target="_blank"></a>

service方法

<code>        </code><code>$provide.service('mySerivce', function() {</code>

<code>            </code><code>return {</code>

<code>                </code><code>message: 'i am service'</code>

<code>    </code><code>.controller('Controller1', function($scope, mySerivce) {</code>

<code>        </code><code>console.log(mySerivce);</code>

       service方法返回的只能是引用类型（数组、对象等），如果是其它类型的话会得不到内容。这一点是factory和service的区别。

<a href="http://s3.51cto.com/wyfs02/M02/6E/FF/wKiom1WOYHvB3CoFAAB0rD6bZ3Q336.jpg" target="_blank"></a>

        此外，factory和service方法在module里还有快捷方法，用法为：

<code>    </code><code>var module1 = angular.module('module name', ...);</code>

<code>    </code><code>module1.factory();</code>

<code>    </code><code>module1.service();</code>

本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1666358，如需转载请自行联系原作者