简体   繁体   English

AngularJS ngRoute引发未捕获的错误:[$ injector:modulerr]

[英]AngularJS ngRoute throwing Uncaught Error: [$injector:modulerr]

Hi i start to use angularjs v1.4.7 and angular-route v1.5.0 to develop a spa. 嗨,我开始使用angularjs v1.4.7和angular-route v1.5.0开发一个spa。

The structure on in my project is: 我项目中的结构为:

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

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

Im getting this error in the browser console: 我在浏览器控制台中收到此错误:

Uncaught Error: [$injector:modulerr] 

My index: 我的索引:

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

My app.js: 我的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) {

});

Why am I having this error? 为什么会出现此错误? I had read some questions and all you say is the problem of import of angular-route but I have imported. 我已经阅读了一些问题,您只说的是角度路线的进口问题,但我已经进口了。

Thank you very much in advance. 提前非常感谢您。

The dependencies mentioned are incorrect. 提到的依赖关系不正确。 You need to pass an array with the name of the dependencies as strings and the function as the last element in array with the dependencies in the same sequence. 您需要将依赖项的名称作为字符串传递给数组,并将函数作为数组中的最后一个元素传递,且依赖项的顺序相同。

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

to

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

...
...

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM