AngularJS为UI Router状态添加控制器时出现模块错误求助

嘿，我一眼就瞅到问题出在哪了！你遇到的这个报错，核心原因是UI Router配置里的controller属性使用方式不对，再加上可能的文件加载顺序问题，咱们一步步来搞定：

问题根源 #

你在nerd状态里写了controller: NerdController，这里直接把控制器当作变量引用，但你的NerdController是注册在NerdCtrl模块里的，并不是全局变量，Angular找不到这个直接引用的变量，所以抛出了未定义的错误。

解决方案 #

1. 把控制器名改成字符串形式 #

在UI Router的state配置中，指定控制器必须用字符串名称，而不是直接引用控制器变量。修改你的App.js里的nerd状态：

.state('nerd', {
    url: '/nerd',
    templateUrl: 'views/nerd.html',
    controller: 'NerdController' // 这里改成字符串！
})

这样Angular就能通过字符串名称，在已加载的模块中找到对应的控制器了。

2. 确认文件加载顺序 #

确保你的脚本文件在HTML里是按正确顺序加载的：

• 先加载angular.js
• 再加载angular-ui-router.js和其他依赖库（比如ngMaterial）
• 然后加载所有控制器/服务模块的文件（比如nerdController.js）
• 最后加载你的App.js
  如果加载顺序反了，App.js在控制器文件之前加载，那NerdCtrl模块还没注册，App.js依赖它的时候也会出问题。

3. 验证模块依赖是否正确 #

你的App.js里已经依赖了NerdCtrl模块，这部分是对的，但可以再确认一下控制器文件里的模块定义没有拼写错误：

// 控制器文件里的模块定义要和App.js里依赖的名称完全一致
angular.module('NerdCtrl', []).controller('NerdController', function($scope) {
    $scope.tagline = 'Nothing beats a pocket protector!';
});

测试修改 #

改完上面的内容后，取消注释controller那一行，重新运行项目，应该就能正常加载nerd状态和对应的控制器了。

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