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)文章
AngularJS模塊學(xué)習(xí)之Anchor Scroll
這篇文章主要介紹了AngularJS模塊學(xué)習(xí)之Anchor Scroll 的相關(guān)資料,需要的朋友可以參考下2016-01-01AngularJS基礎(chǔ) ng-list 指令詳解及示例代碼
本文主要介紹AngularJS ng-list 指令,這里幫大家整理了ng-list指令的基本資料,并附有示例代碼,有需要的小伙伴可以參考下2016-08-08Angular2從搭建環(huán)境到開(kāi)發(fā)步驟詳解
本文的內(nèi)容主要是想幫助那些想學(xué)習(xí)Angular2的朋友們,因?yàn)槲易约涸谕鍭ngular2時(shí)碰到了不少坑,而且Angular2語(yǔ)法一直處于變化中,讓人很頭疼。不過(guò)也怪不了Anguar2,因?yàn)樗F(xiàn)在是處于并長(zhǎng)期處于alpha階段,下面就通過(guò)本文來(lái)學(xué)習(xí)Angular2的搭建環(huán)境和開(kāi)發(fā)吧。2016-10-10詳解AngularJS如何實(shí)現(xiàn)跨域請(qǐng)求
跨域請(qǐng)求一直是網(wǎng)頁(yè)編程中的一個(gè)難題,在過(guò)去,絕大多數(shù)人都傾向于使用JSONP來(lái)解決這一問(wèn)題。不過(guò)現(xiàn)在,我們可以考慮一下W3C中一項(xiàng)新的特性——CORS(Cross-Origin Resource Sharing)了。2016-08-08AngularJs Understanding the Model Component
本文主要介紹AngularJs Understanding the Model Component的內(nèi)容,這里整理了相關(guān)資料,并詳細(xì)講解了這部分知識(shí),有興趣的小伙伴可以參考下2016-09-09使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解
這篇文章主要介紹了使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03通過(guò)AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示示例
本篇文章主要介紹了通過(guò)AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01使用AngularJS創(chuàng)建單頁(yè)應(yīng)用的編程指引
這篇文章主要介紹了使用AngularJS創(chuàng)建單頁(yè)應(yīng)用的編程指引,AngularJS是一款高人氣的JavaScript庫(kù),需要的朋友可以參考下2015-06-06