如何在AngularJS项目中包含ui.router？

Question

我一直遇到这个错误：

`错误：[$injector:nomod] 模块 'ui.router' 不可用！您可能拼写了模块名称，或忘记加载它。

但我非常确定我已经正确配置了一切

该项目是使用Yeoman创建的，并使用Bower管理依赖项，使用Grunt构建所有内容。

yeoman angular生成器创建了基本的ngRouter样板，因此我安装了ui.router：

bower install angular-ui-router --save

Angular版本

1.2.16

Bower 文件

上面这行代码在依赖列表中更新了 bower.json 文件:

"angular-ui-router": "~0.2.10"

应用模块设置

我在app.js文件中更新了依赖关系，添加了对ui.route的依赖（以及其他各种依赖）。 angular.module('app', ['ngRoute', ... 'ui.router'])

索引.html

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
...
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->

我在上述目录中有以上文件，我确认它在那里（我复制并粘贴了路径以避免打字错误）。我还尝试使用经过压缩的版本，但没有区别。

编辑

我对这一切非常、非常新（angular、bower、yeoman等），所以我可能做错了所有事情，那么我是否不再需要包括ui.router依赖项？我的意思是，它是否已经某种方式集成到核心angular框架中？ui.router是否被弃用？

- Cabbagesocks

---

我会假设您的包含顺序有误。也许您的ui-router脚本标签是在包含angular.module调用的脚本之后的。在http://angular-ui.github.io/ui-router/site/#/api/ui.router上提供了设置的最小示例。 - Oliver Salzburg

不是的，我在我的主要_app.js_（其中包含anugular.module内容）之前添加了ui-router引用。 - Cabbagesocks

angular-ui-router.js 是否已正确加载？开发者工具中有没有任何信息？ - Oliver Salzburg

应该是这样的。为了确保，我尝试直接从以下URL加载脚本，但仍然出现相同的错误：<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> - Cabbagesocks

Answer 1

我太傻了。从这个链接找到了答案。在命令行上运行grunt时，它不仅配置用于构建和检查错误，还会运行测试（使用我尚未理解的karma）。

所以需要更改的是karma配置文件： <project root>/test/karma.conf.js 下面是需要添加的缩进行：

// list of files / patterns to load in the browser
    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-touch/angular-touch.js',
         'bower_components/angular-ui-router/release/angular-ui-router.js',
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],

- Cabbagesocks

Answer 2

点击此链接，您将获得使用UI路由器与Angular.js完整结构的工作方式。

Github存储库

- Soni Pandey