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

时间:2021-10-28 10:51:29

I keep getting this error:

我一直收到这个错误:

`Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it.

`错误:[$ injector:nomod]模块'ui.router'不可用!您要么错误拼写了模块名称,要么忘记加载它。

But I am pretty sure I have everything configured correctly

但我很确定我已正确配置所有内容

The project was created with Yeoman and uses Bower to manage dependencies, with Grunt to build everything.

该项目是由Yeoman创建的,使用Bower来管理依赖项,Grunt构建了所有项目。

The yeoman angular generator created the boilerplate with the basic ngRouter, so I installed ui.router with

yeoman角度生成器创建了带有基本ngRouter的样板,所以我安装了ui.router

bower install angular-ui-router --save

Angular Version

角度版本

1.2.16

Bower file

凉亭文件

The above line updated the bower.json file with this line in the dependencies list:

上面的行在依赖项列表中使用此行更新了bower.json文件:

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

app Module set up

app模块设置

I updated the app.js file with by adding the dependency on ui.route (in addition to various other dependencies) angular.module('app', ['ngRoute', ... 'ui.router'])

我更新了app.js文件,添加了对ui.route的依赖(除了各种其他依赖项)angular.module('app',['ngRoute',...'ui.router'])

index.html

的index.html

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

I have the above file in the above directory, I am positive it is there (I copied and pasted the path to avoid typos). I also tried the minified version with no difference.

我在上面的目录中有上面的文件,我很肯定它就在那里(我复制并粘贴路径以避免拼写错误)。我也尝试了缩小版本没有区别。

EDIT

编辑

I am very, very new to all of this (angular, bower, yeoman, etc) So I may very well be doing this all wrong, so could it be that I no longer need to include the ui.router dependency? I mean, has it been integrated to the core angular framework somehow? Is ui.router deprecated?

我对所有这些都非常非常新(角度,凉亭,自耕农等)所以我很可能这样做是错的,所以我不再需要包含ui.router依赖吗?我的意思是,它是否已经以某种方式集成到核心角度框架? ui.router被弃用了吗?

2 个解决方案

#1


5  

I'm dumb. Found the answer from this link. When running grunt on the cmd line, it is configured to not only build and check for errors, but run tests as well (using karma which I do not understand yet).

我笨从这个链接找到答案。当在cmd行上运行grunt时,它被配置为不仅构建和检查错误,而且还运行测试(使用我还不了解的业力)。

So what needed to change was the karma config file:

所以需要改变的是业力配置文件:

<project root>/test/karma.conf.js

/test/karma.conf.js

Below, the indented line was what I needed to add:

下面,缩进的行是我需要添加的:

// 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'
    ],

#2


0  

Go through with this link, you will get complete structure to work with angular.js using ui router

通过此链接,您将获得使用ui路由器处理angular.js的完整结构

Github Repository

Github存储库

#1


5  

I'm dumb. Found the answer from this link. When running grunt on the cmd line, it is configured to not only build and check for errors, but run tests as well (using karma which I do not understand yet).

我笨从这个链接找到答案。当在cmd行上运行grunt时,它被配置为不仅构建和检查错误,而且还运行测试(使用我还不了解的业力)。

So what needed to change was the karma config file:

所以需要改变的是业力配置文件:

<project root>/test/karma.conf.js

/test/karma.conf.js

Below, the indented line was what I needed to add:

下面,缩进的行是我需要添加的:

// 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'
    ],

#2


0  

Go through with this link, you will get complete structure to work with angular.js using ui router

通过此链接,您将获得使用ui路由器处理angular.js的完整结构

Github Repository

Github存储库