如果不知道什麼是 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 吧
沒有留言:
張貼留言