Question

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

感谢您的帮助！

应用程序/ 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);

应用程序/公共/ 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>

应用程序/公共/ 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!';
});

应用程序/公共/ JS / app.routes.js

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

.config(function($routeProvider) {

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

});

应用程序/公共/视图/页/ home.html的

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

Answer 1

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

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

AngularJS ngRoute路由不正确地注入我的页面？

1 个答案: