AngularJS ngRoute 路由没有正确注入我的页面？答案

【问题标题】：AngularJS ngRoute routing not injecting my pages properly?AngularJS ngRoute 路由没有正确注入我的页面？
【发布时间】：2015-07-19 06:24:55
【问题描述】：

我正在尝试使用 ng-view 在单页应用程序中注入一个页面。当我导航到 localhost:1337/home 或 localhost:1337/#/home 时，views/pages/home.html 没有被正确注入，这是应该的。这是启动我的 nodeJS 服务器的代码，后面是无法按预期工作的前端代码。 :(

感谢您的帮助！

app/server.js

var express = require('express');
var app = express();
var path = require('path');

app.use(express.static(__dirname + '/public'));

app.use('*', function(req, res) {
    res.sendFile(path.join(__dirname,'/public/views/index.html'));
});

app.listen(1337);

app/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"
    <!-- Set the base path for angular routing -->
    <base href="/">

    <!-- Add bootstrap and font awesome to make the site look pretty. -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <!-- Add angular and angular-routes via CDN. -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>

    <!-- Load our custom angular app and app routes. -->
    <script src="js/app.js"></script>
    <script src="js/app.routes.js"></script>

</head>

<body class="container" ng-app="testApp" ng-controller="mainController as main">

    <header>
        <navbar>
            <ul>
                <li><a href="/home">Home</a></li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </navbar>
    </header>

    <!-- Our pages will be injected here by AngularJS -->
    <main>
        <div ng-view></div>
    </main>

</body>

</html>

app/public/js/app.js

angular.module('testApp', [])

.controller('mainController', function() {
    var vm = this;
    vm.message = 'Main controller, testing.';
})

.controller('homeController', function () {
    var vm = this;
    vm.message = 'Welcome to the home page!';
});

app/public/js/app.routes.js

angular.module('routerRoutes', ['ngRoute'])

.config(function($routeProvider) {

$routeProvider
    .when('/home', {
        templateUrl: 'views/pages/home.html',
        controller: 'homeController',
        controllerAs: 'home'
    });

});

app/public/views/pages/home.html

<div>
    <h1>This is the home page! {{ home.message }}</h1>
</div>

【问题讨论】：

标签： javascript angularjs node.js

【解决方案1】：

添加“routerRoutes”模块作为“testApp”模块的依赖项：

angular.module('testApp', ['routerRoutes']);

【讨论】：

嗨，非常感谢猴子，我正在阅读一本书，由于某种原因没有提到这一点，这对于尝试学习的人来说真的很烦人：\但这解决了问题！ :D 将在 3 分钟内标记为答案