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

最新推荐文章于 2022-08-01 20:11:02 发布

jooner888

最新推荐文章于 2022-08-01 20:11:02 发布

阅读量219

点赞数

分类专栏： angular 文章标签： angular

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 注入内置服务错误

jooner888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs factory,service,provider 自定义服务的不同

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

扫一扫