• AngularJS学习之依赖注入


    1.什么是依赖注入:简称DI,是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。

    该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一的职责原则,与服务定位器模式形成直接对比的是,它允许客户端了解如何使用系统找到依赖;

    2.一句话:没事你不要来找我,有事我会去找你;

    3.AngularJS提供了很好地依赖注入,以下5个核心组件用来作为依赖注入:

    **Value:一个简单的javascript对象,用于向控制器传递值(配置阶段):

    var mainApp=angular.module("mainApp",[]);         //定义一个模块

    mainApp.value("defaultInput",5);                         //创建vlaue对象,对象“defaultInput并传递数据”

    .....

    mainApp.controlller('CalcController',function($scope,CalcService,defaultInput){          //讲“defaultInput”注入到控制器

      $scope.number=defaultInput;

      $scope.result=CalcService.square($scope.number);

      $scope.square=function(){

        $scope.result=CalcService.square($scope.number);

      }

    });

    **factory:一个函数,用于返回值,在service和controller需要时创建,通常使用factory函数计算或返回值;

    var mainApp=angular.module("mainApp",[]);        //定义一个模块

    mainApp.factory('MathService',function(){            //创建factory“MathService”用于两个数的乘积

      var factory={};

      factory.multiply=function(a,b){

        return a*b;

      }

      return factory;

    });

    mainApp.service('CalcService',function(MathService){

      this.square=function(a){

        return MathService.multiply(a,a);

      }

    });

    **provider:AngularJS中通过provider创建一个service,factory等(配置阶段),Provider中提供了一个factory方法get(),它用于返回value/service/factory;

    var mainApp=angular.module("mainApp",[]);         //定义一个人模块

    mainApp.config(function($provide){                      //使用provider创建service定义一个方法用于计算两数乘积

      $provide.provider('MathService',function(){

        this.$get=function(){

          var factory={};

          factory.multiply=function(a,b){

            return a*b;

          }

          return factory;

        };

      });

    });

    **constant:constant(常量)用来在配置阶段传递数值,注意这个常量在配置阶段是不可用的;

    mainApp.constant("configParam","constant value");

    HTML页面:
    <div ng-app="mainApp" ng-controller="CalcController">

      <p>输入一个数字:<input type="number" ng-model="number"/></p>

      <button ng-click="square()">X<sup>2</sup></button>

      <p>结果:{{result}}</p>

    </div>

    <script src=http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js></script>

    <script>

      var mainApp=angular.module("mainApp",[]);

      mainApp.config(function($provide){

        $provide.provider('MathService',function(){

          this.$get=function(){

            var factory={};

            factory.multiply=function(a,b){

              return a*b;

            }

            return factory;

          };

        });

      });

      mainApp.value("defaultInput",5);

      mainApp.factory('MathService',function(){

        var factory={};

        factory.multiply=function(a,b){

          return a*b;

        }

        return factory;

      });

      mainApp.service('CalcService',function(MathService){

        this.square=function(a){

          return MathService.multiply(a,a);

        }

      });

      mainApp.controller('CalcController',function($scope,CalcService,defaultInput){

        $scope.number=defaultInput;

        $scope.result=CalcService.square($scope.number);

        $scope.square=function(){

          $scope.result=CalcService.square($scope.number);

        }

      });

      </script>

    </body>

    </html>

  • 相关阅读:
    第四周作业
    第四周上机练习
    第一次作业
    第八周作业
    第八周上机练习
    第七周作业
    第五次上机练习
    第六周作业
    第四次上机练习
    第三次上机练习
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6139946.html
Copyright © 2020-2023  润新知