一、什么是服务
　　在angular中，我们一般会把控制器中一些公共的部分抽出来，写成一个服务。比如在form表单里的上传、http请求等，很多地方都会用到，把这些代码抽成一个服务会使得我们的代码更加模块化，更加的便于维护。

二、怎么去写服务
　　angular为我们提供了一些内置的服务，但同时我们在一些面对一些较为复杂的应用时，需要去封装自己的服务，甚至进一步封装NG所提供的内置服务，比如在下面的http服务。

示例：

define(function(require){
    var app = require('app');
    /*http服务*/
    app.factory('http',['$q','$http','$state','$timeout','utils',function($q,$http,$state,$timeout,utils){
        return function(url,settings){
            var deferred = $q.defer();
            var settings = settings || {},
                type = settings.type || 'json',
                url = ( type == 'jsonp' ) ? url + '&call_back=JSON_CALLBACK' : url;
            if( type === 'jsonp' ){
                $http.jsonp(url).success(function(data){
                    deferred.resolve(data);
                }).error(function(reason){
                    deferred.reject(reason);
                });
            }else{
                $http({
                    url : url,
                    method : settings.method || 'get',
                    data : settings.data || null,
                    params : settings.params || null,
                    responseType :  type,
                    // headers:{
                    //     "Content-Type": 'multipart/form-data'
                    // }
                }).success(function(data){
                    if( data.error_code ){
                        utils.error( data.error_message );
                    }
                    deferred.resolve(data);
                }).error(function(reason){
                    if( reason ){
                        !settings.error_nonotice && reason.error_code && utils.error( reason.error_message );
                        if(reason.error_code == 1000 && $state.$current.name != 'layout_for_push.userlogin'){
                            $timeout( function(){
                              //   window.location.href = config.API.login;
                                $state.go('layout_for_push.userlogin');
                            },1500 );
                        }
                        deferred.reject(reason);
                    }
                }).catch(function(reason){
                    if( reason ){
                        !settings.error_nonotice && reason.error_code && utils.error( reason.error_message );
                        deferred.reject(reason);
                    }
                });
            }
            return deferred.promise;
        };
    }]);

　　　　angular封装自己的服务是非常简单的，我们只需要注册这个服务，在服务里面把我们的function给return出来就可以了。

三、如何使用服务

　　　　知道了服务的作用和创建，那我们应该如何使用它呢？其实也是很简单的，我们可以在控制器、指令或另外一个服务中通过依赖声明的方式来使用。

示例：

<!doctype html>
<html ng-app="ng-App">
   <head>
        <title>angular的服务</title>
        <script src="angular.js"></script>
        <script src="http.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>

 

四、angular所提供创建服务的三种方式

　　　　angular一共提供了三种创建服务的方法，分别是factory、service、provider。

  • factory需要接受两个参数：name、fun 
    angular.module('app',[]).factory('serviceName',function(){
          return function(){
              //do something
          };
    };
});
  • provider 
    angular.module('app',[]).provider('serviceName',function(){
    this.setUrl = function(){};
    this.$get = function( $http ){   //依赖注入在此加入
          return {
              getUser :  function(){}
          };
    };
});
  • service 
    angular.module('app',[]).service('serviceName',function(){

 　　this.getUser = function(){};

});

     

　　　　其实三种写法都是provider，只是方式不一样，适合不同口味的人，让你写起来更爽一点，总有一款适合你。