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'

             .......

     }

});

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()来配置数据