你的位置:首页 > Java教程

[Java教程]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.jsangular.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.jsangular.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()来配置数据