angularJS provider/factory/service初解析

发布时间：2020-12-17 10:15:31 所属栏目：安全来源：网络整理

导读：!DOCTYPE html html lang = "en" head meta charset = "UTF-8" title index_provider_service_factory的实例 / title script type = "text/javascript" src = "angular.min.js" / script / head body div ng-app = "firstApp" div ng-controller = "firstCon

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index_provider_service_factory的实例</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
  <div ng-app="firstApp">
      <div ng-controller="firstController">
          <li>factory name:{{factoryName}}</li>
          <br><li>service name:{{serviceName}}</li>
          <br><li>provider name:{{providerName}}</li>
          <br>provider 可以在应用启动时进行配置:
          <br><li>config to provider:{{provideAge}}</li>

      </div>
  </div>
  <script type="text/javascript"> //service是一个可注入的构造器 //factory是一个可注入的方法 //provider是一个可配置的factory var firstApp=angular.module('firstApp',[]); //factory 返回一个对象的实例， 对于 AngularJS 的 factory 来说， 就是先定义一个对象， //给这个对象添加属性和方法， 然后返回这个对象；factory是普通function，而service是一个 //构造器(constructor)， //这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function， //所以factory可以返回任何东西，而service可以不返回 firstApp.factory('firstFactory',function(){ var firstFactory={}; firstFactory.name="first factory Name"; //最后controller 拿到的就是 firstFactory 对象， 相当于下面的代码： //var firstFactory = firstFactory(); return firstFactory; }); firstApp.service('firstService',function() { //最后controller 拿到的对象就是下面代码中this指向的对象 this.nameService = 'first service'; }); //与 factory 和 service 稍有不同的是， provider 必须提供一个 $get 方法，当然也 //可以说provider是一个可配置的factory ; //$get 方法和 factory 要求是一致的，即： 先定义一个对象， 给这个对象添加属性和方法， //然后返回这个对象 firstApp.provider('firstProvider',function() { //最后controller拿到的对象就是provider的$get方法返回的对象,相当于下面的代码： //var instance = new result(); //var provider = instance.$get(); var ageDefault=20; var age=ageDefault; this.setAge=function(ageNew){ age=ageNew; } this.$get = function() { var result = {}; result.providerName = 'name from provider'; result.age=age; result.defaultAge=ageDefault; return result; }}); // inject factory,service and provider to a controller firstApp.controller('firstController',['$scope','firstFactory','firstService','firstProvider',function($scope,firstFactory,firstService,firstProvider) { $scope.factoryName =firstFactory.name; $scope.serviceName =firstService.nameService; $scope.providerName = firstProvider.providerName; $scope.provideAge=firstProvider.age; }]); //实现有关的setName方法之后，可以module启动时来调用这个方法，实现对provider的配置。 //传进去的名字命名方式：xxx+Provider; firstApp.config(function(firstProviderProvider) { fir> tProviderProvider.setAge(26); }); </script>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!