2014年7月21日 星期一

AngularJS 教學 - service method

上一篇 AngularJS 教學 - factory method 講到了 AngularJS 建立 Service 的其中一個方法

如果不知道什麼是 Service 的,可以看 AngularJS 教學 - Service

接下來要介紹的是另外一種建立 Service 的方法,就是 service 了啦!

service方法是 AngularJS Module 所提供的一個建立 Service 的方法 (Module.service)

使用方式跟 factory 方法很像,同樣是傳入兩個參數

分別是 Service 的名稱以及一個建構子(Constructor)

這也是和 factory 方法的差別所在

factory 方法是要提供一個能夠回傳一個 Service Object 的工廠方法

而 service 方法則是要提供一個建構子函式,目的在於 AngularJS 底層會利用 new 這個關鍵子

來建立出你的 Service Object

簡單說就是



factory 方法,你必須提供一個工廠方法,並自己建立一個 Service Object
service 方法,你必須提供一個建構子,由 AngularJS 幫你建立 Service Object

以下是一個簡單的範例

var demoApp = angular.module("demoApp", []);
demoApp.service("echoService", function(){
    this.echoCount = 0;
    this.echo = function(name){
        return console.log((this.echoCount++) + ", Your name is " + name);
    };

});

紅色部分,提供了一個建構子函式,不需要像 factory 方法建立定回傳一個物件

如果覺得上面的做法有點難以理解或是難以閱讀,你也可以改成下面的方式

var echoService = function(){
    this.echoCount = 0;
        this.echo = function(name){
        return console.log((this.echoCount++) + ", Your name is " + name);
    };
};

demoApp.service("echoService", echoService);

說穿了,AngularJS 會利用你所提供的建構子執行 new 來建立物件

就像這樣 new echoService();

最後要說明的是,Javascript 的繼承方式是 prototype-based 的

並不像我們所熟知的 Java 或是 C#,是屬於 class-based 的

因此這也是讓大部分的 Javascript 開發者不太常使用 new 關鍵字的原因之一

而在 service 方法中,我們需要給一個建構子函式

這些建構子函式並不一定要是 prototype-based 的,

我就拿 AngularJS 教學 - factory method 所提到的範例來說好了

你完完全全可以把 factory method 的範例直接換成用 service method

demoApp.factory("echoService", function(){
    console.log("Factory Function be executed...");
    var echoCount = 0;
    return {
        echo: function(name){
            return console.log((echoCount++) + ", Your name is " + name);
        }
    };
});

demoApp.service("echoService"function(){
    console.log("Factory Function be executed...");
    var echoCount = 0;
    return {
        echo: function(name){
            return console.log((echoCount++) + ", Your name is " + name);
        }
    };
});

這樣的改動是不會發生任何錯誤的,也就是說在這種情況下

你其實可以把 service 方法看做是一個 factory 方法

當然還是建議要遵循 service 方法與 factory 方法的區別

盡量提供給 service 方法一個建構子函式

下一篇再來介紹 Module.provider 吧

沒有留言:

張貼留言