使用Angular CLI开始学习Angular。简介 Angular是一个流行的JavaScript框架，可以创建交互

简介

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

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

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

你还会看到Angular是如何将展示、造型和业务关注点分割成独立的单元。这涉及到练习HTML、CSS和TypeScript层之间如何相互作用。

前提条件

要跟上这篇文章，你需要以下条件。

终端或命令行界面的基本知识。阅读《Linux终端简介》以了解更多。
对TypeScript有一些了解是有帮助的，但不是必须的。要复习TypeScript，请查看《如何在TypeScript中编码》系列。
熟悉CSS和HTML，并对JavaScript有基本的了解，你可以通过跟随How To Code in 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，你将用CLI创建你的第一个工作空间，名为my-first-angular-app 。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 键来初始化你的项目。

现在你会有一个Angular工作区，名为my-first-angular-app 。Angular CLI会在项目创建时安装任何必要的依赖项。关于Angular CLI和工作区创建的更多信息，请查看[Angular文档]((https://angular.io/cli)))。

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

第2步 - 在浏览器中运行你的Angular应用程序

在这一步，你将使用CLI在浏览器中运行你的应用程序。Angular的本地开发服务器会在文件系统发生变化时刷新浏览器。快速的反馈周期确保你能尽快看到你的变化结果。

Angular的本地开发服务器为你提供了以下好处。

在你选择的端口上启动一个本地网络服务器。
观察文件中的变化，并在变化时重新加载浏览器。
管理TypeScript的编译和捆绑。

通过在终端运行此命令，确保你在my-first-angular-app 目录中。

cd my-first-angular-app

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

ng serve -o

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

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

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组件的_视图_。在本步骤结束时，你将学会如何用你的内容更新启动器模板。

AppComponent 你可以在src/app/app.component.html 找到你的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 所做的任何改变都会显示在今后的每个组件中。如果成功，你将在浏览器中看到以下内容。

Global styling

注意：记得在每次修改后保存你的文件，然后再进入下一个步骤。

Angular CLI会将styles.css 添加到你的angular.json 文件中的build 构建器的 styles 数组中。你不需要手动添加对styles.css 的引用到index.html 。

angular.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。

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> 标签的内容中。

Component styling

有了你的样式，让我们来探索如何动态地改变你的用户界面。

第5步 - 更新主页的TypeScript

在这一步，你将在你的Angular应用程序中使用TypeScript，在src/app/app.component.ts 。Angular使用装饰器来动态地设计你的组件，ngStyle 和ngClass 。

Angular组件使用JavaScriptclass 语法。为了告诉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 里面看到这个。

index.html

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

Angular允许你把在src/app/app.component.ts 文件里面定义的应用状态绑定到它的HTML模板src/app/app.component.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. 。

Binding to template variables

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

你也可以使用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 是一个Angular指令，用于将应用状态与CSS样式绑定。在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 的获取器，以返回一个类的名称。

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>

如果成功，你将在浏览器中看到以下内容。

Dynamic styling with ngClass

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

第6步 - 构建你的生产环境

在这一步，你将使用Angular CLI为你的Angular项目生成一个生产构建。Angular使用Webpack，你将使用它来捆绑你的文件，并为生产优化网站。

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

要创建一个自定义的Webpack配置文件，请查看《如何使用Angular CLI Builders的自定义webpack配置》一文以了解更多信息。

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

开发

你的代码的未优化版本，包含源码图和运行时检查，帮助你在开发应用时检测和调查问题_，然后再_将其部署到生产环境。

当你运行命令ng serve ，Angular CLI会生成一个未优化的代码版本。你应该避免将开发构建部署到生产中。开发构建不包含任何优化，而这些优化对于一个快速的、可用于生产的应用程序是必要的。

你可以在终端运行以下命令，用development 配置来构建你的项目。

ng build --configuration development

生产

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

代码简化和捆绑，以减少你的应用程序的大小。
树形摇动，使导入的模块中未使用的部分被排除在最终构建之外，在不影响功能的情况下节省带宽。
没有源码图、编译器错误和警告，以减少捆绑的大小。

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

要生成一个生产构建，从你的项目文件夹中运行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 构建设置的选项。你可以在每个构建的基础上配置这些限制。

angular.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文档。