使用AngularCLI开始使用Angular

作为 Write for DOnations 计划的一部分，作者选择了 Open Internet/Free Speech Fund 来接受捐赠。

介绍

Angular 是一种流行的 JavaScript 框架，可创建交互式 Web、移动和桌面应用程序。强制的关注点分离、一流的 TypeScript 支持和强大的命令行界面 (CLI) 使 Angular 成为现代企业应用程序的首选。

Angular CLI 简化了开始使用 Angular 的过程。 CLI 还负责代码生成、生产构建和依赖管理。

在本教程结束时，您将使用 Angular CLI 创建一个 Angular 应用程序。您将使用 CLI 创建一个新应用程序，在浏览器中运行它，并为生产进行构建。

您还将了解 Angular 如何将表示、样式和业务关注点拆分为单独的单元。这涉及练习 HTML、CSS 和 TypeScript 层如何相互交互。

先决条件

要阅读本文，您需要以下内容：

终端或命令行界面的基本知识。阅读 Linux 终端简介指南以了解更多信息。
一些 TypeScript 知识是有帮助的，但不是必需的。要查看 TypeScript，请查看 How To Code in TypeScript 系列。
熟悉 CSS 和 HTML，并对 JavaScript 有基本的了解，您可以通过阅读如何在 JavaScript 中编写代码系列来获得这些知识。
Node.js 版本 8.9 及更高版本。您可以通过从网站下载它来安装 Node，或者使用 Node 版本管理器来管理您的 Node 安装。

第 1 步 — 安装 Angular CLI 并创建您的第一个应用程序

在这一步中，您将在本地计算机上安装 Angular CLI 并构建您的 Angular 应用程序。首先，您将下载 Angular CLI 并实现以下三个目标：

创建一个新的 Angular 项目
运行本地开发服务器
为生产构建此应用程序

在终端中运行以下命令以下载 Angular CLI：

npm install -g @angular/cli

为确保安装成功，请在终端中运行以下命令：

ng version

Angular CLI 会将当前版本和周围环境打印到终端：

OutputAngular CLI: 12.1.4
Node: 14.17.4
Package Manager: npm 6.14.14
OS: darwin x64

要开始使用 Angular，您将使用名为 my-first-angular-app 的 CLI 创建您的第一个工作区。 Angular 中的项目被称为 工作区 。

在终端中运行以下命令：

ng new my-first-angular-app

该命令将询问一些用于配置工作区的初始化问题：

Output
? Would you like to add Angular routing? (y/N) N
? Which stylesheet format would you like to use?
❯ CSS
 SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
 Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
 Less   [ http://lesscss.org

对于第一个问题，请输入 N，因为您不会为此项目使用 Angular 路由。按 ENTER 或 RETURN 键。

在第二个问题中，选择 CSS 作为样式表格式。

按 ENTER 或 Return 键初始化您的项目。

您现在将拥有一个名为 my-first-angular-app 的 Angular 工作区。 Angular CLI 安装项目创建所需的任何依赖项。有关 Angular CLI 和工作区创建的更多信息，请查看 Angular 文档。

现在您已经下载了 Angular CLI 并创建了一个新的 Angular 工作区，让我们看看如何在浏览器中运行您的应用程序。

第 2 步 — 在浏览器中运行 Angular 应用程序

在此步骤中，您将使用 CLI 在浏览器中运行您的应用程序。每当文件系统发生变化时，Angular 的本地开发服务器都会刷新浏览器。快速的反馈周期确保您可以尽快看到更改的结果。

Angular 的本地开发服务器为您提供以下好处：

在您选择的端口上启动本地 Web 服务器。
注意文件中的更改并在更改时重新加载浏览器。
管理 TypeScript 编译和捆绑。

通过在终端中运行以下命令，确保您位于 my-first-angular-app 目录中：

cd my-first-angular-app

接下来，通过在终端中运行以下命令来启动 Web 服务器：

ng serve -o

Angular 将构建您的开发应用程序并将其公开在 http://localhost:4200 的本地 Web 服务器上。该应用程序将在 Web 浏览器中打开，因为您将 -o 标志添加到 ng serve。

您可以通过检查终端的输出来验证这是否成功：

Output✔ browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.08 MB
polyfills.js        | polyfills     | 128.57 kB
main.js             | main          |  10.81 kB
runtime.js          | runtime       |   6.59 kB
styles.css          | styles        | 179 bytes

                    | Initial Total |   2.22 MB

Build at: 2021-08-01T23:30:14.012Z - Hash: 3302767a539a29a592de - Time: 7433ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Compiled successfully.

您可以将其他配置选项传递给 ng serve 以自定义环境。您可以在此处查看配置选项的完整列表。

您现在将在屏幕上看到您的 Angular 应用程序。只要 ng serve 正在运行，对文件系统的任何更改都会导致浏览器更新为新内容。在应用程序的整个开发过程中保持 ng serve 运行。

在这一步中，您使用 ng serve 在浏览器中运行了 Angular 应用程序。您将配置选项传递给 CLI 命令，例如 `ng serve -o'。

接下来，您将对 Angular 组件进行更改，并查看屏幕上反映的更改。

第 3 步 — 更新主页模板

在此步骤中，您将通过编辑 HTML 在屏幕上显示内容。 HTML 模板也称为 Angular 组件的视图。在此步骤结束时，您将了解如何使用您的内容更新入门模板。

您可以在 src/app/app.component.html 找到 AppComponent 的 HTML。在您选择的文本编辑器中打开它并删除内容。您应该准备好一个空白的 HTML 文档来编写您的标记。

将以下 HTML 副本添加到您的 src/app/app.component.html：

src/app/app.component.html

<div>
 <article>
  <header>
    <h1>I'm learning Angular at DigitalOcean</h1>
  </header>
  <section>
    <p>Here's what I've learned so far:</p>
    <ul>
      <li>
        Angular allows us to create performant web applications using TypeScript.
      </li>
      <li>
        I can use the Angular CLI to create/interact with my Angular workspace.
      </li>
      <li>
        Making changes will automatically be shown on screen, thanks to the local development server!
      </li>
    </ul>
  </section>
 </article>
</div>

您添加了一个 <div> ，其中包含一个标题和一个包含无序列表的部分。由于 <h1> 标签，您将看到以项目符号显示的无序列表和以大字体显示的标题。

请注意，您的应用程序组件会在您保存文档后立即更新。随意尝试您自己的进一步添加并实时见证它们。

您现在已经更新了基础应用程序组件的 HTML 模板。这是 Angular 应用程序的入口组件。在下一步中，您将使用 CSS 设置内容样式。

第 4 步 — 更新主页样式

在这一步中，您将使用 CSS 设置应用程序的样式。 Angular 允许您同时使用作用域样式和全局样式。将 CSS 限定为组件的能力可以在不妨碍您的设计的情况下实现灵活性。

您将首先通过编辑 src/styles.css 为您的应用程序设置一些默认的全局样式：

src/app/app.component.css

body {
 background-color: #fce7f3;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 font-size: 2rem;
}

这些样式将您的所有内容集中在屏幕中间，并设置温暖的背景颜色。请记住，对全局 styles.css 所做的任何更改都将显示在以后的每个组件中。如果成功，您将在浏览器中查看以下内容：

注意：请记住在每次更改后保存文件，然后再进行下一步。

Angular CLI 将 styles.css 添加到 angular.json 文件中 build builder 的 styles 数组中。您不必手动添加对 styles.css 到 index.html 的引用。

角.json

{
 "projects": {
 "my-first-angular-app": {
 ...
 "architect": {
 "build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
 ...
 "styles": ["src/styles.css"]
          }
        }
      }
    }
  }
}

您将在第 6 步中查看有关 Angular 构建过程的更多信息。

接下来，让我们为应用组件设置样式。添加到组件的样式不会出现在应用程序的其他部分。有关样式范围的更多信息，请阅读 Angular 文档。

前往 src/app/app.component.css 并在全局样式下方添加以下 CSS：

...
[label src/app/app.component.css] article {
 background-color: #fbcfe8;
 padding: 2rem 4rem;
 color: #1f2937;
 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 box-shadow: 20px 20px 0px #db2777;
 border: 6px solid #831843;
 border-radius: 2rem;
}

header {
 text-decoration: underline;
}

ul {
 list-style: square;
}

您的样式现在将出现在浏览器中 <article> 标记内的内容中：

设置好样式后，让我们探索如何动态更改用户界面。

第 5 步 — 更新主页 TypeScript

在这一步中，您将在 Angular 应用程序中使用 TypeScript，该应用程序位于 src/app/app.component.ts。 Angular 使用装饰器通过 ngStyle 和 ngClass 动态设置组件的样式。

Angular 组件使用 JavaScript class 语法。要告诉 Angular 这个类是一个组件，你需要在类中添加一个 @Component(...) 装饰器。

TypeScript 和 Angular 中的装饰器围绕类或函数声明提供元数据。在 Angular 中，它们专门用于向依赖注入系统和编译器提供元数据。这允许任意代码在执行类或函数之前、期间和之后运行。然后，Angular 将连接到组件的文件关联起来。您可以在此处找到有关 TypeScript 中装饰器的更多信息。

您可以在使用 CLI 创建的 AppComponent 中看到这一点。打开 src/app/app.component.ts 并观察以下内容：

src/app/app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 ...
}

请注意，styleUrls 属性是一个具有一个值的数组。这是因为 app-root 包含一个 CSS 样式表。您可以向 styleUrls 数组添加更多样式表，Angular 会将它们捆绑在一起。

selector 是标识此组件的 CSS 选择器。这将是 HTML 模板中组件的名称，您可以在 index.html 中看到：

索引.html

<!doctype html>
  <html lang="en">
    <head>
      ...
    </head>
    <body>
      <app-root></app-root>
    </body>
</html>

Angular 允许您将 src/app/app.component.ts 文件中定义的应用程序状态绑定到其位于 src/app/app.component.html 的 HTML 模板。

在 AppComponent 中，创建一个名为 myNextProject 的新变量并将其赋值为 a porfolio website：

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myNextProject = 'a portfolio website.';
}

您现在可以使用该变量作为 src/app/app.component.html 的绑定器，并将 TypeScript 中定义的数据连接到您的 HTML 模板。 Angular 通过将变量括在双花括号内来定义 HTML 中的 TypeScript 变量：

{{ myNextProject }}

在 src/app/app.component.html 中，在 <footer> 标记之间的文本中添加变量：

src/app/app.component.html

<article>
  <header>
    <h1>I'm learning Angular at DigitalOcean</h1>
  </header>
  <section>
    <p>Here's what I've learned so far:</p>
    <ul>
    <li>
      Angular allows you to create performant web applications using TypeScript.
    </li>
    <li>
      I can use the Angular CLI to create/interact with my Angular workspace.
    </li>
    <li>
      Making changes will automatically be shown on screen, thanks to the local development server!
    </li>
  </ul>
 </section>
 <footer>
    <p>For my next project, I'll be making {{ myNextProject }}</p>
 </footer>
</article>

<p> 标签内的内容将在浏览器中呈现为 For my next project, I'll be making a portfolio website.：

如此处执行的，模板中的绑定值允许您向用户提供动态内容。

您还可以使用 TypeScript 文件中的函数来确定输出。在您的 src/app/app.component.ts 中，定义一个新变量 showPurpleBoxShadow 和一个 getBoxShadow() 函数：

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myNextProject = 'a portfolio website.';

  showPurpleBoxShadow = true;

 get boxShadow() {
 if (this.showPurpleBoxShadow) return '20px 20px 0px #bdb2ff';

 return '20px 20px 0px #DB2777';
  }
}

导航到 src/app/app.component.html 文件并在 <article> 标签中插入 [ngStyle] 指令：

src/app/app.component.html

<article [ngStyle]="{'box-shadow': boxShadow}">...</article>

ngStyle 是一个将应用程序状态绑定到 CSS 样式的 Angular 指令。在 Angular 中，指令是 DOM 元素上的“标记”，例如 [ngStyle]。然后 Angular 能够将功能附加到 DOM 元素。

在这种情况下，您将根据 showPurpleBoxShadow 的值应用不同的 box-shadow 样式。您也可以使用 ngClass 指令获得相同的结果。这将有条件地应用 CSS 类，而不是应用 CSS 样式。

打开 src/app/app.component.css 并添加以下 CSS 类：

src/app/app.component.css

.purple-box-shadow {
 box-shadow: 20px 20px 0px #bdb2ff;
}

.pink-box-shadow {
 box-shadow: 20px 20px 0px #db2777;
}

然后，在 src/app/app.component.ts 中，更新 boxShadow getter 以返回类名：

src/app/app.component.ts

export class AppComponent {
 ...

 get boxShadow() {
 if (this.showPurpleBoxShadow) return 'purple-box-shadow';

 return 'pink-box-shadow';
  }
}

然后，您可以使用 ngClass 指令有条件地将 purple-box-shadow 类应用于 <article> 标记：

src/app/app.component.html

<article [ngClass]="boxShadow">
...
</article>

如果成功，您将在浏览器中查看以下内容：

您现在可以在屏幕上查看您的设计清单，而无需在每次更改后进行额外的重新部署。让我们看看如何构建用于开发和生产的 Angular 应用程序。

第 6 步 — 构建您的生产环境

在这一步中，您将使用 Angular CLI 为您的 Angular 项目生成生产版本。 Angular 使用 Webpack，您将使用它来捆绑文件并优化网站以进行生产。

Webpack 是一个用于 JavaScript 应用程序的开源模块捆绑器。它提供了按需加载代码/资产的能力。它提供了一个强大的优化系统，可以最大限度地减少从服务器获取所有必要资产所需的请求数量。

要创建自定义 Webpack 配置文件，请查看文章如何将自定义 webpack 配置与 Angular CLI Builders 一起使用以获取更多信息。

默认情况下，Angular CLI 提供两种类型的构建：

发展

未经优化的代码版本包含源映射和运行时检查，可帮助您在开发应用程序 并将其部署到生产环境之前 时检测和调查问题。

当您运行命令 ng serve 时，Angular CLI 将生成代码的未优化版本。您应该避免将开发构建部署到生产中。开发版本不包含快速、生产就绪应用程序所需的任何优化。

您可以通过在终端中运行以下命令，使用 development 配置构建项目：

ng build --configuration development

生产

使用 production 配置构建您的项目将生成优化的代码并为您提供以下好处：

代码缩小和捆绑以减小应用程序的大小。
Tree-shaking 使导入模块的未使用部分从最终构建中排除，从而节省带宽而不会对功能产生不利影响。
对于较小的包大小，没有源映射、编译器错误和警告。

生产构建对于面向公众的应用程序至关重要，因为页面速度和交付时间是搜索引擎和用户的关键指标。有关页面速度和交付时间优化的更多信息，请单击这里。

要生成生产版本，请从您的项目文件夹中运行 ng build。 CLI 将检查您的代码并生成应用程序的优化、缩小版本。

如果成功，它将为您提供有关捆绑包的统计信息：

Output✔ browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files        | Names     |   Size
main.0deeec3d31917b111ae5.js   | main     | 104.77 kB
polyfills.313e64a67eb403254da5.js | polyfills   | 35.96 kB
runtime.284ffbeed756735f6289.js  | runtime    |  1.02 kB
styles.e5294562d7aae78a8725.css  | styles    | 113 bytes

| Initial Total | 141.86 kB

请注意文件名在其名称后如何具有唯一的哈希值。 Angular 添加了这个以允许“缓存清除”。随着每次构建时哈希值的变化，浏览器可以在重新访问该站点时重置其缓存。

如果您对文件进行任何更改，哈希值将会更改，并且浏览器将重新加载新文件。否则，浏览器将使用缓存版本。

当包大小太大时，Angular CLI 也可以在这个阶段显示警告。随着应用程序的增长，您应该继续查看捆绑包的大小。

您可以在 angular.json 文件中找到与 Angular CLI 命令对应的配置选项，例如 ng build 和 ng serve。通过 configurations 键导航以查看为 production 和 development 构建设置的选项。您可以在每个构建的基础上配置这些限制。

角.json

{
 ...
 "projects": {
 "my-first-angular-app": {
 "architect": {
 "build": {
 ...
 "configurations": {
 "production": {
 "budgets": [
 {
  "type": "initial",
  "maximumWarning": "500kb",
  "maximumError": "1mb"
 },
 {
  "type": "anyComponentStyle",
  "maximumWarning": "2kb",
  "maximumError": "4kb"
 }
],
            }
          }
        }
      }
    }
  }
}

ng build 命令将这些输出到 dist/my-first-angular-app 文件夹以访问构建的文件以进行部署。您可以使用这些文件将应用程序部署到服务器或 CDN。有关这方面的更多信息，请参阅 Angular CLI 文档。

在这一步中，您学习了如何使用 Angular CLI 创建开发和生产构建。您还考虑了生成高性能 Web 应用程序的重要因素，例如包大小。

结论

在本教程中，您使用 Angular CLI 创建了一个 Angular 项目。您在浏览器中执行并运行了项目，并更新了应用程序的外观和执行方式。

您使用 CLI 生成了生产构建并了解了配置选项，以便更深入地了解 CLI 的运行方式和位置。

要了解有关 Angular CLI 和其他命令的更多信息，请查看 Angular CLI 文档。