javascript - AngularJS ngRoute 抛出未捕获错误 : [$injector:modulerr]

标签 javascript angularjs

嗨,我开始使用 AngularJS v1.4.7 和 Angular-Route v1.5.0 来开发 Spa。

我的项目中的结构是:

- static
-- js
---- libs
------ angular.min.js
------ angular-route.min.js
---- app.js

- web
-- views
----- ... my views ...
-- index.html

我在浏览器控制台中收到此错误:

Uncaught Error: [$injector:modulerr] 

我的索引:

<!DOCTYPE html>

<html ng-app="app">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

    <link rel="stylesheet" href="../static/bootstrap-3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../static/css/app.css" />

    <title>
        JM2
    </title>

    <script type="text/javascript" src="../static/js/libs/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap-3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../static/js/libs/angular.min.js"></script>
    <script type="text/javascript" src="../static/js/libs/angular-route.min.js"></script>

    <script type="text/javascript" src="../static/js/app.js"></script>
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" 
                    class="navbar-toggle collapsed"
                    data-toggle="collapse" 
                    data-target="#navbar"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    JM2
                </a>
            </div>

            <div class="collapse navbar-collapse"
                id="navbar">
                <ul class="nav navbar-nav">
                    <li role="presentation">
                        <a href="#">
                            Home
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#builds">
                            Builds
                        </a>
                    </li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation">
                        <a href="#admin">
                            Admin
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div ng-view></div>
    </div>
</body>

</html>

我的app.js:

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider'], function($routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'homeController'
    })
    .when('/builds', {
        templateUrl: 'views/builds.html',
        controller: 'buildsController'
    })
    .when('/admin', {
        templateUrl: 'views/admin.html',
        controller: 'adminController'
    })
    .otherwise({
        redirectTo: '/'
    });

});

app.controller('homeController', function($scope) {

});

app.controller('buildsController', function($scope) {

});

app.controller('adminController', function($scope) {

});

为什么我会出现这个错误?我读过一些问题,你说的是导入 Angular 路由的问题,但我已经导入了。

提前非常感谢您。

最佳答案

提到的依赖关系不正确。您需要传递一个数组,其中依赖项名称作为字符串,函数作为数组中的最后一个元素,并且依赖项的顺序相同。

更改 app.config(['$routeProvider'], function($routeProvider) {

app.config(['$routeProvider', function($routeProvider) {
//                          ^          Removed ]

...
...

}]); // <----- Add ] here

关于javascript - AngularJS ngRoute 抛出未捕获错误 : [$injector:modulerr],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33186848/

相关文章:

javascript - 简单的VueJS问题(在mounted中设置$data)

javascript - 重复对象时如何获取 ng-repeat 中元素的 $index?

angularjs - 定义 Angular 应用程序有什么好处?

javascript - 如何在 $q.all 返回之前运行最后一段代码?

javascript - 如何访问此 Javascript 对象中的第二项?

javascript - 无法读取未定义的属性 'kind'

javascript - 如何在onclick函数之外访问数据

javascript - 返回 false 后确认对话框不起作用

javascript - 为什么它在数组之前显示未定义?

angularjs - 防止 IE 缓存 AngularJS/Restangular