安装 Pug Angular - Shell-Bash

在本文中，我们将探讨如何在 Angular 应用程序中使用 Pug 模板语言。但首先让我们了解 Pug 是什么，它的优点是什么。

什么是 Pug?

Pug 是一个高效优雅的模板语言，它使 HTML 代码更加简单和易于阅读。

Pug 的优点

• 更少的冗余: Pug 的代码量要比原始的 HTML 小得多。
• 更少的标记: Pug 的标记要比原始的 HTML 短得多，使用 Pug 可以将页面的可读性和可维护性提高
• 内置变量：Pug 提供了内置变量或 mixins，这使模板更容易、更灵活、更具有可维护性。

安装 Pug Angular

在 Angular 中使用 Pug，我们需要先安装它的依赖 pug-loader 和 pug-plain-loader。

打开终端, 输入以下命令:

npm install pug pug-loader pug-plain-loader --save-dev

这会将 pug-loader 和 pug-plain-loader 安装到您的项目中并将其添加到package.json 文件中的开发依赖项中。

现在我们已成功地安装了 Pug，下一步是将其用于我们的 Angular 项目。

使用 Pug 编写 Angular 模板

为了使用 Pug 编写 Angular 模板，我们需要为项目添加一个 loader。 我们将使用 webpack，下面是添加 Loader 的步骤。

打开angular.json 文件,在 projects->architect->build->options 中添加以下代码:

"options": {
    ...
    "assets": [
        "src/favicon.ico",
        "src/assets"
    ],
    "scripts": [],
    "styles": [],
    "aot": false,
    "buildOptimizer": false,
    "optimization": true,
    "sourceMap": true,
    "vendorChunk": true,
    "extractLicenses": false,
    "progress": true,
    "pugLoader": {
        "locals": {
            "inline": true,
            "pretty": true,
            "basedir": "src",
            "doctype": "html"
        }
    }
}

上述代码中，我们将Pug的选项添加到项目配置中。

• inline: 如果设置为 true, 这将启用 Pug 模板字符串嵌入，它允许内联HTML - 以在约两倍的性能开销下生成模板。
• pretty: 如果设置为 true, Pug模板输出将采用漂亮的格式，否则将按单行格式输出
• basedir: 默认为项目根目录，我们可能会更改此选项以查找模板的绝对路径。
• doctype: HTML5嵌入的doctype。

现在，我们已经让 Angular 使用 Pug 作为模板语言了。下一步，我们将为我们的组件创建新的 Pug 模板。

创建 Pug 模板

假设我们有一个组件叫HomeComponent，我们将为其创建一个 pug 模板。

在项目根目录下的 /src/app/home 目录下新建一个 home.component.pug 文件，添加以下代码：

.home-container
  p Angular和Pug在一起变得如此简单和优雅

现在我们已成功创建了一个 Pug 模板。在编译 Angular 时，Pug 会自动被转换为 HTML 代码。

使用 Pug 模板

要使用 Pug 模板，我们需要在组件类中使用 @Component 装饰器中的 templateUrl 字段。

在 HomeComponent 类中，我们可以将 home.component.pug 告诉 Angular，并让它处理模板。

@Component({
  selector: 'app-home',
  templateUrl: './home.component.pug',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  ...
}

总结

我们已经成功地使用 Pug 编写了 Angular 模板。与原始的 HTML 模板相比， Pug 更加简洁、可读性更高，并且更加灵活。此外，使用 Pug 编写模板可以提高开发效率，更好地组织和维护代码。

让我们快乐地编写模板！