详解AngularJS中的依赖注入机制_AngularJS-js教程-PHP中文网

首页

web前端

js教程

详解AngularJS中的依赖注入机制_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:54 PM

angularjs依赖注入

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

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 id="AngularJS-Sample-Application">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。看到结果如下。

2015617111816048.jpg (560×240)

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

手把手带你了解Angular中的依赖注入Dec 02, 2022 pm 09:14 PM

本篇文章带大家了解一下依赖注入，介绍一下依赖注入解决的问题和它原生的写法是什么，并聊聊Angular的依赖注入框架，希望对大家有所帮助！

在Phalcon框架中使用依赖注入（Dependency Injection）的方法Jul 30, 2023 pm 09:03 PM

在Phalcon框架中使用依赖注入（DependencyInjection）的方法引言：在现代的软件开发中，依赖注入（DependencyInjection）是一种常见的设计模式，旨在提高代码的可维护性和可测试性。而Phalcon框架作为一个快速、低耗的PHP框架，也支持使用依赖注入来管理和组织应用程序的依赖关系。本文将向您介绍如何在Phalcon框架中

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Golang函数参数传递中的依赖注入模式Apr 14, 2024 am 10:15 AM

在Go中，依赖注入(DI)模式通过函数参数传递实现，类型包括值传递和指针传递。在DI模式中，依赖项通常以指针传递，以提高解耦性、减少锁争用和支持可测试性。通过使用指针，函数与具体实现解耦，因为它只依赖于接口类型。指针传递还可以减少传递大对象的开销，从而减少锁争用。此外，DI模式可以轻松地为使用DI模式的函数编写单元测试，因为可以轻松地模拟依赖项。

使用JUnit单元测试框架进行依赖注入Apr 19, 2024 am 08:42 AM

针对使用JUnit测试依赖注入，摘要如下：使用模拟对象创建依赖项：@Mock注解可创建依赖项的模拟对象。设置测试数据：@Before方法在每个测试方法前运行，用于设置测试数据。配置模拟行为：Mockito.when()方法配置模拟对象的预期行为。验证结果：assertEquals()断言检查实际结果与预期值是否匹配。实际应用：可使用依赖注入框架（如SpringFramework）注入依赖项，通过JUnit单元测试验证注入的正确性和代码的正常运行。

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

PHP 函数的依赖注入和服务容器Apr 27, 2024 pm 01:39 PM

答案：PHP中的依赖注入和服务容器有助于灵活地管理依赖项，提高代码可测试性。依赖注入：通过容器传递依赖项，避免在函数内直接创建，提升灵活性。服务容器：存储依赖项实例，方便在程序中访问，进一步增强松散耦合。实战案例：示例应用程序演示依赖注入和服务容器的实际应用，将依赖项注入到控制器，体现松散耦合优势。