异常教程

AngularJS 依赖注入（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在前端开发领域，AngularJS 作为早期主流的 JavaScript 框架，凭借其声明式语法和模块化设计，至今仍被广泛使用于企业级应用中。AngularJS 依赖注入（Dependency Injection，简称 DI）是该框架的核心特性之一，它通过解耦组件间的依赖关系，显著提升了代码的可维护性、可测试性和可扩展性。然而，对于编程初学者和中级开发者而言，理解依赖注入的原理和实践方法可能存在一定难度。本文将从基础概念出发，结合形象比喻和代码示例，系统性地解析 AngularJS 中依赖注入的实现逻辑与应用场景。

依赖注入的基础概念

什么是依赖注入？

依赖注入是一种设计模式，其核心思想是：由外部容器负责创建和管理对象，而非由对象自身直接创建依赖。这类似于在餐厅点餐时，服务员根据订单提供食材，而非厨师自己去厨房随意拿取。

在 AngularJS 中，依赖注入通过模块（Module）系统实现，框架会自动将所需的依赖（如服务、控制器、过滤器等）注入到需要它们的组件中。这种机制使得组件无需关心依赖的具体实现细节，只需声明需要的依赖即可。

依赖注入的三个核心要素

  1. 依赖：需要被注入的对象或函数，例如 $http 服务、自定义服务等。
  2. 注入器（Injector）：AngularJS 内部的工厂，负责解析依赖关系并创建实例。
  3. 消费者：需要依赖的组件，例如控制器、指令或过滤器。

AngularJS 依赖注入的工作原理

依赖解析流程

AngularJS 的依赖注入系统通过以下步骤完成依赖的传递：

  1. 声明依赖：在组件定义时，明确列出所需依赖的名称。
  2. 解析依赖名称：注入器根据名称查找对应的工厂函数或服务。
  3. 实例化依赖：通过工厂函数生成依赖对象，并传递给消费者。

示例：控制器中的依赖注入

// 声明一个模块，并注入 $scope 和 $http  
app.controller('UserController', ['$scope', '$http', function($scope, $http) {  
  $http.get('/api/users')  
    .then(function(response) {  
      $scope.users = response.data;  
    });  
}]);

在上述代码中，$scope 和 $http 是 AngularJS 内置的依赖，通过数组语法声明后，注入器会自动将它们注入到控制器中。

依赖解析的两种语法

AngularJS 支持两种声明依赖的方式：

1. 数组语法（推荐）

app.service('UserService', ['$http', function($http) {  
  this.fetchUsers = function() {  
    return $http.get('/api/users');  
  };  
}]);

优点：名称与参数一一对应，即使代码被压缩也不会出错。

2. 函数参数语法（非安全）

app.service('UserService', function($http) {  
  this.fetchUsers = function() {  
    return $http.get('/api/users');  
  };  
});

缺点：若代码经过压缩（如将 $http 重命名为 a），注入器将无法正确解析依赖名称，导致运行时错误。

依赖注入的常见使用场景

场景一：模块化开发

在大型应用中，依赖注入能够将业务逻辑与具体实现分离。例如，通过 service 或 factory 定义可复用的服务：

// 定义一个用户服务  
app.service('UserService', ['$http', function($http) {  
  this.getCurrentUser = function() {  
    return $http.get('/api/current-user');  
  };  
}]);  

// 在控制器中注入并使用该服务  
app.controller('ProfileCtrl', ['UserService', function(UserService) {  
  UserService.getCurrentUser().then(function(user) {  
    console.log('Current user:', user);  
  });  
}]);

场景二：单元测试

依赖注入使得替换真实依赖为模拟对象（Mock）变得简单。例如，测试 ProfileCtrl 时，可以注入模拟的 UserService：

// 单元测试代码（使用 Jasmine 框架）  
describe('ProfileCtrl', function() {  
  beforeEach(module('app'));  

  var $controller, mockUserService;  

  beforeEach(inject(function(_$controller_) {  
    $controller = _$controller_;  
    mockUserService = {  
      getCurrentUser: jasmine.createSpy().and.returnValue({ data: { name: 'John' } })  
    };  

    // 通过局部覆盖注入模拟服务  
    $controller('ProfileCtrl', { UserService: mockUserService });  
  }));  

  it('should fetch current user', function() {  
    expect(mockUserService.getCurrentUser).toHaveBeenCalled();  
  });  
});

场景三：指令中的依赖

指令（Directive）也可以通过依赖注入获取服务：

app.directive('userCard', ['UserService', function(UserService) {  
  return {  
    restrict: 'E',  
    template: '<div>{{ user.name }}</div>',  
    link: function(scope) {  
      UserService.getCurrentUser().then(function(user) {  
        scope.user = user.data;  
      });  
    }  
  };  
}]);

实战案例：构建一个用户服务

步骤一：定义模块和依赖

var app = angular.module('myApp', []);

步骤二：创建用户服务

app.service('UserService', ['$http', function($http) {  
  // 定义方法获取用户列表  
  this.getUsers = function() {  
    return $http.get('/api/users');  
  };  

  // 定义方法创建新用户  
  this.createUser = function(user) {  
    return $http.post('/api/users', user);  
  };  
}]);

步骤三：在控制器中使用服务

app.controller('UserCtrl', ['UserService', function(UserService) {  
  var self = this;  

  // 获取用户列表  
  UserService.getUsers().then(function(response) {  
    self.users = response.data;  
  });  

  // 处理表单提交  
  self.addUser = function(newUser) {  
    UserService.createUser(newUser)  
      .then(function() {  
        self.users.push(newUser);  
        self.newUser = {}; // 重置表单  
      });  
  };  
}]);

步骤四：模板绑定

<div ng-controller="UserCtrl as ctrl">  
  <h2>用户列表</h2>  
  <ul>  
    <li ng-repeat="user in ctrl.users">{{ user.name }}</li>  
  </ul>  

  <form ng-submit="ctrl.addUser(ctrl.newUser)">  
    <input type="text" ng-model="ctrl.newUser.name" placeholder="用户名">  
    <button type="submit">添加用户</button>  
  </form>  
</div>

依赖注入的最佳实践

1. 始终使用数组语法

避免因代码压缩导致依赖名称解析失败，例如：

// 错误写法（压缩后可能失效）  
app.controller('MyCtrl', function($http) { /* ... */ });  

// 正确写法  
app.controller('MyCtrl', ['$http', function($http) { /* ... */ }]);

2. 保持依赖的单一职责原则

每个服务或组件应只负责单一功能，例如：

// 错误：服务承担了多个职责  
app.service('UserService', ['$http', function($http) {  
  this.getUser = function() { /* ... */ };  
  this.saveSettings = function() { /* ... */ }; // 不属于用户核心功能  
}]);  

// 正确：拆分为两个服务  
app.service('UserManager', ['$http', function($http) { /* 用户管理 */ }]);  
app.service('SettingsManager', ['$http', function($http) { /* 设置管理 */ }]);

3. 避免过度依赖注入

仅注入真正需要的依赖，避免将全局对象（如 $rootScope）注入到每个控制器中。

4. 利用装饰器扩展依赖

通过装饰器（Decorator）增强现有服务的功能，例如日志记录：

app.config(function($provide) {  
  $provide.decorator('$http', ['$delegate', function($delegate) {  
    var originalGet = $delegate.get;  
    $delegate.get = function(url) {  
      console.log('发起 GET 请求:', url);  
      return originalGet.apply($delegate, arguments);  
    };  
    return $delegate;  
  }]);  
});

常见问题解答

Q: 为什么我的依赖无法注入？

A: 检查以下几点：

  1. 是否使用了数组语法；
  2. 依赖名称是否拼写正确（如 $http 而非 $https）；
  3. 是否在模块中正确声明了依赖模块（如 ngResource）。

Q: 如何在 AngularJS 中实现依赖注入的循环引用？

A: AngularJS 默认会阻止循环依赖，若需解决，可将依赖关系改为通过函数调用传递。

Q: 依赖注入是否会影响性能？

A: 在大多数情况下，依赖注入的性能损耗可以忽略，但需避免在频繁调用的方法中注入复杂依赖。

结论

AngularJS 依赖注入通过优雅的解耦设计，为开发者提供了构建可维护、可测试的大型应用的基础设施。无论是通过服务共享数据，还是通过模拟对象进行单元测试，依赖注入都展现了其强大的灵活性和扩展性。对于初学者而言，掌握这一机制不仅是理解 AngularJS 框架的核心，更是迈向专业前端开发的重要一步。

通过本文的案例分析和最佳实践，希望读者能够将依赖注入的原理与实际开发场景相结合，逐步提升代码质量和架构设计能力。在后续的 Angular 开发中，这一模式也将成为构建复杂系统不可或缺的基石。

最新发布

查看更多文章