AngularJS ngRoute路由不能正確注入我的頁面？

我正在嘗試使用ng-view在單個頁面應用程序中注入頁面。當我導航到localhost：1337/home或localhost：1337 /＃/ home時，views/pages/home.html沒有正確注入，因爲它應該是。這裏是啓動我的nodeJS服務器的代碼，接下來是前端代碼，它不能按我的意圖工作。 :(AngularJS ngRoute路由不能正確注入我的頁面？

感謝您的幫助！

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

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

});

應用程序/公/視圖/頁/ home.html的

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

來源

2015-07-19 David Stampher

添加 'routerRoutes' 模塊 'testApp' 模塊的依賴關係：

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

來源

2015-07-19 06:31:01 monkey

感謝嗨這麼多猴子，我正在閱讀一本書，由於某種原因，這沒有提到，這對於試圖學習的人來說真的很煩人：\但這解決了問題！：D將在3分鐘內標記爲答案 –

AngularJS ngRoute路由不能正確注入我的頁面？

回答

相關問題