Angularjs 自定義服務(wù)的三種方式(推薦)
AngularJS簡(jiǎn)介:

AngularJS 通過(guò)新的屬性和表達(dá)式擴(kuò)展了 HTML。
AngularJS 可以構(gòu)建一個(gè)單一頁(yè)面應(yīng)用程序(SPAs:Single Page Applications)。
AngularJS 學(xué)習(xí)起來(lái)非常簡(jiǎn)單。
angularjs 中可通過(guò)三種($provider,$factory,$service)方式自定義服務(wù),以下是不同的實(shí)現(xiàn)形式:
// 定義module , module中注入$provide
var starterApp = angular.module('starter.controllers', [],function($provide){
// 第一種方式:使用provide的provider自定義服務(wù)
$provide.provider('getUserInfoService', function(){
this.$get = function(){
var userInfo = [{
'userName':'張三0',
'userNick':'小花0',
'age':25
},{
'userName':'張三1',
'userNick':'小花1',
'age':26
}];
return userInfo;
}
});
$provide.factory('',function(){});
$provide.service('',function(){});
});
//第二種方式 (module 的 config 方法中注入 $provide)
starterApp.config(['$provide',function($provide) {
// 使用provide的provider自定義服務(wù)(返回對(duì)象,字符串,服務(wù),且必須通過(guò)$get方法返回)
$provide.provider('getUserAddressService', function(){
var _userAddress = '';
var service = {};
this.$get = function(){
service.setAddress = function (userAddress){
_userAddress = userAddress;
}
service.getAddress = function (){
return _userAddress;
}
return service;
}
});
// 使用provide的factory自定義服務(wù)(返回對(duì)象,服務(wù),字符串)
$provide.factory('serviceName1', ['$http', function($http){
// var service = {};
// service.getName = function (){
// return '張三';
// }
// return service;
//
return "啊颯颯大";
}]);
// 使用provide的service自定義服務(wù)(返回對(duì)象,服務(wù))
$provide.service('serviceName2', ['$http', function($http){
// return {
// 'name':'aa'
// };
//可直接通過(guò)this定義方法
this.getName = function (){
return '張三';
}
}])
}]);
//第三種方式(module 的 provider、service、factory 方法 推薦第三種)
starterApp.provider('serviceName3',function(){
this.$get = function (){
return '直接通過(guò)module的provider方法定義服務(wù)';
}
});
starterApp.factory('serviceName4',function(){
return '直接通過(guò)module的factory方法定義服務(wù)';
});
starterApp.service('serviceName5',function(){
return {
'message':'直接通過(guò)module的service方法定義服務(wù)'
}
});
以上所述是小編給大家介紹的Angularjs 自定義服務(wù)的三種方式小結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
利用angular自動(dòng)編譯andriod APK的繞坑經(jīng)歷分享
這篇文章主要給大家介紹了關(guān)于如何利用angular自動(dòng)編譯andriod APK的繞坑經(jīng)歷,文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-01-01
AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)問(wèn)題及解決方案
這篇文章主要介紹了AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)的問(wèn)題及解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
詳解Angular結(jié)合zTree異步加載節(jié)點(diǎn)數(shù)據(jù)
本篇文章主要給大家分享了Angular結(jié)合zTree異步加載節(jié)點(diǎn)數(shù)據(jù)的難點(diǎn)以及方法,有這方面需求的朋友參考下吧。2018-01-01
Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法,文章開(kāi)始先進(jìn)行了簡(jiǎn)單的介紹,而后通過(guò)完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-12-12
angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法
這篇文章主要介紹了angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
利用Angular2 + Ionic3開(kāi)發(fā)IOS應(yīng)用實(shí)例教程
這篇文章主要給大家介紹了關(guān)于利用Angular2 + Ionic3開(kāi)發(fā)IOS應(yīng)用的相關(guān)資料,文中通過(guò)示例代碼和圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
詳解如何構(gòu)建Angular項(xiàng)目目錄結(jié)構(gòu)
本篇文章主要介紹了詳解如何構(gòu)建Angular項(xiàng)目目錄結(jié)構(gòu),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07

