使用 ui-view 导致无法实例化模块 ui.router

我正在学习Angularjs，我正在尝试构建这个plunker在不同的文件上使用 UI-View。

所以这是我的应用程序.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')
});

我的索引.html具有 UI 视图

<!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) {
    ...
}]);

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

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的文档指出，它必须作为依赖项注入到应用程序中：

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>

相关内容

最新更新

热门标签：