【AngularJS】——核心特性之服务

前端之家收集整理的这篇文章主要介绍了【AngularJS】——核心特性之服务前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在之前几篇文章中,提到了AngularJS几个核心特性,今天继续来看看ng的服务(service)。


1、简单介绍

首先服务是一个单例,即无论这个服务被注入到任何地方,对象始终只有一个实例。
其次这与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个模块中,所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。

ng提供了30多个内置的服务,可以到API中 https://docs.angularjs.org/guide/di 以及Service API中https://docs.angularjs.org/api/ng/service进行查看学习。我们依靠ng的依赖注入机制把服务注入到controller、指令或者是其他服务中,对服务进行使用。


2、定义服务

如同指令一样,系统内置的服务以$开头,我们也可以自己定义一个服务。定义服务的方式有如下几种:


※使用Module的factory方法

使用Module的service方法

使用系统内置的$provide服务


代码说明如下:

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

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

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

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


3、服务调用

congtroller调用定义模块,controller.js

//以注入的方式来调用yxmTestControllers.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.js把service和controller结合到一起。app.js

/* App Module */  
  
var yxmTestApp = angular.module('yxmTestApp',[  
    'ngRoute','yxmTestControllers',//上面定义的controller  
    'yxmTestServices'         //上面自定义的服务  
]); 

HTML调用显示

<!doctypehtml>
<htmllang="en"ng-app="yxmTestApp">
<head>

//各种引用

</head>
<body>

<divng-controller="TestCtrl">
<p>{{facetorytest}}</p>
<p>{{servicetest}}</p>
<p>{{providertest}}</p>
</div>

</body>
</html>
值得注意的是,Angular services依赖注入的规范:自定义的service要写在内建的Angular services之后,自定义的service之间是没有先后顺序的。 原文链接:https://www.f2er.com/angularjs/149745.html

猜你在找的Angularjs相关文章