Angular 和 Express 路由

Posted 2023-03-03

【中文标题】Angular 和 Express 路由

【英文标题】：Angular and Express routing

【发布时间】：2012-12-01 09:43:13

【问题描述】：

我经历过许多 Angular-express 种子，并大致了解了它们的工作原理。 我遇到的问题是：1). 我想使用 ejs-locals 进行模板化。 2). 如何正确配置服务器端和客户端的路由。而且，输入/about等URL时，不要产生错误：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');
;

视图文件夹包含index.ejs：

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

里面的views文件夹是一个partials文件夹： （观看次数/部分/）

index.ejs：

 <h1>Index</h1>

about.ejs：

<h1>About</h1>

【问题讨论】：

哇，我也有同样的问题。 Angular 网站没有很好地解释使用 Angular 的服务器端和客户端路由之间的关系。或者也许我没有很好地理解。无论如何，您的问题非常重要。

非常正确。我在这种情况下被困了一两天，我真的不喜欢玉语。向给出答案的人致敬！

【参考方案1】：

你可以试试这样的，

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

【参考方案2】：

我在使用玉和角时遇到了一些麻烦，这对我有用。

目录结构：

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

然后角度路线看起来像这样：

$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)

【参考方案3】：

将这些路由添加到您的快递服务器

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!!!");
;

这将确保 express 在向 partials/index 和 partials/about 发出请求时返回呈现的模板。

这里有一个要点：https://gist.github.com/4277025

【讨论】：

非常感谢您。你不明白我是多么欣赏这一点。

我不得不改变 res.render("partials/#filename");到 res.render("partials/" + 文件名);我在这里添加了一个简单的 javascript 示例：github.com/andr3w321/angularjs-ejs-partials

不错的收获！我在转换为 JS 时错过了 CoffeeScript 字符串插值。我已经更新了我的答案。

app.use(routes.index); 将隐藏 404 错误，但这在 Angular 中是一种常见的模式。我在Angular's routing hides 404 responses for nonexistent routes 询问过这个问题。

如果您将子目录添加到分组部分，这将中断

【参考方案4】：

我就是这样做的。我用的是 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');
        ]);
    
);

【讨论】：

我认为/partials/:name 只是意味着为您可能拥有的每个部分制作一条路线？不是/partials/:name 是* 的一些聪明版本，可以捕获部分内部的所有路线吗？如果它是一个捕获所有我正在努力使用它:)