AngularJS添加服务后出现依赖注入错误，求排查方案

这个问题我碰到过好多次啦，核心原因基本都是模块加载顺序不对或者服务注册模块的方式有误，咱们一步步排查：

1. 最常见的问题：脚本引入顺序错误 #

你提到已经在index.html里引入了myService.js，但很可能引入顺序搞反了——必须先加载定义myApp模块的文件，再加载服务文件。

举个正确的index.html脚本引入顺序例子：

<!-- 第一步：先引入AngularJS核心库（这一步你之前运行正常，应该没问题，但还是确认下） -->
<script src="angular.min.js"></script>

<!-- 第二步：加载定义myApp模块的文件（比如app.js） -->
<script src="app.js"></script>

<!-- 第三步：加载服务文件（myService.js） -->
<script src="myService.js"></script>

<!-- 最后：加载控制器等其他依赖模块的文件 -->
<script src="yourController.js"></script>

如果myService.js先于模块定义文件加载，那脚本执行到服务里引用myApp时，模块还没被创建，自然会抛出myApp is not defined错误，进而引发[$injector:modulerr]的连锁报错。

2. 检查服务的模块注册方式 #

确保你在myService.js里是获取已存在的模块，而不是重新创建模块：

✅ 正确的服务注册方式：

// myService.js
// 不带依赖数组的angular.module('myApp')是获取已存在的模块
angular.module('myApp')
  .service('myService', function() {
    // 你的服务逻辑
    this.doSomething = function() {
      // ...
    };
  });

❌ 错误的方式（会重新定义模块，且如果顺序不对就会报错）：

// 不要在服务文件里写这个！这会重新创建myApp模块，覆盖之前的定义
var myApp = angular.module('myApp', []);
myApp.service('myService', function() { ... });

模块定义应该放在单独的文件（比如app.js）里，写法是：

// app.js
// 带依赖数组的angular.module是创建新模块
var myApp = angular.module('myApp', []);

3. 检查模块名的拼写一致性 #

AngularJS的模块名是大小写敏感的，确保你在所有文件里引用的模块名都是myApp（比如不要在服务里写成myapp或者MyApp）。

4. 额外排查：是否遗漏了模块依赖 #

如果你的服务依赖其他AngularJS模块（比如ngRoute），要确保在创建myApp模块时已经声明了这些依赖：

// app.js
var myApp = angular.module('myApp', ['ngRoute']); // 示例：添加ngRoute依赖

按这几步排查下来，应该就能解决你的问题啦！

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