Angular和Express路由

Question

我熟悉许多Angular-express种子项目，大致了解它们的工作原理。 我遇到的问题是：1）我想使用ejs-locals进行模板化。2）如何正确配置服务器端和客户端的路由。 以及，在输入URL（例如/about）时，不产生错误：cannot /get。

angular app.js包含：

// angular stuff

$routeprovider.when('/', {
 templateUrl: 'index',
 controller: IndexCtrl
});
$routeprovider.when('/about', {
 templateUrl: 'partials/about',
 controller: IndexCtrl
});

express app.js 包含以下内容：

app.get('/', routes.index);
app.get('/about', routes.about);

路由文件夹 包含 'index.js':

exports.index = function(req, res){
  res.render('index',{name:"Hello"});
};

exports.about = function (req, res) {
  res.render('partials/about');
};

Views文件夹 包含 index.ejs 文件：

<!--HTML head/navigation bar here-->
<div ng-view></div>

在 views 文件夹中有一个 partials 文件夹: (Views/partials/)

index.ejs:

 <h1>Index</h1>

about.ejs：

<h1>About</h1>

- ashley

---

哇，我几乎有完全相同的问题。Angular官网并没有很好地解释服务器端和客户端路由与Angular之间的关系。或者说，也许我没有理解得很好。不管怎样，你的问题是非常重要的。 - Evan Zamir

非常正确。我因这个问题卡了一两天，而且我真的不喜欢Jade语言。致敬那位提供答案的人！ - ashley

Answer 1

将这些路由添加到您的express服务器中

app.get('/partials/:filename', routes.partials);
app.use(routes.index);

那么在routes.js文件中

exports.partials = function(req, res){
  var filename = req.params.filename;
  if(!filename) return;  // might want to change this
  res.render("partials/" + filename );
};

exports.index = function(req, res){
  res.render('index', {message:"Hello!!!"});
};

这将确保在请求 partials/index 和 partials/about 时，express 返回渲染的模板。

这是一个代码片段：https://gist.github.com/4277025

- jaime

---

非常感谢你，伙计。你不知道我有多么感激这个。 - ashley

我不得不将res.render("partials/#{filename}");更改为res.render("partials/" + filename); 我在这里添加了一个工作的纯JavaScript示例：https://github.com/andr3w321/angularjs-ejs-partials - user1071182

太棒了！我在将代码转换为JS时错过了CoffeeScript的字符串插值。我已经更新了我的答案。 - jaime

app.use(routes.index);这样的写法可以隐藏404错误，但这在Angular中是一种常见的模式。我曾在Angular路由对不存在的路由隐藏了404响应中询问过此事。 - Dan Ross

如果您添加一个子目录来组合部分文件，这将会导致错误。 - Connor Leech

你应该从文件名中删除文件扩展名吗？我认为你不想调用 res.render('partials/some-example.html')。难道你不想要 res.render('partials/some-example') 吗？ - David Braun

Answer 2

这是我完成的方式。我使用Jade,但Ejs也很相似: app.js

// Routes
app.get('/', routes.index);
app.get('/partials/:name', routes.partials);

我的模板存储在 /views/partials 目录下。

app.set('views', __dirname + '/views');

现在客户端可以使用Angular的$routeProvider来加载部分内容：

/*global define */

define([
   'angular',
   'controllers/aController',
   'controllers/bController'],
   function (angular, aController, bController) {
    'use strict';

    return angular.module('controllers', [], ['$controllerProvider', '$routeProvider',
        function ($controllerProvider, $routeProvider) {
            $controllerProvider.register('AController', ['$scope', aController]);
            $controllerProvider.register('BController', ['$scope', bController]);
            // routes
            $routeProvider.when('/A', {templateUrl: 'partials/A', controller: aController});
            $routeProvider.when('/B', {templateUrl: 'partials/B', controller: bController});
            $routeProvider.otherwise({redirectTo: '/A'});
        }]);
    }
);

- asgoth

---

我猜 /partials/:name 只是表示为每个可能存在的部分视图创建一个路由？并不是说 /partials/:name 是某种聪明的 * 版本，可以捕获 partials 内所有的路由？如果它是一个 catch all，我很难使用它 :) - Jamie Hutber

Answer 3

我在使用jade和angular时遇到了一些问题，以下是解决方法。

目录结构：

public
  |-js
  |-css
  |-views
    |-main
      -main.jade
    |-auth
      -login.jade
server
  |-includes
    -layout.jade
  |-views
    -index.jade
server.js

然后在 server.js 中的路由配置中应该如下：

app.configure(function(){
    app.set('views', __dirname + '/server/views');
    app.set('view engine', 'jade');
})
// server side route for the partials files
app.get('/views/*', function(req, res){
    res.render('../../public/views/' + req.params);
})

// everything handled by this route
app.get('*', function(req, res){
    res.render('index');
})

那么Angular的路由大致如下：

$routeProvider.when('/', {
    templateUrl: '/views/main/main',    // gets main.jade from server
    controller: 'mainCtrl'
})

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

extends ../includes/layout

block main-content
    .navbar.navbar-inverse.navbar-fixed-top
        div(ng-include="'/views/account/navbar-login'")
    section.content
        div(ng-view)

- Connor Leech

Answer 4

你可以尝试这样做，

const path = require("path");

/* For serving static HTML files */
app.use(function(req, res, next) {
    res.sendFile(path.resolve(__dirname + '/dist/index.html'));
});

/* For ejs, jade/pug engines */
app.use(function(req, res, next) {
    res.render(path.join(__dirname, '/dist/index.pug'));
});

- Raghav Manikandan