36、创建独立 Web 应用：从数据模型到 HTML 渲染

创建独立 Web 应用：从数据模型到 HTML 渲染

在 Web 应用开发中，创建一个独立的 Web 应用涉及多个关键步骤，包括构建数据模型、设置数据源、渲染 HTML 内容等。下面将详细介绍这些步骤。

1. 添加 WDS 到开发工具链

添加 Webpack Dev Server（WDS）可以扩展开发工具链，并将应用程序连接到浏览器提供的 JavaScript 运行时。这个工具链包含了大多数 Web 应用项目中的关键元素，TypeScript 编译器只是其中的一部分，它允许 TypeScript 代码集成到更广泛的 JavaScript 开发工具中。

2. 创建数据模型

应用程序将通过 HTTP 请求从 Web 服务中获取产品列表，用户可以选择产品来组装订单，然后通过另一个 HTTP 请求将订单发送回 Web 服务。为了开始构建数据模型，我们创建了 src/data 文件夹，并在其中添加了一个名为 entities.ts 的文件，代码如下：

export type Product = {
    id: number, 
    name: string,
    description: string,
    category: string, 
    price: number 
};
export class OrderLine {
    constructor(public product: Product, public quantity: number) {
        // no st