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

简介

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

ANGLE CLI简化了入门使用ANGING的过程。CLI还负责代码生成、生产构建和依赖项管理。

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

您还将看到Angular如何将表示，样式和业务问题拆分为单独的单元。这涉及到练习HTML、CSS和TypeScript层如何相互交互。

前提条件

要阅读本文，您需要具备以下条件：

终端或命令行界面的基本知识。要了解更多信息，请阅读linux Terminal简介指南]。
一些打字方面的知识是有帮助的，但不是必需的。要查看打字稿，请阅读如何在TypeScript中编码]系列。
熟悉CSS和HTML，，并对JAVASCRIPT有一个基本的了解，你可以通过阅读如何在JavaScript中编程]系列来获得这些知识。
Node.js版本8.9及以上。您可以通过从网站下载，或使用Node Version Manager]管理您的节点安装来安装节点。

第一步-安装ANGLE CLI并创建您的第一个应用程序

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

创建新的角度项目
运行本地开发服务器
构建此应用程序以用于生产

在您的终端中运行以下命令以下载ANGLE CLI：

1npm install -g @angular/cli

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

1ng version

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

1[secondary_label Output]
2Angular CLI: 12.1.4
3Node: 14.17.4
4Package Manager: npm 6.14.14
5OS: darwin x64

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

在您的终端中运行以下命令：

1ng new my-first-angular-app

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

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

对于第一个问题，请键入N‘，因为您不会在此项目中使用角度布线。按Enter或RETURN‘键。

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

按Enter或Return键初始化项目。

现在，您将拥有一个名为)。

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

第二步-在浏览器中运行您的ANGLE应用

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

Angel的本地开发服务器为您提供了以下优势：

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

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

1cd my-first-angular-app

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

1ng serve -o

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

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

 1[secondary_label Output]
 2✔ browser application bundle generation complete.
 3
 4Initial Chunk Files | Names         |      Size
 5vendor.js           | vendor        |   2.08 MB
 6polyfills.js        | polyfills     | 128.57 kB
 7main.js             | main          |  10.81 kB
 8runtime.js          | runtime       |   6.59 kB
 9styles.css          | styles        | 179 bytes
10
11                    | Initial Total |   2.22 MB
12
13Build at: 2021-08-01T23:30:14.012Z - Hash: 3302767a539a29a592de - Time: 7433ms
14** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
15
16✔ Compiled successfully.

您可以将其他配置选项传递给NG服务以自定义环境。您可以看到配置选项的完整列表此处.

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

在本步骤中，您使用ng serve在浏览器中运行了您的角度应用程序。您将配置选项传递给了CLI命令，例如`ng Serve-o‘。

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

第三步-更新首页模板

在本步骤中，您将通过编辑HTML在屏幕上显示内容。HTML模板也称为角度组件的_view_。在本步骤结束时，您将学习如何使用您的内容更新入门模板。

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

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

 1[label src/app/app.component.html]
 2<div>
 3 <article>
 4  <header>
 5    <h1>I'm learning Angular at DigitalOcean</h1>
 6  </header>
 7  <section>
 8    <p>Here's what I've learned so far:</p>
 9    <ul>
10      <li>
11        Angular allows us to create performant web applications using TypeScript.
12      </li>
13      <li>
14        I can use the Angular CLI to create/interact with my Angular workspace.
15      </li>
16      <li>
17        Making changes will automatically be shown on screen, thanks to the local development server!
18      </li>
19    </ul>
20  </section>
21 </article>
22</div>

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

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

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

第四步-更新首页样式

在本步骤中，您将使用CSS设置应用程序的样式。角度允许您使用作用域样式和全局样式。将CSS范围扩大到组件的能力可以实现灵活性，而不会影响您的设计。

您将通过编辑src/style es.css开始为您的应用程序设置一些默认的全局样式：

1[label src/app/app.component.css]
2body {
3 background-color: #fce7f3;
4 display: flex;
5 align-items: center;
6 justify-content: center;
7 height: 100vh;
8 font-size: 2rem;
9}

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

全球styling

<$>[备注] 注意：切记在每次更改后保存文件，然后再执行下一步。<$>

角度命令行工具会将[builder](https://angular.io/guide/cli-builder).css添加到您的angular.json文件中的Build样式数组中。您无需在index.html中手动添加对style es.css`的引用。

 1[label angular.json]
 2{
 3 "projects": {
 4 "my-first-angular-app": {
 5 ...
 6 "architect": {
 7 "build": {
 8 "builder": "@angular-devkit/build-angular:browser",
 9 "options": {
10 ...
11 "styles": ["src/styles.css"]
12          }
13        }
14      }
15    }
16  }
17}

在步骤6中，您将回顾有关角度构建过程的更多信息。

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

转到src/app/app.Component.css，在全局样式下面添加以下css：

 1...
 2[label src/app/app.component.css] article {
 3 background-color: #fbcfe8;
 4 padding: 2rem 4rem;
 5 color: #1f2937;
 6 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 7 box-shadow: 20px 20px 0px #db2777;
 8 border: 6px solid #831843;
 9 border-radius: 2rem;
10}
11
12header {
13 text-decoration: underline;
14}
15
16ul {
17 list-style: square;
18}

您的样式现在将显示在浏览器中<文章>标签内的内容中：

组件styling

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

第五步-更新首页文字稿

在本步骤中，您将在位于src/app/app.Component.ts的ANGLE应用程序中使用类型脚本。Angel使用装饰符为您的组件动态设置ngStyle和ngClass的样式。

角度组件使用的是JavaScript类语法。要告诉ANGLE这个类是一个组件，您需要向该类添加一个@Component(...)装饰符。

类型脚本和角度中的修饰符围绕类或函数声明提供元数据。具体而言，它们专门用于向依赖项注入系统和编译器提供元数据。这允许在执行类或函数之前、期间和之后运行任意代码。然后，将连接到零部件的文件关联到角度。您可以在TypeScriphere.中找到有关装饰器的更多信息

您可以在使用命令行工具创建的AppComponent中看到这一点。打开src/app/app.Component.ts并观察以下内容：

1[label src/app/app.component.ts]
2@Component({
3  selector: 'app-root',
4  templateUrl: './app.component.html',
5  styleUrls: ['./app.component.css']
6})
7export class AppComponent {
8 ...
9}

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

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

 1[label index.html]
 2<!doctype html>
 3  <html lang="en">
 4    <head>
 5      ...
 6    </head>
 7    <body>
 8      <app-root></app-root>
 9    </body>
10</html>

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

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

 1[label src/app/app.component.ts]
 2import { Component } from '@angular/core';
 3
 4@Component({
 5  selector: 'app-root',
 6  templateUrl: './app.component.html',
 7  styleUrls: ['./app.component.css']
 8})
 9export class AppComponent {
10  myNextProject = 'a portfolio website.';
11}

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

1{{ myNextProject }}

在src/app/app.component.html中，在标签之间的文本中添加变量

：

 1[label src/app/app.component.html]
 2<article>
 3  <header>
 4    <h1>I'm learning Angular at DigitalOcean</h1>
 5  </header>
 6  <section>
 7    <p>Here's what I've learned so far:</p>
 8    <ul>
 9    <li>
10      Angular allows you to create performant web applications using TypeScript.
11    </li>
12    <li>
13      I can use the Angular CLI to create/interact with my Angular workspace.
14    </li>
15    <li>
16      Making changes will automatically be shown on screen, thanks to the local development server!
17    </li>
18  </ul>
19 </section>
20 <footer>
21    <p>For my next project, I'll be making {{ myNextProject }}</p>
22 </footer>
23</article>

<p>标签中的内容将呈现为对于我的下一个项目，我将在浏览器中创建一个公文包网站。：

绑定到模板variables

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

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

 1[label src/app/app.component.ts]
 2import { Component } from '@angular/core';
 3
 4@Component({
 5  selector: 'app-root',
 6  templateUrl: './app.component.html',
 7  styleUrls: ['./app.component.css']
 8})
 9export class AppComponent {
10  myNextProject = 'a portfolio website.';
11
12  showPurpleBoxShadow = true;
13
14 get boxShadow() {
15 if (this.showPurpleBoxShadow) return '20px 20px 0px #bdb2ff';
16
17 return '20px 20px 0px #DB2777';
18  }
19}

导航到您的src/app/app.Component.html文件，并在标记中插入[ngStyle]`指令：

1[label src/app/app.component.html]
2<article [ngStyle]="{'box-shadow': boxShadow}">...</article>

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

在本场景中，您将根据showPurpleBoxShadow的值应用不同的box-shadow样式。使用ngClass指令也可以达到同样的效果。这将有条件地应用一个css类，而不是应用css样式。

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

1[label src/app/app.component.css]
2.purple-box-shadow {
3 box-shadow: 20px 20px 0px #bdb2ff;
4}
5
6.pink-box-shadow {
7 box-shadow: 20px 20px 0px #db2777;
8}

然后，在src/app/app.Component.ts中，更新boxShadowgetter，返回类名：

 1[label src/app/app.component.ts]
 2export class AppComponent {
 3 ...
 4
 5 get boxShadow() {
 6 if (this.showPurpleBoxShadow) return 'purple-box-shadow';
 7
 8 return 'pink-box-shadow';
 9  }
10}

然后，您可以使用ngClass指令有条件地将紫色-box-shadow类应用到<文章>标签：

1[label src/app/app.component.html]
2<article [ngClass]="boxShadow">
3...
4</article>

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

使用ngClass 动态设置样式

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

第六步-构建您的生产环境

在本步骤中，您将使用ANGLE CLI为您的ANGLE项目生成一个产品构建。Angel使用webpack，您将使用它来捆绑您的文件并针对生产优化站点。

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

要创建自定义webpack配置文件，请查看文章如何将自定义webpack配置与角度命令行界面Builders配合使用》以了解更多信息。

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

发展

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

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

您可以通过在您的终端运行以下命令，使用Development配置来构建您的工程：

1ng build --configuration development

生产

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

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

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

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

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

 1[secondary_label Output]
 2✔ browser application bundle generation complete.
 3✔ Copying assets complete.
 4✔ Index html generation complete.
 5
 6Initial Chunk Files        | Names     |   Size
 7main.0deeec3d31917b111ae5.js   | main     | 104.77 kB
 8polyfills.313e64a67eb403254da5.js | polyfills   | 35.96 kB
 9runtime.284ffbeed756735f6289.js  | runtime    |  1.02 kB
10styles.e5294562d7aae78a8725.css  | styles    | 113 bytes
11
12| Initial Total | 141.86 kB

请注意文件名后面有一个唯一的散列。Angular增加了这一点以允许缓存破坏。由于哈希值在每次构建时都会发生变化，因此浏览器可以在重新访问站点时重置其缓存。

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

当捆绑包大小过大时，角度CLI也会在此阶段显示警告。随着应用程序的增长，您应该继续检查包大小。

您可以在angular.json文件中找到与角度CLI命令对应的配置选项，例如ng Build、ng serve。浏览Configurations键，查看为Production和Development版本设置的选项。您可以在每个构建的基础上配置这些限制。

 1[label angular.json]
 2{
 3 ...
 4 "projects": {
 5 "my-first-angular-app": {
 6 "architect": {
 7 "build": {
 8 ...
 9 "configurations": {
10 "production": {
11 "budgets": [
12 {
13  "type": "initial",
14  "maximumWarning": "500kb",
15  "maximumError": "1mb"
16 },
17 {
18  "type": "anyComponentStyle",
19  "maximumWarning": "2kb",
20  "maximumError": "4kb"
21 }
22],
23            }
24          }
25        }
26      }
27    }
28  }
29}

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

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

结论

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

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

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

使用 Angular CLI 开始学习 Angular

简介