Javascript NgRoute未加载（模块错误）

我要喝苏格兰威士忌了。io的刻薄机器书，我快喝完了。问题是我无法让Angular代码正确运行——即使我从他们的Github复制代码。每当我在localhost上打开我的应用程序时，ngRoute都无法正确加载（或被注入或其他）

这是我的密码：

App.js

angular.module('userApp', ['ngAnimate', 'app.routes', 'authService', 'mainCtrl', 'userCtrl', 'userService'])
]);

angular.module('app.routes', ['ngRoute'])

.config(function($routeProvider, $locationProvider) {

$routeProvider
//home page route
.when('/', {
    templateUrl : 'app/views/pages/home.html'
})

//route for the login page
.when('/login', {
    templateUrl : 'app/views/pages/login.html',
    controller : 'mainController',
    controllerAs : 'login'
});

//get rid of the hash in the URL (url prettification)

$locationProvider.html5Mode(true);

});

angular.module('mainCtrl', [])

.controller('mainController', function($rootScope, $location, Auth) {
var vm = this;

//get user info if logged in
vm.loggedIn = Auth.isLoggedIn();

//check to see if user is logged in ON EVERY REQUEST

$rootScope.$on('$routeChangeStart', function() {
    vm.loggedIn = Auth.isLoggedIn();

    //get user information on route change

    Auth.getUser()
        .success(function(data) {
            vm.user = data;
        });
});
//this function handles the login form
vm.doLogin = function() {
    vm.processing = true;
    //call the Auth.login() function
    Auth.login(vm.loginData.userName, vm.loginData.password)
        .success(function(data) {
            vm.processing = false;
            //if user is logged in, redirect to user page
            $location.path('/users');
        });
};

//function to handle logging out

vm.doLogout = function() {
    Auth.logout();
    //reset ALL user info
    vm.user = {};
    $location.path('/login');
};
});

应用程序路径

angular.module('userApp', ['ngAnimate', 'app.routes', 'authService', 'mainCtrl', 'userCtrl', 'userService'])
]);

angular.module('app.routes', ['ngRoute'])

.config(function($routeProvider, $locationProvider) {

$routeProvider
//home page route
.when('/', {
    templateUrl : 'app/views/pages/home.html'
})

//route for the login page
.when('/login', {
    templateUrl : 'app/views/pages/login.html',
    controller : 'mainController',
    controllerAs : 'login'
});

//get rid of the hash in the URL (url prettification)

$locationProvider.html5Mode(true);

});

angular.module('mainCtrl', [])

.controller('mainController', function($rootScope, $location, Auth) {
var vm = this;

//get user info if logged in
vm.loggedIn = Auth.isLoggedIn();

//check to see if user is logged in ON EVERY REQUEST

$rootScope.$on('$routeChangeStart', function() {
    vm.loggedIn = Auth.isLoggedIn();

    //get user information on route change

    Auth.getUser()
        .success(function(data) {
            vm.user = data;
        });
});
//this function handles the login form
vm.doLogin = function() {
    vm.processing = true;
    //call the Auth.login() function
    Auth.login(vm.loginData.userName, vm.loginData.password)
        .success(function(data) {
            vm.processing = false;
            //if user is logged in, redirect to user page
            $location.path('/users');
        });
};

//function to handle logging out

vm.doLogout = function() {
    Auth.logout();
    //reset ALL user info
    vm.user = {};
    $location.path('/login');
};
});

mainCtrl.js

angular.module('userApp', ['ngAnimate', 'app.routes', 'authService', 'mainCtrl', 'userCtrl', 'userService'])
]);

angular.module('app.routes', ['ngRoute'])

.config(function($routeProvider, $locationProvider) {

$routeProvider
//home page route
.when('/', {
    templateUrl : 'app/views/pages/home.html'
})

//route for the login page
.when('/login', {
    templateUrl : 'app/views/pages/login.html',
    controller : 'mainController',
    controllerAs : 'login'
});

//get rid of the hash in the URL (url prettification)

$locationProvider.html5Mode(true);

});

angular.module('mainCtrl', [])

.controller('mainController', function($rootScope, $location, Auth) {
var vm = this;

//get user info if logged in
vm.loggedIn = Auth.isLoggedIn();

//check to see if user is logged in ON EVERY REQUEST

$rootScope.$on('$routeChangeStart', function() {
    vm.loggedIn = Auth.isLoggedIn();

    //get user information on route change

    Auth.getUser()
        .success(function(data) {
            vm.user = data;
        });
});
//this function handles the login form
vm.doLogin = function() {
    vm.processing = true;
    //call the Auth.login() function
    Auth.login(vm.loginData.userName, vm.loginData.password)
        .success(function(data) {
            vm.processing = false;
            //if user is logged in, redirect to user page
            $location.path('/users');
        });
};

//function to handle logging out

vm.doLogout = function() {
    Auth.logout();
    //reset ALL user info
    vm.user = {};
    $location.path('/login');
};
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User CRM</title>

<!-- FOR ANGULAR ROUTING -->
<base href="/">

<!-- CSS  -->
<!-- load bootstrap from CDN and custom CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.1/paper/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>

<!-- controllers -->
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/userCtrl.js"></script>

<!-- services -->
<script src="app/services/authService.js"></script>
<script src="app/services/userService.js"></script>

<!-- main Angular app files -->
<script src="app/app.routes.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">

<!-- NAVBAR -->
<header>
<div class="navbar navbar-inverse" ng-if="main.loggedIn">
<div class="container">
    <div class="navbar-header">
        <a href="/" class="navbar-brand"><span class="glyphicon glyphicon-fire text-danger"></span> User CRM</a>
    </div>  
    <ul class="nav navbar-nav">
        <li><a href="/users"><span class="glyphicon glyphicon-user"></span> Users</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li ng-if="!main.loggedIn"><a href="/login">Login</a></li>
        <li ng-if="main.loggedIn" class="navbar-text">Hello {{ main.user.username }}!</li>
        <li ng-if="main.loggedIn"><a href="#" ng-click="main.doLogout()">Logout</a></li>
    </ul>
</div>
</div>
</header>

<main class="container">
<!-- ANGULAR VIEWS -->
<div ng-view></div>
</main>

</body>
</html>

---

在你的index.html=>

中，从app.js中的userApp模块的依赖项中删除“userCtrl”。您可能已经创建了该文件，但可能没有任何内容。这应该可以解决问题。
我遇到了同样的问题，app.js中的“userService”依赖项没有加载到index.html文件中

要解决此问题，请在authService.js文件下面的index.html文件中添加userService.js文件，如下所示：

<!-- services -->
<script src="app/services/authService.js"></script>
<script src="app/services/userService.js"></script>


您遇到的错误是什么？您正在做什么来创建错误？您的服务器上是否正确设置了html5模式？只是通过终端在nodemon上运行它。现在更新时出现准确错误。我会尝试注释HTML5模式行，如果它在节点服务器上设置不正确，可能会导致问题。另外，当您在浏览器控制台中单击该错误时，angular（角度）页面会显示什么？说明由于某些异常导致模块无法加载时，会发生此错误。上面的错误消息应该提供额外的上下文。使用AngularJS 1.2.0及更高版本中的ngRoute，ngRoute已移动到自己的模块中。如果在升级到1.2.x或更高版本后出现此错误，请确保已安装ngRoute。因此，此错误表示您的模块userApp的依赖项存在问题。确保您注入到模块中的所有东西都作为另一个模块存在。您已经显示了mainCtrl和app.routes，但其他路由是否存在？如果你在复制代码，你可以复制angular.module依赖项列表，但还没有复制实际的模块。这不是必需的。你能解释为什么不吗？它没有任何作用，只是一些人使用的命名约定。它对应用程序处理模块依赖项的方式没有实际影响。这将解决此问题。