Question

我需要使用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进入网站时，我发现它无法找到home.ejs。

如果我使用index.ejs将内容<script type="text/ng-template" id="/home.html">HOME_CODE_HERE</script>内联到while，我可以显示foreach中的代码。但是，我不想这样做。

我不确定如何解决这个问题。

Answer 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中似乎存在的问题。

希望它有所帮助。

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

1 个答案: