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

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 自定义服务的三种方式小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • angularjs自定义ng-model标签的属性

    angularjs自定义ng-model标签的属性

    有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编译的div元素 html: <style> .text{ margin:0 auto; width:100px; height:50px; border:1px solid red; } </style> </head> <body> <div ng-co

  • angularjs封装$http为factory的方法

    angularjs有本身封装的ajax服务$http,因为用惯了jQuery的ajax,所以,自己封装了一下angularjs的$http,代码如下 app.factory('dataFactory', function ($http, $q){ var factory = {}; factory.getlist = function(endpoint, method, headers, params) { var defer = $q.defer(); if (method == 'GET')

  • 简介AngularJS中使用factory和service的方法

    简介AngularJS中使用factory和service的方法

    AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们即维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服务使用AngularJS的依赖注入机制注入正常. AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJAX调用,以获得服务器的数据. $route用来定义路由信息等.内置

  • AngularJS之自定义服务详解(factory、service、provider)

    前言 1.3种创建自定义服务的方式. Factory Service Provider 2.大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分层的作用,如果你是前端人员不了解什么是分层,那么你最好问问你后台的小伙伴. dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互数据的一层,在angularJS里就主要是写ajax的. service层:主查写逻辑代码的,但在angularJS里也可以持久化数据(充当数据容

  • AngularJs自定义服务之实现签名和加密

    AngularJs自定义服务之实现签名和加密

    写在前面: AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zhihu.com/question/25539382) 对base64.md5.sha1加密算法

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • angularJS Provider、factory、service详解及实例代码

    factory 用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来.你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了. app.controller('myFactoryCtrl', function($scope, myFactory){ $scope.artist = myFactory.getArtis(); }); app.factory('myFactory', functio

  • 详解AngularJS controller调用factory

    1.定义 factory.js 文件 var appFactorys = angular.module('starter.factorys', []) appFactorys.factory('HouseFactory', function () { var houseList = [ { id: 0, title: '急售北二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/ben.png' }, { id: 1,

  • AngularJS自定义服务与fliter的混合使用

    angular中,Filter是用来格式化数据用的,比如项目中,有很多时候从后台拿来的数据直接显示用书是不明白其含义的,这时候我们需要自己格式化一下后再显示在界面上,传统的j我们需要些一长串代码,各种影射,而angular给我们提供的filter,确实要简介很多. 下面给大家介绍下angularJS自定义服务与fliter的混合使用,一起看看吧.  1. 创建自定义服务"$swl" var app = angular.module('myApp', []); app.service(&

  • AngularJS基于factory创建自定义服务的方法详解

    本文实例讲述了AngularJS基于factory创建自定义服务的方法.分享给大家供大家参考,具体如下: 为什么要创建自定义服务? 很简单,不想让控制器显得过于"臃肿",而且服务可复用.针对性强,每个服务对应不同的功能. 这里介绍如何使用factory创建自定义服务,并且使用他. 例子1: <!--HTML--> <div ng-controller="showTheName"> <h1 ng-bind="name"

  • 详解AngularJS中自定义过滤器

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

随机推荐