服务的用途

  • 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性
  • 服务提供了把特定功能相关联的方法集中在一起的接口

如何创建服务

  • 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'
    .......
    }
    });
  • 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函数内部无法访问这个值
      }] );
    • 通常用value()来注册服务对象,用constant()来配置数据

angularJS中如何写服务的更多相关文章

  1. 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别,你知道么?

    在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...

  2. AngularJS中实现日志服务

    本篇体验使用AngularJS自定义一个记录日志的服务. 在AngularJS中,服务的一些写法是这样的: var app = angular.module('app',[]); app.provid ...

  3. angularJS中如何写控制器

    angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为 当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新 ...

  4. angularJS中如何写自定义指令

    指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能 例如,ng-click可以让一个元素能够监听click事件,并在接收到事件的时候执行angularJS ...

  5. AngularJS中的http服务的简单用法

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...

  6. 自定义AngularJS中的services服务

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. AngularJs中的服务

    一.angularJs中的简单服务应用 下面的例子让我们明白在AngularJs中如何去调用文件中的数据,从而将文件中的数据显示在页面上;改变url的地址,也可以去调用后台接口. 实例: <!D ...

  8. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  9. 怎么理解angularjs中的服务?

    AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...

随机推荐

  1. 【树状数组】CSU 1811 Tree Intersection (2016湖南省第十二届大学生计算机程序设计竞赛)

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1811 题目大意: 一棵树,N(2<=N<=105)个节点,每个节点有一种颜 ...

  2. kafka log4j配置

    kafka日志文件分为5种类型,依次为:controller,kafka-request,server,state-change,log-cleaner,不同类型log数据,写到不同文件中: 区别于c ...

  3. HDOJ 2016 数据的交换输出

    Problem Description 输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输出这些数. Input 输入数据有多组,每组占一行,每行的开始是一个整数n,表示这个测 ...

  4. 高效算法——Bin Packing F - 贪心

      Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Descripti ...

  5. [Audio processing] Harmonic change detection function (HCDF)

    Harmonic change detection function (HCDF) 是根据 Tonal Centroid (TC)实现的,首先TC如何提取? Step 1. 提取PCP特征 Step ...

  6. top -bcn -1

    ^[[?1h^[=^[[?25l^[[H^[[2J^[(B^[[mtop #!/bin/bash#echo 性能数据捕捉时间: `date +%Y-%m-%d_%H:%M:%S` \n >> ...

  7. + (void)load和+ (void)initialize有什么用处

    两个方法都可以进行一些类的初始化操作.其中有些小区别.+(void)load 方法只要加入了工程种,进行了编译,且.m中实现了这个方法,都会调用一次,值得注意的时没实现的子类是不会调用的,就算父类实现 ...

  8. 深入理解java垃圾回收算法

    Java虚拟机的内存区域中,程序计数器.虚拟机栈和本地方法栈三个区域是线程私有的,随线程生而生,随线程灭而灭:栈中的栈帧随着方法的进入和退出而进行入栈和出栈操作,每个栈帧中分配多少内存基本上是在类结构 ...

  9. 必胜宅急送Web app设计背后的思考

    O2O模式是餐饮业在移动消费趋势下主动拥抱互联网的方向,迎合餐饮消费者从以往经验判断为主转变为依靠移动设备.lbs.社交网络进行立体决策的过程.继App客户端之后,手机web app也逐渐成为O2O中 ...

  10. Textview 文本旋转,倾斜

    有时候Android自带的控件无法满足我们的某些要求,这时就需要我们自定义控件来实现这些功能.比如需要一个TextView里的字倾斜一定的角度,就需要自定义TextView. 代码如下: ? 1 2 ...