angularjs factory,service,provider 自定义服务的不同

angularjs框架学了有一段时间了，感觉很好用。可以把angularjs的app理解成php的class，controller是控制器，而内置服务和自定义服务就可以理解成models了。angularjs的内置服务多，例如：$scope,$rootScope,$http,$q,$resource,$routeProvider等等，下面来说一下怎么自定义服务

一，factory,service,provider自定义服务，services.js

 1     'use strict';  
 2       
 3     /* Services */  
 4       
 5     var phonecatServices = angular.module('phonecatServices', []);  
 6       
 7     phonecatServices.factory('facetorytest', ['$window',         //factory方式  
 8         function($window){  
 9             var test = {  
10                 firstname:"tank",  
11                 lastname:function(){  
12                     return "zhang";  
13                 }  
14             };  
15             $window.alert('aaaa');         //内置服务可以注入  
16             return test;  
17         }  
18     ]);  
19       
20     phonecatServices.service('servicetest', ['$window',          //service方式  
21         function($window){  
22             $window.alert('bbbb');        //内置服务可以注入  
23             this.firstname = "tank";  
24             this.lastname = function(){  
25                 return "zhang";  
26             }  
27         }  
28     ]);  
29       
30     phonecatServices.provider('providertest',[                  //provider方式，内置服务不可以注入  
31         function(){  
32             this.test = {  
33                 "firstname":"tank",  
34                 "lastname":"zhang"  
35             }  
36             this.$get = function () {  
37                 return this.test;  
38             };  
39         }  
40     ]);

二，controller调用自定义模块，controllers.js

 1     'use strict';  
 2       
 3     /* Controllers */  
 4       
 5     var phonecatControllers = angular.module('phonecatControllers', []);  
 6       
 7     //写过js function的对这种调用方式，很熟悉，服务名称不能变  
 8     function TestCtrl($scope,facetorytest,servicetest,providertest) {  
 9         $scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();  
10         $scope.servicetest = servicetest.firstname+" "+servicetest.lastname();  
11         $scope.providertest = providertest.firstname+" "+providertest.lastname;  
12     }  
13       
14     //这种调用方式根jquery非常的像，服务名称也不能变  
15     phonecatControllers.controller('TestCtrl',function($scope,facetorytest,servicetest,providertest) {  
16         $scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();  
17         $scope.servicetest = servicetest.firstname+" "+servicetest.lastname();  
18         $scope.providertest = providertest.firstname+" "+providertest.lastname;  
19     });  
20       
21     //以注入的方式来调用，服务名称可以改变  
22     phonecatControllers.controller('TestCtrl',['$scope',"facetorytest","servicetest","providertest",  
23         function($scope,facetory111,service111,provider111) {     //自定义,服务名称  
24             $scope.facetorytest = facetory111.firstname+" "+facetory111.lastname();  
25             $scope.servicetest = service111.firstname+" "+service111.lastname();  
26             $scope.providertest = provider111.firstname+" "+provider111.lastname;  
27         }  
28     ]);

三，创建app把上面的service和controller接合到一起。app.js

1     'use strict';  
2       
3     /* App Module */  
4       
5     var phonecatApp = angular.module('phonecatApp', [  
6         'ngRoute',  
7         'phonecatControllers',     //上面定义的controller  
8         'phonecatServices'         //上面自定义的服务  
9     ]);

四，html中显示

    <!doctype html>  
    <html lang="en" ng-app="phonecatApp">  
    <head>  
      <meta charset="utf-8">  
      <title>Google Phone Gallery</title>  
      <link rel="stylesheet" href="css/app.css">  
      <link rel="stylesheet" href="css/bootstrap.css">  
      <script src="lib/angular/angular.js"></script>  
      <script src="lib/angular/angular-route.js"></script>  
      <script src="js/app.js"></script>  
      <script src="js/controllers.js"></script>  
      <script src="js/services.js"></script>  
    </head>  
    <body >  
      
      <div ng-controller="TestCtrl">  
          <p>{{facetorytest}}</p>  
          <p>{{servicetest}}</p>  
          <p>{{providertest}}</p>  
      </div>  
      
    </body>  
    </html>  
      
    显示结果：  
      
    tank zhang  
    tank zhang  
    tank zhang