Question

我正在浏览Scotch.io的MEAN机器书，我差不多完成了。问题是我不能让我的Angular代码正确运行 - 即使我真的从他们的Github复制代码。每当我在localhost上打开我的应用程序时，ngRoute无法正确加载（或注入或其他）。

这是我的代码：

App.js

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

App.routes

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);

});

mainCtrl.js

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>

这是我收到的确切错误：

https://docs.angularjs.org/error/$injector/modulerr?p0=userApp&p1=Error: [$injector:nomod] http://errors.angularjs.org/1.3.8/$injector/nomod?p0=userApp
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:21:366
    at a (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:21:7)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:21:250
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:35:424
    at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:7:302)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:35:202)
    at Ob (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:38:435)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:350

Answer 1

删除＆＃39; userCtrl＆＃39;来自app.js中userApp模块的依赖项您可能已创建该文件，但可能没有任何内容。这应该可以解决问题。

Answer 2

我遇到了同样的问题，＆＃39; userService＆＃39; app.js中的依赖项未加载到index.html文件中。

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

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

Answer 3

在 index.html =＆gt;中<body ng-app="userApp"所以您需要添加 mainCtrl.js ，如下所示：

angular.module('userApp.mainCtrl', [])

您还需要以相同的方式执行 userCtrl.js，authService.js，userService.js和app.routes.js 。

现在，您的 App.js 最终可能如下所示：

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

修改

我在plunker中尝试您的代码，但评论<base href="/">并更改

$locationProvider.html5Mode({ enabled: true, requireBase: false });

因为它在plunker工作。在这里（http://embed.plnkr.co/BHyE6iWDN5uXqiitaMDU/preview）您可以在控制台日志中以相同的错误访问它。这似乎是由于失败加载了一些依赖，我在某个文件中留空了。

这里（http://embed.plnkr.co/eD4TYgMNq4MDHQZ7p3n0/preview）你可以看到错误的另一个plunker已经消失，所有依赖成功加载。确保你有正确的拼写错误＆amp;不要错过依赖。

NgRoute未加载（modulerr错误）

3 个答案: