angularJS provider/factory/service初解析

最新推荐文章于 2018-07-24 14:24:48 发布

兜生

最新推荐文章于 2018-07-24 14:24:48 发布

阅读量653

点赞数

分类专栏： phoneGap跨平文章标签： angularjs 实例

本文链接：https://blog.csdn.net/QQ417431233/article/details/50946780

版权

phoneGap跨平专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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) {
            firstProviderProvider.setAge(26);
        });
  </script>
</body>
</html>