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，如需轉載請自行聯系原作者