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
在网上看到，有人说service是不能注入内置服务器的，但是实际操作结果是provider是不能注入内置服务的。我用的angularjs的版本是AngularJS v1.2.14
