AngularJS ngRoute路由无法正确注入我的页面？

Question

I am trying to inject a page in a single page application using ng-view. 我正在尝试使用ng-view在单页应用程序中注入页面。 When I navigate to localhost:1337/home or localhost:1337/#/home, views/pages/home.html is not being properly injected, as it should be. 当我导航到localhost：1337 / home或localhost：1337 /＃/ home时，不能正确注入views / pages / home.html，应该这样做。 Here is the code for starting my nodeJS server, followed by the front end code that is not working as intended for me. 这是用于启动我的nodeJS服务器的代码，其后是前端代码，该代码无法正常工作。 :( :(

Thanks for any help! 谢谢你的帮助！

app/server.js 应用程序/ 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 应用程序/公/ 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 应用程序/公/ 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 应用程序/公/ 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 应用程序/公/视图/页/ home.html做为

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

Answer 1

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

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

AngularJS ngRoute路由无法正确注入我的页面？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-19 06:31:01

AngularJS ngRoute路由无法正确注入我的页面？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-19 06:31:01

解决方案1
1 已采纳 2015-07-19 06:31:01