angularJs自定義服務

2021-09-22 21:10:39 字數 2609 閱讀 5982

在angularjs中,系統內建的服務都是以$開頭,所以我們的自定義服務盡量避免以$開頭。自定義服務的方式有如下幾種:

使用provider方法  

this.$get = function () ;

});通過provider方法建立的服務一定要包含$get方法,provider注入的結果就是$get方法返回的結果,如果不包含$get方法,則程式會報錯。

在三種建立服務的方法中,只有使用provider方法建立的服務才可以傳進config函式,以用於在物件啟用之前,對模組進行配置。但是在config中進行配置的只能是在$get函式之外定義的變數,在下面定義的provider中只有artistthingfromconfig兩個變數可以被訪問到,而getartistgetthingfromconfig兩個方法是不能被在config函式中訪問到的。

而且在注入config函式中時,引數名必須由服務名+provider組成,例如下面的例子注入到config函式中的就是myproviderprovider

console.log(myprovider.getthingfromconfig()); //kingx name

}]);

this.artist = '';

this.thingfromconfig = '';

this.$get = function () ,

getthingfromconfig: function () }};

});myproviderprovider.thingfromconfig = 'kingx name';

});使用provider方法

//不一定是要物件型別,實際為任意型別

var factory = {};

return factory;

});通過factory方法建立的服務必須有返回值,即必須有return函式,它可以返回任意型別的值,包括基本資料型別或者物件型別。如果沒有return函式,則會報錯。

factory注入的結果就是return返回的結果,可以在被注入的物件中使用注入的結果定義的各種方法.

2 console.log(myfactory.getname()); //foo

3 //請求當前資料夾下的test.html

4 myfactory.getdata('./test.html').then(function (response) );

7 }]);

8 9 /**------------ 使用factory方法 -----------------*/

11 var factory = {};

12 var _name = 'foo';

13 //模仿ajax請求

14 factory.getdata = function (url) );

19 };

20 21 factory.getname = function () ;

24 25 return factory; //這裡返回的是factory 包含2個方法

26 });

使用service方法

通過service方法建立的服務,可以不用返回任何值,因為service方法本身返回乙個構造器,系統會用new關鍵字來建立乙個物件,所以我們可以在service內部使用this關鍵字,對service進行擴充套件。

2 console.log(myservice);

3 myservice.setname('foo');

4 console.log(myservice.getname());

5 }]);

6 7 /**------------ 使用service方法 -----------------*/

9 this._name = '';

10 11 this.getname = function () ;

14 15 this.setname = function (name) ;

18 19 });

如果使用具有返回值的寫法,返回的值必須是乙個物件,如果只返回基本型別,則實際返回的還是相當於this

2 var obj = {};

3 this._name = '';

4 5 obj.getname = function () ;

8 9 obj.setname = function (name) ;

12 return obj;

13 });

AngularJS2 自定義服務

1.在乙個專案中不可避免的要在不同的component中使用同乙份資料,普通的方式是將同樣的 在不同的地方複製貼上,這樣顯然是不可取的。這時候我們可以定義乙個資料服務,當我們需要它的時候只需要在相關元件中注入即可 2.服務對其呼叫者是透明的,使用服務可以讓元件更加清潔,而且後期維護只需要修改服務就可...

angularjs1 6,自定義服務

無標題文件 title script src angular.min.js script head 當你初試angular 時,很自然地就會往controller 和scope 裡堆滿不必要的邏輯。一定要早點意識到,controller 這一層應該很薄 也就是說,應用裡大部分的業務邏輯和持久化資料都...

angularjs自定義標籤

具有功能 1 支援按多列進行模糊查詢。2 資料模板可以指定輸出元素。查詢輸入框 標籤封裝 form表單中input型別為text的標籤 並且需要彈窗查詢資料 封裝 專案封裝標籤 input table 屬性 table resultjson jsonresulta 後端返回的資料物件 json陣列 ...