使用用户界面视图导致无法实例模块ui.router [英] using ui-view lead to Failed to instantiate module ui.router
本文介绍了使用用户界面视图导致无法实例模块ui.router的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我学习Angularjs和我试图结构本 plunker
在不同的文件和使用的用户界面视图
I'm learning Angularjs and I am trying to structure this plunker over different files and using ui-view.
因此，这里是我的 app.js
So here is my app.js
'use strict';
angular.module('Main', []);
angular.module('plunker', ['angularCharts', 'Main', 'ui.router']);
angular.module('plunker').config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '',
templateUrl: 'main.html',
})
$urlRouterProvider.otherwise('app')
});
我的 index.html的与用户界面视图
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-charts</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.2" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script>
<script data-require="d3@*" data-semver="3.3.11" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
我的控制器
'use strict';
angular.module('Main').controller('MainCntrl', [
function MainCtrl($scope) {
...
}]);
但是，当我跑我的项目，我得到这个错误在控制台日志：
But when I run my project, I am getting this error in the console log:
Uncaught Error: [$injector:modulerr] Failed to instantiate module plunker due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.2/$injector/nomod?p0=ui.router
at https://code.angularjs.org/1.2.2/angular.js:78:12
at https://code.angularjs.org/1.2.2/angular.js:1522:17
at ensure (https://code.angularjs.org/1.2.2/angular.js:1447:38)
at module (https://code.angularjs.org/1.2.2/angular.js:1520:14)
at https://code.angularjs.org/1.2.2/angular.js:3544:22
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.2/angular.js:300:11)
at loadModules (https://code.angularjs.org/1.2.2/angular.js:3538:5)
at https://code.angularjs.org/1.2.2/angular.js:3545:40
at Array.forEach (native)
http://errors.angularjs.org/1.2.2/$injector/modulerr?p0=ui.router&p1=Error%…F1.2.2%2Fangular.js%3A3545%3A40%0A%20%20%20%20at%20Array.forEach%20(native)
at https://code.angularjs.org/1.2.2/angular.js:78:12
at https://code.angularjs.org/1.2.2/angular.js:3572:15
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.2/angular.js:300:11)
at loadModules (https://code.angularjs.org/1.2.2/angular.js:3538:5)
at https://code.angularjs.org/1.2.2/angular.js:3545:40
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.2/angular.js:300:11)
at loadModules (https://code.angularjs.org/1.2.2/angular.js:3538:5)
at createInjector (https://code.angularjs.org/1.2.2/angular.js:3478:11)
http://errors.angularjs.org/1.2.2/$injector/modulerr?p0=plunker&p1=Error%3A…ector%20(https%3A%2F%2Fcode.angularjs.org%2F1.2.2%2Fangular.js%3A3478%3A11)
我是什么失踪？
推荐答案
的为文档 ui.router 规定，它必须被注入在应用程序的依赖关系：
The documentation for ui.router states that it must be injected as a dependency in the application:
angular.module('plunker', ['angularCharts', 'Main', 'ui.router']);
您还需要正确地重构你的路由配置：
You also need to refactor your route configuration properly:
angular.module('plunker').config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
// The url needs to be defined as a directory
url: '/',
templateUrl: 'main.html',
})
// Redirect to the '/app' route.
$urlRouterProvider.otherwise('/app')
});
这假定您已经包括角-UI-router.js 作为你的索引页的脚本。
This assumes you have included angular-ui-router.js as a script in your index page.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.17/angular-ui-router.js"></script>
这篇关于使用用户界面视图导致无法实例模块ui.router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
