渲染有两种不同的含义,这可能会让你感到困惑。
Angular 可以获取一段“原始”信息并“渲染”显示该数据所需的 DOM 元素。例如,数据可以是一个 JavaScript 对象,它可以作为 JSON 对象从某个 API 中获取。
在服务器上与客户端上的渲染
在更传统的方法中,HTML 代码来自服务器“预渲染”。这意味着服务器包含静态 HTML(只是您可以在记事本中键入的 HTML 文件),或像 PHP 这样的服务器端脚本,它将“呈现”包含所有数据的 HTML 代码。服务器返回这个 HTML 源代码,浏览器只是“渲染”它。
所以“在服务器上渲染”意味着获取模板和数据并将它们组合成原始源代码。
“在客户端渲染”传统上意味着获取 HTML 源代码并将其显示在屏幕上。 Angular 使用第三种变体,这意味着进行 DOM 操作以将数据“渲染”到文档中。但我稍后会谈到。
因此,服务器端呈现并不意味着(现在或以前)实际显示,即您查看的页面,在服务器上呈现。甚至 DOM 都不会在服务器上呈现。服务器只是从它获取的数据中呈现文本的 HTML 源代码,而客户端(浏览器本身)仍然生成 DOM 并进行页面的图形呈现。
因此 PHP 也不会直接响应按钮单击。它仅响应 HTTP 请求,这些请求可能源自输入的 URL、访问的链接、发布的表单或执行的 AJAX 请求。
HTML 具有内置行为
传统的 HTML 具有内置行为,这就是为什么它可以在没有任何客户端脚本的情况下工作。一个普通的超链接不能点击是因为脚本,而是因为浏览器知道这个元素和它的意图。所以从一页跳到下一页的逻辑是内置在浏览器本身中的。表格也是如此。当您单击提交按钮时,浏览器知道应该将表单的数据发送到服务器。您在 HTML 中所做的只是定义(在表单属性中)URL 是什么、方法以及按下哪个按钮来发送信息。同样,无需编写脚本。
客户端 JavaScript 可以操作已加载的页面
客户端过程实际上是一个两步过程。首先,HTML 源代码被解析并转换成一个 DOM 文档,一个包含元素信息的内存对象列表。
然后在屏幕上呈现(显示)该文档。
JavaScript(也包括 jQuery 或 Angular)可以处理这些内存对象。它可以将事件绑定到它们,因此您可以在发送之前验证表单输入(节省进行往返、服务器端检查和解析完整响应页面的时间),或响应对任何元素的单击。您甚至可以通过更改对象的内容、外观、删除或添加新对象来操作对象本身。
所以 JavaScript 的方法似乎介于两者之间。您不必实际绘制所需的更改,但也不必依赖 HTML 加载。您可以直接访问对象,并且您对它们所做的任何更改都会自动反映在浏览器的显示上。所以你可以插入一个额外的元素对象,它会自动出现在屏幕上。
这就是 JavaScript 如此快速和强大的原因。这种方法比从服务器加载一大块 HTML 更直接。所以在过去,你可以从一个页面跳到下一个页面,整个页面都需要重新加载和重新渲染。使用 JavaScript,您可以进行小型交互,使用 AJAX,您可以从外部来源获取信息片段并在页面上显示该信息,而无需重新加载整个页面。
注意。顺便说一句,AJAX 也不是很新。它是微软多年前发明的,用于构建丰富的基于 Web 的 Outlook 版本。 AJAX 中的 X 代表 XML,现在已被 JSON 取代,作为传达这些信息的首选符号。
Angular“隐藏”了这种 DOM 操作
Angular 只是一个框架,它抽象了 JavaScript 可以做的所有这些 DOM 操作。它允许您在 HTML 中放置标记,并在 JavaScript 中操作对象数据,它会自动将这些放在一起以更新页面。这使得在高层次上构建 Web 应用程序变得更加容易。你只需要担心设计和数据,将它们放在一起的大部分技术性都被删除了。
除此之外,Angular 并不比任何其他的 JavaScript DOM 操作方式更多。它只是让您弄乱当前加载的文档,这是服务器端脚本无法做到的。
但是,在大多数情况下,服务器(和服务器端脚本)仍然发挥着重要作用。现在,正是这个服务器端进程“呈现”了 Angular 应用程序获取的 JSON 数据。当然,除非您有一些应用程序不需要从其他任何地方加载任何额外数据。