zoukankan      html  css  js  c++  java

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

    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

    查看复制打印?
    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中显示

    查看复制打印?
    1. <!doctype html>  
    2. <html lang="en" ng-app="phonecatApp">  
    3. <head>  
    4.   <meta charset="utf-8">  
    5.   <title>Google Phone Gallery</title>  
    6.   <link rel="stylesheet" href="css/app.css">  
    7.   <link rel="stylesheet" href="css/bootstrap.css">  
    8.   <script src="lib/angular/angular.js"></script>  
    9.   <script src="lib/angular/angular-route.js"></script>  
    10.   <script src="js/app.js"></script>  
    11.   <script src="js/controllers.js"></script>  
    12.   <script src="js/services.js"></script>  
    13. </head>  
    14. <body >  
    15.   
    16.   <div ng-controller="TestCtrl">  
    17.       <p>{{facetorytest}}</p>  
    18.       <p>{{servicetest}}</p>  
    19.       <p>{{providertest}}</p>  
    20.   </div>  
    21.   
    22. </body>  
    23. </html>  
    24.   
    25. 显示结果：  
    26.   
    27. tank zhang  
    28. tank zhang  
    29. tank zhang  

    五，错误纠正

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

    查看复制打印?
    1. phonecatServices.provider('providertest',['$window',  
    2.     function($window){  
    3.         $window.alert('cccc');             //报错  
    4.         this.test = {  
    5.             "firstname":"tank",  
    6.             "lastname":"zhang"  
    7.         }  
    8.         this.$get = function () {  
    9.             return this.test;  
    10.         };  
    11.     }  
    12. ]);  
    provider 注入内置服务错误
  • 相关阅读:
    MJExtension使用
    使用html5结构化元素
    我的第一个html页面
    编写delegate（明天补充）
    iOS 获取系统相册数据（不是调系统的相册）
    CocoaLumberjack+XcodeColor（输出带有颜色的日志）在安装过程中遇到的问题
    iOS基础-UIKit框架-高级视图-UIPickerView-实例1：点菜（列与列之间无关系）
    iOS基础-UIKit框架-基础视图-UIScrollView
    OC与iOS开发
    Effective Objective-C 2.0 编写高质量iOS与OS X代码的52个有效方法---1-2章
  • 原文地址：https://www.cnblogs.com/HuiLove/p/4977413.html
Copyright © 2011-2022 走看看