Question

我有点困惑。目前我正在创建MEAN应用程序。我想知道将expressJS和Angular2一起使用的正确方法是什么？我真的需要后端的视图引擎吗？

目前我的项目路由器正在重定向到index.hbs（我正在使用把手视图引擎）：

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

然后index.hbs正在加载angular2：

<my-app>Loading...</my-app>

它正在工作，但我想知道我是否真的需要index.hbs文件？创建具有自己的index.html和后端的单独前端是否更好，只负责响应HTTP请求（没有视图引擎）？

感谢您的澄清

Answer 1

如果您使用Angular作为前端，则不需要像把手或ej那样的视图引擎。

Angular用于构建单页应用程序（SPA）。这意味着，您可以根据请求将整个应用程序从后端传送到客户端。然后，SPA就会到达后端以获取动态数据。

在像把手这样的视图引擎上，每次页面更改都会有页面请求。

Answer 2

你不应该使用Angular inside express js。你可以把两者分开。

如果你在车把内使用Angular，那么对于每个渲染，它将再次生成页面，这不是Angular的目的。

你可以将后端与棱角分开

后端方面你可以实现api 例如：对于一个模块

var express = require('express');
var router = express.Router();
var request = require('request');

router.indexRequest = function (req, res, next) {
    ... your implementation 
    res.status(response.statusCode).send(responseObject);
}
module.exports = function (app) {
app.use('/', router.indexRequest);}

Answer 3

“我真的需要后端的视图引擎吗？”

简短回答是：是。

任何严肃的Web应用程序都需要查看引擎。没有视图引擎，就无法实现服务器端渲染。由于服务器端呈现（SSR）和单页应用程序（SPA）对于良好的Web应用程序都是必需的，因此应同时使用视图引擎和前端框架（AngularJS，React等）。

例如，如果要在用户未登录时显示“登录|注册”，并在用户登录时显示用户名信息。如果没有服务器端呈现，则必须向服务器发送1个Ajax请求并呈现根据Ajax响应的页面 - Ajax请求将花费一些时间，相应的页面区域将为空，直到收到响应。这肯定不是用户友好的行为。

此外，在一个页面中，如果要在用户角色为X时显示区域A，B，C，D，并在用户角色为Y时显示区域B，D，E，F，并显示...服务器端渲染，这将是一场噩梦 - 在收到带有用户角色的Ajax响应之前，不会决定最终的页面结构。

当然，如果您只需要“学习AngularJS”，则可以忽略视图引擎。但是，如果您正在开发产品，或者想要了解严肃的Web应用程序的外观，那么您确实需要查看引擎。我相信这就是Udemy在他们的课程中包含视图引擎的原因。

如果服务器端呈现与单页应用程序一起使用，为了防止这些服务器呈现内容破坏SPA应用程序逻辑，您可以在脚本元素中呈现数据。这是一个简单的例子：

<script type="text/javascript">
  window.userRoles = {= userRolesVar =} // {= =} is view engine tag and would be replaced by corresponding data during render.
</script>

通过这种方式，userRoles数据在一开始就被返回，并可由SPA框架（如AngularJS）使用。不需要Ajax请求，这样的服务器呈现逻辑不会影响任何SPA代码。

@Ma Kobi对于AngularJS SPA应用程序，您就是“整个Web应用程序从后端传递到客户端”。但是，应将一些服务器呈现的数据（用户角色等）与应用程序一起发送给客户端。

此外，使用视图引擎并不意味着您必须为每个页面更改发送HTTP请求。在SPA运行之后，除了初始服务器呈现的数据（上面的示例）之外，它与服务器端呈现无关。

@Gourav Soni您可以将AngularJS与Handlebar一起使用，每次重新呈现页面时都不会重新加载页面。从后端分离前端是正确的设计，但这并不意味着应该丢弃视图引擎。

expressjs和angular2之间的通信

3 个答案: