Jade模板和angularjs的实际使用

Posted 2023-03-03

【中文标题】Jade模板和angularjs的实际使用

【英文标题】：Actual use of Jade template and angularjs

【发布时间】：2014-01-26 03:53:50

【问题描述】：

我正在使用 nodejs 和 express 构建一个网站。如何在页面中进行动态划分？玉是用来做这个的吗？如果不是怎么做？angularjs 是做什么用的？请帮助我在谷歌上搜索了很多，我无法弄清楚它们的用法。

【问题讨论】：

角度教程可能是一个更好的起点，因为您可能需要更具体才能在此处获得答案。 docs.angularjs.org/tutorial

【参考方案1】：

Jade 在服务器端 上创建浏览器中使用的html。浏览器向 web-server 执行请求，web-server 执行 Jade，Jade 将生成发送给浏览器的 html。这种服务器端内容生成在过去约 20 年中非常普遍，但在构建富互联网应用程序时它有相当多的缺点。这主要与性能和客户端状态跟踪有关。

AngularJS 是一个类似于 MVC/MVVM 的客户端框架，用于构建所谓的 Single Page Applications (SPA)，它允许您拥有完整的用户界面流程，所有内容生成和状态跟踪都在客户端完成。它甚至允许您构建离线应用程序。从开发人员的角度来看，这更像是构建一个客户端知道用户界面状态的桌面应用程序。从用户的角度来看，网站的响应会更加流畅和快捷，因为 UI 都是在本地生成的。

注意：SPA 确实不意味着您的网站中只能有一个页面。 这是一个技术术语，浏览器下载一个页面 (~/index.html)，其中包含完整或部分 Web 应用程序。从技术上讲，用户永远不会离开此页面，但内容（页面）会在此占位符页面中动态换入和换出。

向SPA 提供数据的最常见方式是通过RESTful 网络服务。 AngularJS 附带builtin support 用于 REST。

一些开发人员将服务器端内容生成技术与 AngularJS 结合起来，但实际上并没有真正的需要。

【讨论】：

很好奇为什么你会说“一些开发人员将服务器端内容生成技术与 AngularJS 相结合，但实际上并没有真正的需要”。我能立即想到的一个原因是 SEO。我知道谷歌有计划抓取 js 页面，但我很确定其他搜索引擎还没有实现这样的功能。另一个主要原因是速度和用户感知速度。立即在屏幕上显示某些内容应该是最重要的。

@TyroneMichael 这不是非黑即白； Angular 对 xml 站点地图没有多大帮助，而且 AFAIK 没有一个爬虫可以在不提供 SPA 的情况下处理它们 some pre-rendered html。在某些情况下，为客户端提供预渲染视图可能会更快，但通常这只会给管道增加一些不必要的复杂性。如果你让它缓存优化的模板并从 REST api 提供 (json) 数据，Angular 就处于最佳状态。

是的，我 100% 同意你的看法。它肯定会使事情复杂化。但是，如果您可以在 Angular 中使用 Jade，您可以使用 Node 为客户端提供预渲染的 html，并使用 Angular 重用您的模板。这就是最初把我带到这里的原因。因此，您的服务器和客户端可以重用模板，这大大简化了事情。

对于使用nodejs开发应用最好还是直接使用html和angular？

【参考方案2】：

Jade 在服务器端和客户端都用作模板引擎。是的，它可以动态更新页面，你只需要将你的jade模板编译成一个javascript函数（使用jade -c或类似的东西）。

是的，你可以使用 angular.js，但我认为在你的项目中没有必要使用两个模板引擎。建议只用玉，除非你知道自己在做什么。

【讨论】：

我使用玉来创建 angular.js 部分。我只需要它，因为 html 既丑陋又冗长。