AngularJS ngRoute routing not injecting my pages properly?

Question

I am trying to inject a page in a single page application using 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. Here is the code for starting my nodeJS server, followed by the front end code that is not working as intended for me. :(

Thanks for any help!

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>

Answer 1

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

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

AngularJS ngRoute routing not injecting my pages properly?

Question

1 answers

solution1
1 ACCPTED 2015-07-19 06:31:01

AngularJS ngRoute routing not injecting my pages properly?

Question

1 answers

solution1 1 ACCPTED 2015-07-19 06:31:01

solution1
1 ACCPTED 2015-07-19 06:31:01