Angularjs 自定义服务的三种方式(推荐)

所属分类: 网络编程 / JavaScript 阅读数: 166
收藏 0 赞 0 分享

AngularJS简介:

AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。

AngularJS 学习起来非常简单。

angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式:

// 定义module , module中注入$provide
var starterApp = angular.module('starter.controllers', [],function($provide){
// 第一种方式:使用provide的provider自定义服务
$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自定义服务(返回对象,字符串,服务,且必须通过$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自定义服务(返回对象,服务,字符串)
$provide.factory('serviceName1', ['$http', function($http){
// var service = {};
// service.getName = function (){
// return '张三';
// }
// return service;
// 
return "啊飒飒大";
}]);
// 使用provide的service自定义服务(返回对象,服务)
$provide.service('serviceName2', ['$http', function($http){
// return {
// 'name':'aa'
// };
//可直接通过this定义方法
this.getName = function (){
return '张三';
}
}])
}]);
//第三种方式(module 的 provider、service、factory 方法 推荐第三种)
starterApp.provider('serviceName3',function(){
this.$get = function (){
return '直接通过module的provider方法定义服务';
}
});
starterApp.factory('serviceName4',function(){
return '直接通过module的factory方法定义服务';
});
starterApp.service('serviceName5',function(){
return {
'message':'直接通过module的service方法定义服务'
}
});

以上所述是小编给大家介绍的Angularjs 自定义服务的三种方式小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多