AngularJS ngRoute引發未捕獲的錯誤：[$ injector：modulerr]

Question

嗨，我開始使用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) {

});

為什么會出現此錯誤？ 我已經閱讀了一些問題，您只說的是角度路線的進口問題，但我已經進口了。

提前非常感謝您。

Answer 1

提到的依賴關系不正確。 您需要將依賴項的名稱作為字符串傳遞給數組，並將函數作為數組中的最后一個元素傳遞，且依賴項的順序相同。

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

至

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

...
...

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

AngularJS ngRoute引發未捕獲的錯誤：[$ injector：modulerr]

問題描述

1 個解決方案

解決方案1
4 已采納 2015-10-17 12:56:42

AngularJS ngRoute引發未捕獲的錯誤：[$ injector：modulerr]

問題描述

1 個解決方案

解決方案1 4 已采納 2015-10-17 12:56:42

解決方案1
4 已采納 2015-10-17 12:56:42