已经在MEAN Stack中学习了angular,是否还需要学习express中的views和template engines
Is there any need of learning views and template engines in express when we have already learn angular in the MEAN Stack
我正在学习 MEAN Stack。我从学习Angular开始(从angular.io)现在我正在学习node.js和express.js
我的问题是,如果 MEAN Stack 中的前端有 angular 那么为什么会有 视图和模板引擎 在后端 express.js 中?它们是相互替代还是相互补充?这两者的作用和责任的界限是什么?
我期待有人帮助澄清我对平均堆栈中使用的这两种技术(表达观点和 angular)的作用的概念。
Express JS 是一个基于 nodejs http 模块的网络框架。而 Angular JS 是一个前端框架,它不依赖于 NodeJs 服务器 运行。从概念上讲,两者在路由等少数功能上是相似的,而实现是不同的
Angular 是一个成熟的前端框架,它有自己的模板制作方式,在您的 HTML 中使用 angular 特定标记。如果您使用 Angular 作为您的框架,您或多或少会受制于他们在应用程序的 Angular 部分中进行模板化的方式。
Angular 特点
- 这是一个用Javascript语言
编写的框架
- 管理模型状态
- 与其他 UI 工具集成
- 操纵DOM
- 允许编写自定义 HTML 代码
- 它适用于java脚本开发人员快速创建动态网页
NodeJS
- 它服务于网络
- 它是在 google chrome
中的 java 脚本引擎上构建的运行时
- 它可以被认为是一个轻量级的服务器,可以以更
的方式服务于客户端请求
- 比java更简单
- 它执行与数据库、网络套接字的通信操作,
中间件等
为什么我们使用 angular 作为 Tempting 而不是 Express/Node tempting Engine
服务器端呈现是在屏幕上显示信息的最常用方法。它的工作原理是将服务器中的 HTML 文件转换为浏览器可用的信息。
每当您访问网站时,您的浏览器都会向包含该网站内容的服务器发出请求。请求通常只需要几毫秒,但这最终取决于多种因素:
- 你的网速
- 有多少用户正在尝试访问该网站以及
- 网站的优化程度,仅举几例
请求处理完成后,您的浏览器会返回完全呈现的 HTML 并将其显示在屏幕上。如果您随后决定访问网站上的不同页面,您的浏览器将再次请求获取新信息。每次您访问您的浏览器没有缓存版本的页面时,都会发生这种情况。
即使新页面只有少数项目与当前页面不同也没关系,浏览器会请求整个新页面并从头开始重新呈现所有内容。
客户端呈现的工作原理
当开发人员谈论客户端呈现时,他们谈论的是使用 JavaScript 在浏览器中呈现内容。因此,您不是从 HTML 文档本身获取所有内容,而是获取带有 JavaScript 文件的基本 HTML 文档,该文件将使用浏览器呈现站点的其余部分.
这是一种相对较新的网站渲染方法,直到 JavaScript 图书馆开始将其纳入其开发风格后才真正流行起来。
在此处查看示例Pratical Example
基本上,Express 中的模板引擎主要用于显示 404 和其他服务器错误消息。我发现它们非常适合此类用例。使用模板引擎进行复杂的前端渲染是不好的做法。
为了回答你的问题,让我解释一下什么是angular以及express中的模板引擎是什么?
什么是 Angular?
Angular 是一个可以轻松构建 Web 应用程序的平台。 Angular 结合声明性模板、依赖项注入、端到端工具和集成最佳实践来解决开发挑战。 Angular 使开发人员能够构建可在 Web、移动设备或桌面上运行的应用程序。
什么是模板引擎?
模板引擎使您能够在应用程序中使用静态模板文件。在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为 HTML 文件发送给客户端。这种方法可以更轻松地设计 HTML 页面。
一些与 Express 一起工作的流行模板引擎是 Pug、Mustache 和 EJS。 Express 应用程序生成器默认使用 Jade,但它也支持其他几种。
所以,
Angular 是一个内置模板组件的框架。您可以使用它来创建单页 Web 应用程序,这意味着 DOM 修改发生在客户端,应用程序与服务器交换只有数据。如果您关心的是模板,它很简单 HTML.
而,每次在服务器上呈现新页面并发送给客户端时,每次请求时,模板引擎渲染的视图都会由服务器发送给客户端非常适合静态站点,但不适合丰富的站点交互。
如果在 MEAN Stack 中前端有 angular 那么为什么在后端 express.js 中有视图和模板引擎?
这是因为并非每次都建议从 angular 生成视图,有时最好使用模板引擎生成视图并将呈现的页面发送给客户端,在客户端生成视图有其自身的优点缺点和在服务器端生成视图有其自身的缺点。
使用模板引擎生成视图(即在服务器端):
pros:
- Search engines can crawl the site for better SEO.
- The initial page load is faster.
- Great for static sites.
cons:
- Frequent server requests.
- An overall slow page rendering.
- Full page reloads.
- Non-rich site interactions.
使用 angular 引擎生成视图(即在客户端):
pros:
- Rich site interactions
- Fast website rendering after the initial load.
- Great for web applications.
- Robust selection of JavaScript libraries.
cons:
- Low SEO if not implemented correctly.
- The initial load might require more time.
- In most cases, requires an external library.
所以,在了解了利弊之后,您自己可以更好地决定在特定情况下哪种方式更适合您。 Mean Stack 为开发者提供了选择。
就您关于这两种技术的作用的问题而言,Angular 只是更多的视图生成器,它具有路由、服务双向数据绑定等功能,而模板引擎旨在呈现 HTML 以便它可以发送到客户端。
希望这个回答对您有用。
References:
我正在学习 MEAN Stack。我从学习Angular开始(从angular.io)现在我正在学习node.js和express.js
我的问题是,如果 MEAN Stack 中的前端有 angular 那么为什么会有 视图和模板引擎 在后端 express.js 中?它们是相互替代还是相互补充?这两者的作用和责任的界限是什么?
我期待有人帮助澄清我对平均堆栈中使用的这两种技术(表达观点和 angular)的作用的概念。
Express JS 是一个基于 nodejs http 模块的网络框架。而 Angular JS 是一个前端框架,它不依赖于 NodeJs 服务器 运行。从概念上讲,两者在路由等少数功能上是相似的,而实现是不同的
Angular 是一个成熟的前端框架,它有自己的模板制作方式,在您的 HTML 中使用 angular 特定标记。如果您使用 Angular 作为您的框架,您或多或少会受制于他们在应用程序的 Angular 部分中进行模板化的方式。
Angular 特点
- 这是一个用Javascript语言 编写的框架
- 管理模型状态
- 与其他 UI 工具集成
- 操纵DOM
- 允许编写自定义 HTML 代码
- 它适用于java脚本开发人员快速创建动态网页
NodeJS
- 它服务于网络
- 它是在 google chrome 中的 java 脚本引擎上构建的运行时
- 它可以被认为是一个轻量级的服务器,可以以更 的方式服务于客户端请求
- 比java更简单
- 它执行与数据库、网络套接字的通信操作, 中间件等
为什么我们使用 angular 作为 Tempting 而不是 Express/Node tempting Engine
服务器端呈现是在屏幕上显示信息的最常用方法。它的工作原理是将服务器中的 HTML 文件转换为浏览器可用的信息。
每当您访问网站时,您的浏览器都会向包含该网站内容的服务器发出请求。请求通常只需要几毫秒,但这最终取决于多种因素:
- 你的网速
- 有多少用户正在尝试访问该网站以及
- 网站的优化程度,仅举几例
请求处理完成后,您的浏览器会返回完全呈现的 HTML 并将其显示在屏幕上。如果您随后决定访问网站上的不同页面,您的浏览器将再次请求获取新信息。每次您访问您的浏览器没有缓存版本的页面时,都会发生这种情况。
即使新页面只有少数项目与当前页面不同也没关系,浏览器会请求整个新页面并从头开始重新呈现所有内容。
客户端呈现的工作原理
当开发人员谈论客户端呈现时,他们谈论的是使用 JavaScript 在浏览器中呈现内容。因此,您不是从 HTML 文档本身获取所有内容,而是获取带有 JavaScript 文件的基本 HTML 文档,该文件将使用浏览器呈现站点的其余部分.
这是一种相对较新的网站渲染方法,直到 JavaScript 图书馆开始将其纳入其开发风格后才真正流行起来。
在此处查看示例Pratical Example
基本上,Express 中的模板引擎主要用于显示 404 和其他服务器错误消息。我发现它们非常适合此类用例。使用模板引擎进行复杂的前端渲染是不好的做法。
为了回答你的问题,让我解释一下什么是angular以及express中的模板引擎是什么?
什么是 Angular?
Angular 是一个可以轻松构建 Web 应用程序的平台。 Angular 结合声明性模板、依赖项注入、端到端工具和集成最佳实践来解决开发挑战。 Angular 使开发人员能够构建可在 Web、移动设备或桌面上运行的应用程序。
什么是模板引擎?
模板引擎使您能够在应用程序中使用静态模板文件。在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为 HTML 文件发送给客户端。这种方法可以更轻松地设计 HTML 页面。
一些与 Express 一起工作的流行模板引擎是 Pug、Mustache 和 EJS。 Express 应用程序生成器默认使用 Jade,但它也支持其他几种。
所以,
Angular 是一个内置模板组件的框架。您可以使用它来创建单页 Web 应用程序,这意味着 DOM 修改发生在客户端,应用程序与服务器交换只有数据。如果您关心的是模板,它很简单 HTML.
而,每次在服务器上呈现新页面并发送给客户端时,每次请求时,模板引擎渲染的视图都会由服务器发送给客户端非常适合静态站点,但不适合丰富的站点交互。
如果在 MEAN Stack 中前端有 angular 那么为什么在后端 express.js 中有视图和模板引擎?
这是因为并非每次都建议从 angular 生成视图,有时最好使用模板引擎生成视图并将呈现的页面发送给客户端,在客户端生成视图有其自身的优点缺点和在服务器端生成视图有其自身的缺点。
使用模板引擎生成视图(即在服务器端):
pros:
- Search engines can crawl the site for better SEO.
- The initial page load is faster.
- Great for static sites.
cons:
- Frequent server requests.
- An overall slow page rendering.
- Full page reloads.
- Non-rich site interactions.
使用 angular 引擎生成视图(即在客户端):
pros:
- Rich site interactions
- Fast website rendering after the initial load.
- Great for web applications.
- Robust selection of JavaScript libraries.
cons:
- Low SEO if not implemented correctly.
- The initial load might require more time.
- In most cases, requires an external library.
所以,在了解了利弊之后,您自己可以更好地决定在特定情况下哪种方式更适合您。 Mean Stack 为开发者提供了选择。
就您关于这两种技术的作用的问题而言,Angular 只是更多的视图生成器,它具有路由、服务双向数据绑定等功能,而模板引擎旨在呈现 HTML 以便它可以发送到客户端。
希望这个回答对您有用。
References: