启用路由时的 AngularJS 无法从 Express render() 解析视图参数答案

【问题标题】：AngularJS when routing is enabled cannot resolve view parameter from Express render()启用路由时的 AngularJS 无法从 Express render() 解析视图参数
【发布时间】：2015-05-17 08:19:38
【问题描述】：

我在我的 Node-Express-Anuglar 应用程序中使用 Hogan 模板引擎。因为我在 Hogan 模板中使用 Anguar，所以我更改了 Hogan 的分隔符：

app.js

app.locals.delimiters = '{% %}';
app.set('view engine', 'hjs');

因此我可以像这样显示视图参数（Angular 很常见）：

index.hjs

<!DOCTYPE html>
<html data-ng-app="app">
<head>
    <title>{% title %}</title>
</head>
<body ng-controller="TestController">
    From Angular model: {{model.testProperty}}

我在渲染函数中传递参数：

index.js 在路由目录中：

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Example title' });
});

在这种情况下，一切正常，因此 {% title %} 解析为 Example title 和 {{model.testProperty}} 解析为来自我的控制器的正确值。

在 Angular 端添加路由时出现问题：

module.config(['$routeProvider', '$locationProvider',
    function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });

        $routeProvider.
            when('/', {
                templateUrl: '../diary/diary.html',
                controller: 'TestController'
            }).
            when('/promoted', {
                templateUrl: '..diary/promoted-diary.html',
                controller: 'PromotedController'
            }).
            otherwise({
                redirectTo: '/'
            });         
    }]
);

因为变量{% title %} 被渲染为{% title %}（所以它没有被评估）。整个 Angular 的东西，例如。 {{ model.testProperty }} 像以前一样工作，所以它被正确地解析为来自控制器的值。

【问题讨论】：

标签： javascript angularjs node.js express hogan.js

【解决方案1】：

我认为你在这里错过了一个技巧。如果你研究一些流行的 MEAN 种子项目，如 MEAN.io 或 MEAN.JS，Express 被用作 REST 引擎，它在前端渲染、路由、数据绑定中为 AngularJS 提供 API。

所以我建议你从后端发送 JSON 数据：

router.get('/', function(req, res, next) {
  res.json('index', { title: 'Example title' });
});

使用 Angular ngResource 使用来自您的 API 的数据，并且无论如何您在前端都有路由器，它将处理视图身份验证和授权，显示逻辑。 AngularJS 有丰富的渲染和双向绑定功能，尝试使用它。如果您需要更详细的答案，请告诉我。

注意：您甚至可以使用纯 HTML 来执行此操作，而无需使用任何模板引擎。简单实现请看here

【讨论】：

这篇文章对我来说非常有用，所以我投了赞成票并考虑改变我的应用架构。但仍然不知道如何以问题描述的方式解决问题。
老实说，我不是专家，我也在学习。但是到目前为止我所阅读和理解的内容是，AngularJS 是为单页应用程序设计的，它可以有效地完成这项工作。试想一下您从 ExpressJS 呈现视图的情况，那么您是否认为它甚至需要使用 AngularJS 之类的重型前端框架，因为 JQuery 之类的小型任务轻型框架可以满足您的需求，甚至是普通的 Javascript。而 AngularJS 是为了解决不同的问题而开发的。因此，请逐案了解为什么、何时以及应该使用哪个框架。