Question

您好我开始使用angularjs v1.4.7和angular-route v1.5.0来开发水疗中心。

我项目中的结构是：

- 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 个答案: