gpt4 book ai didi

javascript - 使用 ui-view 导致 Failed to instantiate module ui.router

转载 作者:行者123 更新时间:2023-11-30 12:06:10 25 4
gpt4 key购买 nike

我正在学习 Angularjs,我正在尝试构建这个 plunker在不同的文件上并使用 ui-view

这是我的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 带有 ui-view

<!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>

我的 Controller

'use strict';

angular.module('Main').controller('MainCntrl', [

function MainCtrl($scope) {
...
}]);

但是当我运行我的项目时,我在控制台日志中收到此错误:

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)

我错过了什么?

最佳答案

documentation对于 ui.router 声明它必须作为应用程序中的依赖项注入(inject):

angular.module('plunker', ['angularCharts', 'Main', 'ui.router']);

您还需要正确重构您的路由配置:

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')
});

这假设您已将 angular-ui-router.js 作为脚本包含在您的索引页面中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.17/angular-ui-router.js"></script>

关于javascript - 使用 ui-view 导致 Failed to instantiate module ui.router,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35159775/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com