Node.js 和 expressjs 路由到另一个文件夹答案

【问题标题】：Node.js and expressjs routing to another folderNode.js 和 expressjs 路由到另一个文件夹
【发布时间】：2016-08-08 22:07:56
【问题描述】：

我需要关于使用 ui.router 进行路由的帮助。

我的文件夹结构如下：

在我的app.js 下javascripts 看起来是这样的：

var app = angular.module('testing', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '/home.html'
    })
    .state('client_form', {
        url: '/request',
        templateUrl: '/client.html',
        controller: 'MainCtrl'
    });

  $urlRouterProvider.otherwise('home');
}]);

我的index.ejs 看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
        <script src="/javascripts/app.js"></script>
    </head>

    <body ng-app="testing">

        <div class="col-md-6 col-md-offset-3">
            <ui-view></ui-view>
        </div>

    </body>
</html>

home.ejs:

<div class="page-header text-center" style="font-size:45px">
  Hacker List
</div>

<div class="text-center">
    <a href="worker.html">
        <button type="submit" class="btn btn-primary btnBig">Worker</button>
    </a>

    <br />

    <a href="Client.html">
        <button type="submit" class="btn btn-primary btnBig">Client</button>
    </a>
</div>

当我执行npm start 并访问该网站时，我得到一个无限循环，找不到home.html。

如果我使用<script type="text/ng-template" id="/home.html">HOME_CODE_HERE</script> 将index.ejs 内联，我可以使home.ejs 中的代码出现；但是，我不想那样做。

我不知道如何解决这个问题。

【问题讨论】：

标签： javascript angularjs node.js express npm

【解决方案1】：

ui.router 是 AngularJS，而不是 NodeJS。 无限循环问题可能出在你的前端，而不是在 NodeJS 路由中。

出于 AngularJS 的问题，我想说 Express 路由在后端，所以在请求（来自 Angular、浏览器、链接、重定向等）之后，工作所需的职责和配置在 NodeJS + Express + EJS。

假设您向/index.html 提出请求。一旦请求进入后端，NodeJS 将假设如何处理它。

所以，为了确保您在 NodeJS 中没有问题，请检查您的 app.js（在节点中使用 - 可能在您项目的根目录中）。它的路由配置可能与此类似：

var express = require('express');

var app = express();

// EJS template config
app.set('views','./views');
app.set('view engine','ejs');

app.use(bodyParser.urlencoded({ extended: true })); //support x-www-form-urlencoded
app.use(bodyParser.json());

// This is your routes
app.get('/', function(req, res) {
  // Your code for index
  res.render('views/index', { param : "This is a EJS test" });
});

app.get('/index.html', function(req, res) {
  // Your code for index
  res.render('views/index', { param : "This is a EJS test" });
});

app.get('/anotherPage.html', function(req, res) {
  // Your code for another page: can include validations here
  res.render('views/anotherPage', { param : "This is a EJS test" });
});

现在你可以在 NodeJS 中设置你的路由，然后你可以设置你的 EJS 文件。您的home.ejs 可以完全相同。 index.ejs 文件会有点不同。也许你可以这样写（出于测试目的，我从其中删除了 AngularJS）：

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        This is a parameter from the back-end: <%= param %>
        This is the index of EJS template. Below the snipped inserted:
        <div class="col-md-6 col-md-offset-3">
               <% include home.ejs %>
        </div>

    </body>
</html>

在 Express github 页面中有一些关于路由和 EJS 的好例子： https://github.com/expressjs/express/tree/master/examples

我认为消除 NodeJS 的问题可以帮助您解决似乎存在于 AngularJS 中的问题。

希望对你有所帮助。

【讨论】：