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

张映 发表于 2014-03-10

分类目录: js/jquery

标签:, , , , ,

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

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

'use strict';

/* Services */

var phonecatServices = angular.module('phonecatServices', []);

phonecatServices.factory('facetorytest', ['$window',         //factory方式
    function($window){
        var test = {
            firstname:"tank",
            lastname:function(){
                return "zhang";
            }
        };
        $window.alert('aaaa');         //内置服务可以注入
        return test;
    }
]);

phonecatServices.service('servicetest', ['$window',          //service方式
    function($window){
        $window.alert('bbbb');        //内置服务可以注入
        this.firstname = "tank";
        this.lastname = function(){
            return "zhang";
        }
    }
]);

phonecatServices.provider('providertest',[                  //provider方式,内置服务不可以注入
    function(){
        this.test = {
            "firstname":"tank",
            "lastname":"zhang"
        }
        this.$get = function () {
            return this.test;
        };
    }
]);

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

'use strict';

/* Controllers */

var phonecatControllers = angular.module('phonecatControllers', []);

//写过js function的对这种调用方式,很熟悉,服务名称不能变
function TestCtrl($scope,facetorytest,servicetest,providertest) {
    $scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();
    $scope.servicetest = servicetest.firstname+" "+servicetest.lastname();
    $scope.providertest = providertest.firstname+" "+providertest.lastname;
}

//这种调用方式根jquery非常的像,服务名称也不能变
phonecatControllers.controller('TestCtrl',function($scope,facetorytest,servicetest,providertest) {
    $scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();
    $scope.servicetest = servicetest.firstname+" "+servicetest.lastname();
    $scope.providertest = providertest.firstname+" "+providertest.lastname;
});

//以注入的方式来调用,服务名称可以改变
phonecatControllers.controller('TestCtrl',['$scope',"facetorytest","servicetest","providertest",
    function($scope,facetory111,service111,provider111) {     //自定义,服务名称
        $scope.facetorytest = facetory111.firstname+" "+facetory111.lastname();
        $scope.servicetest = service111.firstname+" "+service111.lastname();
        $scope.providertest = provider111.firstname+" "+provider111.lastname;
    }
]);

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

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
    'ngRoute',
    'phonecatControllers',     //上面定义的controller
    'phonecatServices'         //上面自定义的服务
]);

四,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

phonecatServices.provider('providertest',['$window',
    function($window){
        $window.alert('cccc');             //报错
        this.test = {
            "firstname":"tank",
            "lastname":"zhang"
        }
        this.$get = function () {
            return this.test;
        };
    }
]);
provider 注入内置服务错误

provider 注入内置服务错误



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1606.html

1 条评论

  1. 马金先生 留言

    我也看到过这样的说法,事实是provider不可以注入依赖,而factory和service可以。

留下评论

留下评论
  • (必需)
  • (必需) (will not be published)
  • (必需)   1X6=?