Angular

关于 Angular server.ts 里设置 view en

2024-12-05  本文已影响0人  _扫地僧_

在 Angular 的 server.ts 文件中，代码 server.set('view engine', 'html'); 属于 Node.js 与 Express 框架的语法。在这一行中，server 通常是 Express 实例，通过 set() 方法来配置服务器的一些属性与行为。

1. Express 中的 server.set() 方法

server.set() 是 Express.js 提供的一个方法，用于设定全局的配置信息。在本例中，server 指代的是一个通过 express() 创建的应用实例，例如：

import * as express from 'express';

const server = express();

接着，server.set() 方法可以用来为这个服务器对象设置一些配置项，影响服务器处理请求的方式。

2. 'view engine' 和 'html' 的含义

server.set('view engine', 'html'); 这一行代码有两个部分：'view engine' 和 'html'。

3. 为什么要使用 'view engine'

Angular 是一个前端框架，而 Angular Universal 是 Angular 提供的一个用于实现服务端渲染（SSR）的解决方案。通常来说，Angular 应用在客户端渲染时，浏览器会从服务器加载应用的 JavaScript 文件，随后由浏览器解析并执行 JavaScript 以生成 DOM 元素。

在 SSR 场景下，服务器端直接将生成好的 HTML 页面返回给客户端，这样能够显著提高页面首次加载的速度，并且对搜索引擎更友好。而 server.set('view engine', 'html'); 的配置则可以使得服务器支持 HTML 文件的渲染。

当服务器接收到对页面的请求时，它会根据 Angular 服务器端渲染引擎生成动态的 HTML 页面，然后利用视图引擎将这个页面返回给客户端。这个过程让前端页面的首次加载看起来非常迅速，因为服务器已经把大部分 HTML 页面结构准备好了，客户端只需对这个内容做少量处理。

4. 举个例子说明 'view engine' 的使用

假设你想要创建一个支持服务器端渲染的 Angular 应用，并且希望在服务器端直接渲染 HTML 视图。你可能会这样使用 Express 与 Angular Universal 的结合来配置服务器。

下面我会为你展示一个典型的例子，来说明 server.set('view engine', 'html'); 具体是如何工作的：

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';

const server = express();
const distFolder = join(process.cwd(), 'dist/my-angular-app/browser');
const indexHtml = 'index';

// 设置视图引擎为 HTML
server.set('view engine', 'html');
server.set('views', distFolder);

// 使用 Angular Universal 的 Express 引擎来渲染视图
server.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

// 处理对应用根目录的 GET 请求
server.get('*.*', express.static(distFolder, {
  maxAge: '1y'
}));

server.get('*', (req, res) => {
  res.render(indexHtml, { req });
});

// 启动服务器
server.listen(4000, () => {
  console.log(`Node server listening on http://localhost:4000`);
});

在上述代码中，我们结合了 Express 和 Angular Universal 进行服务器端渲染：

  1. 视图引擎配置：

    • server.set('view engine', 'html'); 表示我们使用 HTML 作为视图引擎。
    • server.set('views', distFolder); 告诉 Express，我们存放视图文件的位置是在 distFolder，这里即为编译后的 Angular 应用目录。

  2. 引擎配置：

    • server.engine('html', ngExpressEngine({ bootstrap: AppServerModule })); 这里配置了 Angular Universal 的渲染引擎，使得它能够处理 HTML 文件的渲染。
    • ngExpressEngine 是由 @nguniversal/express-engine 提供的一个渲染引擎，用于将 Angular 应用渲染为 HTML。

  3. 请求处理：

    • 对于所有静态资源文件（例如 JavaScript、CSS 等），我们使用 express.static() 来提供服务，这样客户端可以加载到这些资源。
    • 对于所有其他请求，我们通过 res.render(indexHtml, { req }) 来渲染 HTML 页面，并将其返回给客户端。res.render() 使用之前设置的 HTML 视图引擎来进行页面渲染。

5. 深入理解视图引擎在 Angular Universal 中的作用

使用视图引擎的主要原因是为了实现页面的动态渲染。对于 Angular Universal，视图引擎使得服务器端能够提前生成页面的完整 HTML，这个过程带来了几个显著的好处：

6. 视图引擎与不同的模板语言

server.set('view engine', 'html'); 的设置使得服务器能够渲染 HTML 格式的文件，但通常在服务器端渲染中，直接渲染 HTML 文件并不是最佳实践。为了提高可维护性与代码复用性，开发者经常选择使用各种模板引擎，如 EJS、Pug 或 Handlebars 等。通过这些模板引擎，开发者可以用模板语言撰写页面，模板引擎则会将模板渲染为 HTML 输出。

在使用 Angular Universal 时，ngExpressEngine 结合了 Angular 框架本身的能力，使得它能够直接渲染 Angular 应用为 HTML 页面，而不需要额外的模板引擎。server.set('view engine', 'html'); 这句代码就为 ngExpressEngine 提供了这样的一个 HTML 渲染环境。

7. 补充说明：Node.js 和 Express 的关系

在这个上下文中，我们提到了 Node.js 与 Express，它们之间的关系有必要详细说明一下：

server.set() 方法正是 Express 提供的一种配置手段，用于设定应用的各类全局属性，例如端口、视图引擎、静态资源路径等。

8. 小结：HTML 作为视图引擎的限制与改进

server.set('view engine', 'html'); 的设置很直接，但并不是每个场景下都适合使用。对于复杂的应用，通常建议引入高级的模板引擎，以便在模板中使用变量、逻辑控制等功能。Angular Universal 本身提供的 ngExpressEngine 已经能够很好地应对这些复杂的需求，因此我们通常不会自己手动去编写 HTML 模板文件，而是直接利用 Angular 的模板系统与 SSR 能力。

在现代的前端开发中，SSR（服务器端渲染）是一种应对性能与 SEO 问题的强大工具，而视图引擎是这一体系中的重要一环。通过配置 server.set('view engine', 'html');，我们可以让服务器知道如何处理客户端请求，并且以最优的方式返回 HTML 页面。

9. 关于性能的考虑

设置视图引擎的另一层考量是性能问题。对于现代应用程序，渲染性能是一个关键指标。通过服务器端渲染预先生成页面的 HTML，可以显著减少浏览器处理 JavaScript 的时间。在一些性能要求较高的应用场景下，SSR 能够减少 Time To First Byte (TTFB)，从而使页面内容更快显示给用户。

而且，服务器端渲染对于那些不支持 JavaScript 的环境也同样有效，比如某些简易浏览器或者某些网络爬虫。通过将完整的 HTML 页面发送给客户端，我们能够确保在所有环境下都有较好的可访问性。

10. 结束语

server.set('view engine', 'html'); 这行代码背后蕴藏的细节，其实涉及了服务器与客户端协作的方式，尤其是在 Angular Universal 的上下文中，用于提供服务器端渲染的功能，以提高应用的首屏加载性能和搜索引擎的友好性。通过理解 Express 与 Angular 在服务器端如何协作，我们可以更好地构建高性能的 Web 应用。

这个配置使得 Angular 应用可以借助 ngExpressEngine 来渲染 Angular 模块，将其输出为动态的 HTML 内容，从而实现在服务器端对页面的快速渲染。在现代 Web 开发中，服务器端渲染已经成为应对复杂前端应用性能问题的重要工具，而通过视图引擎与渲染引擎的结合，可以让这一过程变得高效且容易管理。

上一篇 下一篇

猜你喜欢

热点阅读