将模板路由从 Angular 应用程序切换到 Express答案

【问题标题】：Switch template routing to Express from Angular app将模板路由从 Angular 应用程序切换到 Express
【发布时间】：2016-02-17 11:49:39
【问题描述】：

我有一个应用程序，其中整个路由由 Angular 应用程序处理。例如，我有许多角度路线，如下所示：

$routeProvider
        .when("/users",{ controller: "userController", templateUrl: "partials/users.html" })

我有后端应用程序

router.get('/partials/:name', function(req, res, next) {    
   var name = req.params.name;
  res.render('admin/partials/' + name);
});

这个设置也使用了丑陋的 localhost/#/ hack。我想将所有路由切换到 Express 并在此过程中摆脱这种 hack。就需要修改的文件最少而言，我有哪些选择。

基本上，我想返回完整呈现的 HTML，其中包含从与其集成的特定端点的 API 路由生成的动态数据（可能使用 HTML 预处理器，如 Jade），并停止使用 Angular 来呈现模板，然后嵌入 API数据。

【问题讨论】：

标签： angularjs node.js express

【解决方案1】：

就需要修改的文件数量而言，我有哪些选择。

在不了解您的代码及其依赖关系的情况下很难做出决定。

但我建议仔细查看jade conditionals、jade includes 和jade extends。我使用 express 应用程序中的翡翠预处理器来准备翡翠模板，并且对该解决方案非常满意。

如果您生成的 HTML 页面没有任何进一步的动态内容，请考虑使用 express 的静态功能。

如果您必须对翡翠输出进行一些非常特殊的处理，您可以在存储/交付文件之前在回调中进行。

一个片段：

jade.compile('./templates/jade/remotecontrol.jade',
  {title:'Remotecontrol',
   copt:customoptions,
   key:project.key,
   objects:JSON.stringify(project.objects),
   buttons:{login:true},
   controls:{joystick:true},
   forms:{login:true}},
   {callback:storeTo,
     storeTo:__dirname+'/projects/'+project.key+'/stk/index.html',
     pretty:true})

对于像这样的模板（请识别“包含 ../../../”，因为路径必须与模板相对，而不是节点应用）

doctype html
html(lang="de")
  head
    title #{title}
    meta(charset="UTF-8")    
    include ../../../templates/jade/favicon.jade
    meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no")
    link(rel="stylesheet" type="text/css" href="styles/client.css")

    script.
      var objectsToInject=!{objects};
      var key='#{key}';

    ...

  body
    include ../../../templates/jade/loading.jade
    div.bodycontainer()
      button.beforebgr(name="fullscreen" id="fullscreen" class="fullscreen") Fullscreen
      if controls.joystick
        div.draggable(id="divjoystick" class="draggable ui-widget-content")
          include ../../../templates/jade/joystickbase-svg.jade
          include ../../../templates/jade/joystick-svg.jade

      ...

      - var scriptname="'libs/js/remotecontrol.js'"
      include ../../../templates/jade/loadscript.jade

【讨论】：