angular中定义服务的三种方式

在ng中，为什么要使用服务？

服务在mvc里面也就相当于model，用于和服务端交互，与数据打交道，我们不应该在controller里面做太多和数据相关的事情，所以就有了服务，也就是我们的model ，我们可以通过定义的module的第三个参数(相当于一个配置的参数)或者是config来实现，或者直接在module后面.出来

方式一 ：使用 provider

html结构:

<div ng-app="starter" ng-controller="myCtrl"></div>

• 通过module的第三个参数，注入$provide 和使用 $get来实现

  • js结构 :
    

    /* module的第三个参数来实现 */
    var module = angular.module("starter",[],function($provide){
        $provide.provider("myProvider",function(){
            this.$get = function(){
                // 这儿也可以返回一个字符串 如下：
                // return "myProvider";
                return {
                    name:"这是我自己定义的一个服务"
                }
            }
        });
    });
    
    /* 在controller 中注入我们定义的服务 */
    module.controller("myCtrl", ["myProvider", function(myProvider){
        console.log(myProvider); // 可以获取到数据
    }])
    

• 通过config配置来实现

  • js 代码：
    

    var module = angular.module("starter",[]);
    
    module.config(function($provide){
        $provide.provider("myProvider2",function(){
            this.$get = function(){
                return "myProvider2";
            }
        });
    });
    
    module.controller("myCtrl", ["myProvider2", function(myProvider2){
        console.log(myProvider2); // 可以获取到数据 myProvider2
    }])

• 直接使用 . 以后推荐这个，方便！

  • js代码：
    

    var module = angular.module("starter",[]);
    
    module.provider("myProvider",function(){
        this.$get = function(){
            return {
                name:"我是myProvider"
            }
        }
    });
    
    module.controller("myCtrl", ["myProvider", function(myProvider){
        console.log(myProvider); // 可以获取到数据 myFactory
    }])
    

• 当然，如果return的是一个对象，那么我们可以在对象里面做很多事情，比如定义set和get方法等。

方式二 ：使用 factory

使用相同的html结构

• js代码：

  var module = angular.module("starter",[]);
  
  module.factory("myFactory",function(){
      // 使用factory ，不必使用 $get了。
      return {
          name:"我是factory"
      }
  });
  
  module.controller("myCtrl", ["myFactory", function(myFactory){
      console.log(myFactory); // 可以获取到数据 myFactory
  }])
  

方式三 ： 使用 service

相同的html结构

• js代码

  var module = angular.module("starter",[]);
  
  module.service("myService",function(){
      // 使用factory ，不必使用 $get了。
      return {
          name:"myservice"
      }
  });
  
  module.controller("myCtrl", ["myService", function(myService){
      console.log(myService); // 可以获取到数据 myService
  }])
  

总结：

• 使用provider的时候，必须使用$get ， 而factory和service可以直接return
• provider和factory可以return字符串，而service必须return的是一个对象或者null(null也是对象)