Angular控制器注入服务失败求助：[$injector:unpr]错误

这个[$injector:unpr]错误我太熟了——本质就是Angular的注入器找不到你要的服务提供者，不管是自定义的bookService还是第三方的toastr，核心问题都出在注册/依赖配置或者注入写法上。我给你拆解一下常见的坑和解决办法：

一、自定义服务bookService的问题排查 #

1. 服务是否正确注册到模块？ #

很多人会在这里踩坑：创建服务时不小心重新创建了模块，导致服务注册到了“无效”的模块里。

正确的注册方式是：

// 先定义主模块（只执行一次，带依赖数组）
angular.module('myApp', []);

// 注册bookService时，用不带依赖数组的方式获取已有的模块
angular.module('myApp')
  .service('bookService', function() {
    // 你的服务逻辑
    this.fetchBooks = function() {
      return ['Angular实战', 'JavaScript高级程序设计'];
    };
  });

错误示范：如果注册服务时又写了angular.module('myApp', [])，这会覆盖之前的模块，导致服务和控制器不在同一个模块上下文里。

2. 控制器所在模块是否依赖了服务模块？ #

如果你的服务是单独放在一个子模块（比如myApp.services）里，那控制器所在的模块必须显式依赖这个子模块：

// 定义服务模块
angular.module('myApp.services', [])
  .service('bookService', function() { ... });

// 控制器模块依赖服务模块
angular.module('myApp.controllers', ['myApp.services'])
  .controller('bookController', ['bookService', function(bookService) {
    // 控制器逻辑
    this.books = bookService.fetchBooks();
  }]);

3. 注入写法是否符合压缩安全规范？ #

如果你的代码会被压缩，简化的注入写法会导致参数名被篡改，Angular就找不到服务了。必须用以下两种写法之一：

• 数组式注入（最常用）：

  angular.module('myApp')
    .controller('bookController', ['bookService', function(bookService) {
      // 逻辑代码
    }]);
  

• $inject属性注入：

  function BookController(bookService) {
    this.books = bookService.fetchBooks();
  }
  // 显式声明依赖
  BookController.$inject = ['bookService'];
  angular.module('myApp').controller('bookController', BookController);
  

二、第三方库（比如toastr）的问题排查 #

1. 脚本引入顺序是否正确？ #

第三方库的引入顺序非常关键，比如toastr的正确顺序是：

<!-- 先引入依赖的jQuery（如果toastr需要） -->
<script src="jquery.min.js"></script>
<!-- 引入toastr核心文件 -->
<script src="toastr.min.js"></script>
<!-- 引入Angular框架 -->
<script src="angular.min.js"></script>
<!-- 引入Angular封装的toastr模块 -->
<script src="angular-toastr.min.js"></script>

如果顺序错了，Angular加载时找不到第三方库的封装模块，自然无法注入。

2. 主模块是否依赖了第三方模块？ #

几乎所有Angular封装的第三方库都需要你把它的模块添加到主模块的依赖里，比如toastr的模块名一般是toastr：

// 主模块依赖toastr模块
angular.module('myApp', ['toastr']);

3. 服务名称是否拼写正确？ #

有些第三方库的服务名可能带前缀（比如$toastr），一定要对照官方文档确认。拼写错误（比如大小写、多写少写字母）是最容易忽略的坑。

最后总结排查步骤 #

1. 检查服务（自定义/第三方）是否正确注册/引入到项目中
2. 确认控制器所在模块依赖了包含服务的模块
3. 验证注入写法是否符合Angular的压缩安全规范
4. 核对服务名称的拼写和大小写是否完全正确

内容的提问来源于stack exchange，提问作者Alonso Contreras