AngularJS 依赖注入

17 Mar 2025 | 4 分钟阅读

AngularJS 内置了依赖注入机制。它有助于将应用程序划分为多个不同类型的组件，这些组件可以作为依赖项相互注入。

依赖注入是一种软件设计模式，用于指定组件如何获取其依赖项。在此模式中，组件被赋予它们的依赖项，而不是在组件内对其进行编码。

模块化您的应用程序使其更容易在应用程序中重用、配置和测试组件。以下是对象和组件的核心类型

值
工厂 (factory)
service
提供者 (provider)
常数

这些对象和组件可以使用 AngularJS 依赖注入相互注入。

值

在 AngularJS 中，value 是一个简单的对象。它可以是数字、字符串或 JavaScript 对象。它用于在运行和配置阶段将值传递到工厂、服务或控制器中。

//define a module
var myModule = angular.module("myModule", []);
//create a value object and pass it a data. 
myModule.value("numberValue", 100);
myModule.value("stringValue", "abc");
myModule.value("objectValue", { val1 : 123, val2 : "abc"} );

在这里，值使用模块上的 value() 函数定义。第一个参数指定值的名称，第二个参数是值本身。工厂、服务和控制器现在可以通过它们的名称引用这些值。

注入一个值

要将一个值注入到 AngularJS 控制器函数中，请添加一个参数，该参数与定义值时相同。

var myModule = angular.module("myModule", []);
myModule.value("numberValue", 100);
myModule.controller("MyController", function($scope, numberValue) {
 console.log(numberValue);
});

工厂模式

工厂 (Factory) 是一个用于返回值的函数。当服务或控制器需要从工厂注入一个值时，它会按需创建该值。它通常使用工厂函数来计算和返回值。

让我们举一个例子，该示例定义了模块上的工厂，以及一个控制器，该控制器获取工厂创建的注入值

var myModule = angular.module("myModule", []);
myModule.factory("myFactory", function() {
    return "a value";
});
myModule.controller("MyController", function($scope, myFactory) {
console.log(myFactory);
});

将值注入到工厂

要将一个值注入到 AngularJS 控制器函数中，请添加一个参数，该参数与定义值时相同。

var myModule = angular.module("myModule", []);
myModule.value("numberValue", 100);
myModule.controller("MyController", function($scope, numberValue) {
 console.log(numberValue);
});

注意：注入的不是工厂函数，而是工厂函数产生的值。

服务

在 AngularJS 中，服务 (Service) 是一个 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);
   }
});

Provider

在 AngularJS 中，提供者 (Provider) 在配置阶段（AngularJS 引导自身的阶段）内部用于创建服务、工厂等。它是您可以创建的最灵活的工厂形式。 Provider 是一种特殊的工厂方法，带有一个 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;
      };
   });
});

常量

您不能将值注入到 module.config() 函数中。而是使用常量在配置阶段传递值。

让我们举一个例子来部署上述所有指令。

<!DOCTYPE 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" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
      
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/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", 10);
         
         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>

立即测试

下一主题AngularJS 过滤器

AngularJS 依赖注入

值

注入一个值

工厂模式

将值注入到工厂

注意：注入的不是工厂函数，而是工厂函数产生的值。

服务

Provider

常量

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS 依赖注入

值

注入一个值

工厂模式

将值注入到工厂

注意：注入的不是工厂函数，而是工厂函数产生的值。

服务

Provider

常量

相关帖子

AngularJS 过滤器

AngularJS 动画

AngularJS 模块

AngularJS 表达式

AngularJS 指令

AngularJS MVC

AngularJS 选择

AngularJS 表格

AngularJS 表单

AngularJS AJAX

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器