Question

我正在尝试使用nodejs提供angularjs页面。

如果我只是用浏览器打开它，index.html会起作用： -

的index.html

<html lang="en" ng-app="ex1">
<head>
    <meta charset="UTF-8">
    <title>ang-ex1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
</head>
<body>

    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="#AddNewOrder"> Add New Order </a></li>
                <li><a href="#ShowOrders"> Show Order </a></li>
            </ul>
        </div>

        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>

<script>
var app = angular.module('ex1', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/AddNewOrder', {
            templateUrl: 'templates/add_order.html',
            controller: 'AddOrderController'
        }).
        when('/ShowOrders', {
            templateUrl: 'templates/show_orders.html',
            controller: 'ShowOrderController'
        }).
        otherwise({
            redirectTo: '/AddNewOrder'
        });
}]);
app.run(['$rootScope', function($rootScope){
}]);
app.controller('AddOrderController', ['$scope', function($scope){
    $scope.message = 'Add Order Scope'; 
}]);
app.controller('ShowOrderController', ['$scope', function($scope){
    $scope.message = 'Show Order Scope';    
}]);
</script>
</body>
</html>

模板/ add_order.html

 <h2>Add New Order</h2>

 {{ message }}

模板/ show_orders.html

 <h2>Show Orders</h2>

 {{ message }}

我正在尝试使用以下nodejs服务器来提供页面

server.js

/*jshint node:true*/
/*jshint esnext:true*/
'use strict';

var koa = require('koa')();
var router = require('koa-router')();
var views = require('co-views');
var render = views('.', {map: {html: 'swig'}});

router.get('/', function *(next) {
    this.body = yield render('index');
});

koa.use(router.routes());

koa.listen(8080);

页面加载但点击链接不会加载我的angularjs模板。

如何修复nodejs路由以使其正常工作？

Answer 1

ngView使用客户端路由，因此如果index.html正常加载，则Node.js不是您的问题 - 它是一个Angular问题。

您的网址似乎格式不正确。尝试＆＃34;＃/ AddNewOrder＆＃34;和＆＃34;＃/ ShowOrders＆＃34;在你的hrefs。

Answer 2

当您加载链接http://localhost:80/templates/add_order.html（或您正在使用的任何端口）时，您是否获得了模板的原始来源？是这样，那么它不是服务器端的koa问题。如果你什么都没得到，那就是koa问题。

我没有使用koa框架，但看起来你没有将render与routes事物相关联，我认为这是必需的为koa提供所有静态文件。

用节点提供angularjs页面

2 个答案: