求知 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
要资料
 
追随技术信仰

随时听讲座
每天看新闻
 
 

AngularJS教程
AngularJS快速入门
AngularJS环境设置
AngularJS MVC体系结构
AngularJS第一个应用程序
AngularJS指令
AngularJS表达式
AngularJS控制器
AngularJS过滤器
AngularJS表格
AngularJS HTML DOM
AngularJS模块
AngularJS表单
AngularJS包括
AngularJS Ajax
AngularJS视
AngularJS作用域
AngularJS服务
AngularJS依赖注入
AngularJS自定义指令
AngularJS国际化
 
 

AngularJS依赖注入
65 次浏览
9次  
 捐助

依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分,从定位的依赖,依赖配置。这有助于使组件可重用,维护和测试

AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖下列核心组件。

  • 工厂
  • 服务
  • 提供者
  • 常值

值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器。

//define a module  var mainApp = angular.module("mainApp", []);
   //create a value object as "defaultInput" and pass it a data.
   mainApp.value("defaultInput", 5);
   ...
  //inject the value in the controller using its name "defaultInput"
  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); } })

工厂

工厂是用于返回函数的值。它根据需求创造值,每当一个服务或控制器需要。它通常使用一个工厂函数来计算并返回对应值

//define a module  var mainApp = angular.module("mainApp", []);
   //create a factory "MathService" which provides a method multiply to return multiplication of two numbers
   mainApp.factory('MathService', function() {
       var factory = {};
       factory.multiply = function(a, b) {
          return a * b
      }
     return factory;
  });
     //inject the factory "MathService" in a service to utilize the multiply method of factory.
   mainApp.service('CalcService', function(MathService){
        this.square = function(a) {
         return MathService.multiply(a,a);
      }
  });
  ...

服务

服务是一个单一的JavaScript包含了一组函数对象来执行某些任务。服务使用service()函数,然后注入到控制器的定义。

//define a module  var mainApp = angular.module("mainApp", []);
   ...
   //create a service which defines a method square to return square of a number.
   mainApp.service('CalcService', function(MathService){
        this.square = function(a) {
         return MathService.multiply(a,a);
      }
  });
  //inject the service "CalcService" into the controller
  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);
     }
  });

提供者

提供者所使用的AngularJS内部创建过程中配置阶段的服务,工厂等(相AngularJS引导自身期间)。下面提到的脚本,可以用来创建,我们已经在前面创建MathService。提供者是一个特殊的工厂方法以及get()方法,用来返回值/服务/工厂。

//define a module  var mainApp = angular.module("mainApp", []);
    ...
   //create a service using provider which defines a method square to return square of a number.
   mainApp.config(function($provide) {
     $provide.provider('MathService', function() {
        this.$get = function() {
           var factory = {};
             factory.multiply = function(a, b) {
              return a * b;
            }
           return factory; 
       };
     });
  });

常量

常量用于通过配置相位值考虑事实,值不能使用期间的配置阶段被传递。

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

例子

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
    <head>
    <title>AngularJS Dependency Injection</title>
    </head>
    <body>
     <h2>AngularJS Sample Application</h2>
     <div ng-app="mainApp" ng-controller="CalcController">
        <p>Enter a number: <input type="number" ng-model="number" />
        <button ng-click="square()">X<sup>2</sup></button>
        <p>Result: {{result}}</p>
     </div>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>

输出

在Web浏览器打开textAngularJS.html。看到结果如下。


您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码: 验证码,看不清楚?请点击刷新验证码 必填



65 次浏览
9次
 捐助
 

每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号