angularJS中如何写服务
服务的用途
- 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性
- 服务提供了把特定功能相关联的方法集中在一起的接口
如何创建服务
- angularJS提供了一些内置服务,同时为复杂应用创建我们自己的服务也是很有必要的
- anguarjs中创建自己的服务是非常容易的,只需要注册这个服务即可。服务被注册后,angularJS编译器就可以引用他,并且在运行时把它当作依赖加载进来
示例:
- angular.module('freefedService',[]).factory('ajaxService',['$http','$q',function($http,$q){
- var deferred = $q.defer();
- return {
- ajaxFunc : function(params){
- var params = params || {};
- $http({
- method : params.method || 'post',
- url : params.url || '',
- data : params. data || {},
- responseType : params.type || 'json'
- }).success(function(data){
- deferred.resolve(data);
- }).error(function(reason){
- deferred.reject(reason);
- });
- return deferred.promise()
- }
- };
- }]);
如何使用服务
- 可以在控制器、指令或另外一个服务中通过依赖声明的方式来使用服务
- demo.html
- <!doctype html>
- <html ng-app="freefedApp">
- <head>
- <title>angular应用demo</title>
- <script src="angular.js"></script>
- <script src="service.js"></script>
- <script src="app.js"></script>
- </head>
- <body>
- <div ng-controller="userCtrl">
- <div class="user-center">
- <span class="user-icon"><img src="{{vm.user.pic}}" /></span>
- <span class="user-name">{{vm.user.name}}</span>
- </div>
- </div>
- </body>
- </html>
- service.js
- angular.module('freefedService',[]).factory('ajaxService',['$http','$q',function($http,$q){
- var deferred = $q.defer();
- return {
- ajaxFunc : function(params){
- var params = params || {};
- $http({
- method : params.method || 'post',
- url : params.url || '',
- data : params. data || {},
- responseType : params.type || 'json'
- }).success(function(data){
- deferred.resolve(data);
- }).error(function(reason){
- deferred.reject(reason);
- });
- return deferred.promise()
- }
- };
- }]);
- app.js
- /*声明module*/
- var module = angular.module('freefedApp',['freefedService']);
- /*声明控制器*/
- module.controller('userCtrl',['$scope','ajaxService',function($scope,ajaxService){
- var vm = $scope.vm = $scope.vm || {};
- vm.user = {};
- //调用ajaxService服务
- ajaxService.ajaxFunc( {
- url : '/getUser.php'
- } ).then(function(data){
- vm.user.pic= data.pic;
- vm.user.name = data.name;
- },function(error){
- alert( error.msg );
- }
- );
- }])
多种创建服务方式
service
使用service可以注册一个支持构造函数的服务,它允许我们为服务对象注册一个构造函数,service函数接收两个参数:
name(字符串)需要注册的服务名
constructor(函数) 构造函数,调用它来实例化服务对象, 注入到应用中,会生成一个构造函数的实例对象被引用
- angular.module('freefedService',[]).service('myService',function(){
- this.getUser = function(){};
- });
factory
factory是创建和配置服务的最快捷的方式,相对于service函数,factory更加适用于当你在设计一个需要私有方法或属性的类的时候使用,factory函数接收两个参数:
name(字符串) 需要注册的服务名
getFn(函数) 这个函数会在angularJS创建服务时调用
- //有私有方法、属性的类示例:
- angular.module('freefedService',[]).factory('myService',function(){
- var _version = '1.1.0'; //私有属性
- var _method = function(){ }; //私有方法
- return new function(){
- this.getVersion= function(){
- return _version;
- };
- this.method = function(){
- _method(); //调用私有方法
- };
- };
- });
- //普通示例:
- angular.module('freefedService',[]).factory('myService',function(){
- return {
- getUser : function(){}
- };
- });
- //有私有方法、属性的类示例:
provider
所有服务工厂都是由provider服务创建的,provide服务负责在运行时初始化这些提供者,provider函数接收两个参数:
name(字符串) 需要注册的服务名
aProvider(对象、函数)
- aProvider是函数,那么它会通过依赖注入被调用, 并且通过$get方法返回一个对象
- angular.module('freefedService',[]).provider('myService',function(){
- this.setUrl = function(){};
- this.$get = function( $http ){ //依赖注入在此加入
- return {
- getUser : function(){}
- };
- };
- });
- aProvider是对象,要带有$get方法
- angular.module('freefedService',[]).provider('myService',{
- setUrl : function(){};
- $get: function( $http ){ //依赖注入在此加入
- return {
- getUser : function(){}
- };
- };
- });
什么场景使用provider方式创建服务
如果希望在config函数中可以对服务进行配置,必须用provider()来定义服务,示例
- demo.html
- <!doctype html>
- <html ng-app="freefedApp">
- <head>
- <title>angular应用demo</title>
- <script src="angular.js"></script>
- <script src="service.js"></script>
- <script src="app.js"></script>
- </head>
- <body>
- <div ng-controller="userCtrl">
- <div class="user-center">
- <span class="user-icon"><img src="{{vm.user.pic}}" /></span>
- <span class="user-name">{{vm.user.name}}</span>
- </div>
- </div>
- </body>
- </html>
- service.js
- angular.module('freefedService',[]).provider('userService',function(){
- var baseUrl = 'http://dev.freefed.com'
- this.setUrl = function( base ){ baseUrl = base || baseUrl; };
- this.$get = function( $http ){ //依赖注入在此加入
- return {
- getUser : function(){
- $http({
- url : baseUrl + '/getUser.php'
- });
- }
- };
- };
- });
- app.js
- /*声明module*/
- var module = angular.module('freefedApp',['freefedService']).
- config('userServiceProvider',['userServiceProvider',function(userServiceProvider){
- //当我们希望在应用开始前对service进行配置的时候就需要使用到provider()
- userServiceProvider.baseUrl = 'http:://product.freefed.com';
- }]);
- /*声明控制器*/
- module.controller('userCtrl',['$scope','userService',function($scope,userService){
- var vm = $scope.vm = $scope.vm || {};
- vm.user = {};
- //调用userService服务
- userService. getUser();
- }]);
constant
可以将一个已存在的常量值注册为服务,通过注入引用到应用中,constant()接收两个参数:
name(字符串) 需要注册的常量名
value(值或对象) 需要注册的常量的值
- angular.module('freefedApp',[]).constant('configService',{
- //把后台系统所有接口,以及硬编码的文本等都全部提取到这里来统一配置
- UPLOAD_ERROR_TIP : '文件上传失败',
- UPLOAD_SUCCESS_TIP : '文件上传成功',
- ......
- BASE_URL : 'http://prodoct.freefed.com/',
- api : {
- login : '/login.php'
- user : '/user.php'
- .......
- }
- });
- angular.module('freefedApp',[]).constant('configService',{
value
如果通过provider的$get返回的是一个常量,那就没必要定义一个包含复杂功能的完成服务,可以直接通过value函数方便的定义一个服务,value()接收两个参数:
name(字符串) 需要注册的常量名
value(值或对象) 将这个值作为可注入的实例返回
- angular.module('freefedApp',[]).value('my',{
- mytext : 'freefed welcome to you',
- change : function(){}
- });
value()与constant()的区别
通过constant()声明的常量可以直接注入到配置函数中,通过value()声明的则不行,如下:
- //constant()
- angular.module('freefedConfig',[]).constant('apikey','kly78hjqp1k3b');
- angular.module('freefedApp',['freefedConfig']).config( ['apikey',funciton( apikey ){
- var key = apikey; //可以正常访问到常量apikey的值
- }] );
- //value()
- angular.module('freefedConfig',[]).value('apikey','kly78hjqp1k3b');
- angular.module('freefedApp',['freefedConfig']).value( ['apikey',funciton( apikey ){
- //将会抛出错误, 未知的 provider : apikey ,因为在config函数内部无法访问这个值
- }] );
- //constant()
通常用value()来注册服务对象,用constant()来配置数据
- angular.module('freefedApp',[]).value('my',{
angularJS中如何写服务的更多相关文章
- 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别,你知道么?
在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...
- AngularJS中实现日志服务
本篇体验使用AngularJS自定义一个记录日志的服务. 在AngularJS中,服务的一些写法是这样的: var app = angular.module('app',[]); app.provid ...
- angularJS中如何写控制器
angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为 当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新 ...
- angularJS中如何写自定义指令
指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能 例如,ng-click可以让一个元素能够监听click事件,并在接收到事件的时候执行angularJS ...
- AngularJS中的http服务的简单用法
我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...
- 自定义AngularJS中的services服务
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- AngularJs中的服务
一.angularJs中的简单服务应用 下面的例子让我们明白在AngularJs中如何去调用文件中的数据,从而将文件中的数据显示在页面上;改变url的地址,也可以去调用后台接口. 实例: <!D ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- 怎么理解angularjs中的服务?
AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...
随机推荐
- 网络流(最大流) CQOI 2015 BZOJ 3931 网络吞吐量
3931: [CQOI2015]网络吞吐量 Description 路由是指通过计算机网络把信息从源地址传输到目的地址的活 动,也是计算机网络设计中的重点和难点.网络中实现路由转发的硬件设备称为路由器 ...
- DP(斜率优化):HDU 3507 Print Article
Print Article Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)To ...
- 从JavaScript的移位运算看数字在计算机内部的编码——补码
偶然看到一个JavaScript的题目: js中13>>2=? -13>>2=? 在浏览器中很容易测试出答案分别是 3 和 -4. 13>>2 = 3 很 ...
- 动态规划——K背包问题
Problem DescriptionNow you are asked to measure a dose of medicine with a balance and a number of we ...
- Vagrant虚拟机的配置管理
Vagrant虚拟机的配置管理 一.shell配置管理 二.使用Puppet进行配置管理 三.案例 Apache服务器的自动配置 3.1 shell配置管理 3.2 puppet配置管理 ps:由于最 ...
- [经典] 最X(长 | 大和 | 大积)Y(子序列 | 子字符串)
Note: 子序列,可以不连续:子字符串,必须连续. 以下题目按在我看看来的难度从易到难排列: 最大和子序列(Maximum sum subsequence) 这道题纯属娱乐...应该不会有人出这种题 ...
- web前端开发中Nodejs、Grunt、npm等的介绍、使用
一.Nodejs的安装: Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.去 https://nodejs.org/ 上,点击页面中那个绿色.大 ...
- HDU 1247
简单的字典树 - -,求一个单词是否由两个单词组成 #include<iostream> #include<cstring> #include<cstdio> us ...
- java中的String.format使用
format(String format, Objece... argues)函数相当于C语言中的printf函数,但是相对来说更灵活. 和C中的printf函数差不多,在fo ...
- android scrollview组件禁止滑动的方法
xml配置: android:id="@+id/sc_freement" android:layout_width="fill ...