Learning Angular Chapter 1 Building Your First Angular Application

Leave a reply

第一章 创建你的第一个Angular应用程序

安装 Angular CLI

Angular CLI 是 Angular 生态系统的一部分，可以从 npm 下载。 由于它用于创建 Angular 项目，我们必须将其全局安装到系统中。 打开终端窗口并执行以下命令：

npm install -g @angular/cli

install 或 ：表示安装一个包 i
-g 或 ：表示该软件包将全局安装在系统上 --global
@angular/cli ： 安装包的名称

Angular CLI 遵循与 Angular 框架相同的版本，在本书中为 19。 上述命令将安装最新的稳定版 Angular CLI。
你可以通过运行命令ng version 或者ng v查看安装的版本。

npm install -g @angular/cli@19

上述命令 将获取并安装最新版本的 Angular CLI 19。

创建新项目

现在我们已经准备好开发环境，就可以开始创建第一个Angular应用了。
打开终端窗口，进入你选择的文件夹，然后执行命令 。 

ng new my-app

一路回车键，过程可能需要一些时间，具体取决于网络连接情况。 在此期间，Angular CLI 会下载并安装所有必要的包，创建一些文件。 完成后，它会创建一个名为my-app的文件夹，该文件夹代表一个 Angular CLI 工作区，包含一个根级调用的单个 Angular 应用程序 。

工作区包含多个文件夹和配置文件，Angular CLI 需要这些文件来构建和测试 Angular 应用。作为开发者，我们只应该关注编写实现应用功能的源代码。 然而，了解应用程序如何编排和配置，有助于我们更好地理解其机制以及必要时的干预方式。

.vscode ：包含VSCode配置文件
node_modules ： 包含开发和运行 Angular 应用所需的安装 npm 包
public ： 包含静态资源，如字体、图片和图标
src ： 包含应用程序的源文件
.editorconfig ： 定义默认编辑器的编码风格
.gitignore ： 指定 Git 不应追踪的文件和文件夹
angular.json ： Angular CLI 工作区的主配置文件
package.json 以及 ：提供 npm 包的定义及其具体版本，这些版本是开发、测试和运行 Angular 应用所需的 package-lock.json
README.md ： 一个从 Angular CLI 自动生成的 README 文件
tsconfig.app.json ： 一种针对 Angular 应用的 TypeScript 配置
tsconfig.json ： 一种针对 Angular CLI 工作区的 TypeScript 配置
tsconfig.spec.json ：一种针对Angular应用单元测试的TypeScript配置

导航到新创建的文件夹，并用以下命令启动你的应用程序：

ng serve

请记住，任何 Angular CLI 命令都必须在 Angular CLI workspace 文件夹中运行。

Angular CLI编译Angular项目，并启动一个Web服务器监控项目文件的变化。 这样，每当你更改应用代码时，网页服务器都会重建项目以反映新的变化。

编译成功完成后，您可以打开浏览器并导航到以下页面预览： http://localhost:4200

恭喜你！ 你已经创建了第一个 Angular CLI 工作区。 Angular CLI 创建了一个示例网页 ，我们可以作为构建项目的参考。 下一节我们将探讨申请的主要部分，并学习如何修改本页面。

Angular应用的结构

我们将迈出第一步，审视我们的Angular应用。 Angular CLI 已经为我们的项目搭建了支架，并完成了大部分繁重的工作。 我们只需要启动我们最喜欢的IDE，开始使用Angular项目。 本书将使用 VSCode，但请随意选择任何您觉得合适的编辑器：

打开 my-app项目的src文件夹。当我们开发Angular应用时，很可能会与文件夹交互 。 这里是我们编写应用程序代码和测试的地方。 其中包括以下内容： 

app ： 应用程序中所有与 Angular 相关的文件。 开发过程中你大部分时间都会与这个文件夹互动。
index.html ： Angular 应用的主 HTML 页面。
main.ts ： 是 Angular 应用的主要入口。
styles.css ： 适用于 Angular 应用的全局 CSS 样式。 该文件的扩展名取决于你创建应用程序时选择的样式表格式。

app文件夹里包含我们为应用程序编写的实际源代码。 开发者大部分时间都待在这个文件夹里。 由 Angular CLI 自动创建的 Angular 应用程序app包含以下文件：

app.component.css ： 包含示例页特有的 CSS 样式。 该文件的扩展名取决于你创建应用程序时选择的样式表格式。
app.component.html ： 包含示例页面的HTML内容。
app.component.spec.ts ： 包含示例页的单元测试。
app.component.ts 定义 了样本页的 呈现逻辑 。
app.config.ts 定义了Angular应用的配置。
app.routes.ts 定义了Angular应用的路由配置。

文件扩展名.ts指的是TypeScript文件。

在接下来的章节中，我们将学习 Angular 如何协调这些文件以显示应用的示例页面。

组成部分

名称app.component以开头的文件构成 Angular 组件 。 Angular中的一个组件通过协调表示逻辑与页面HTML内容的交互来控制网页的一部分，称为模板 。

每个 Angular 应用程序都有一个名为index.html的主 HTML 文件 ，存在于src文件夹内，包含以下 HTML 元素：

<body>
  <app-root></app-root>
</body>

该 <app-root> 标签用于识别应用程序的主要组件，并作为展示其HTML内容的容器。 它指示 Angular 在该标签中渲染主组件的模板。

当 Angular CLI 构建 Angular 应用时，它会解析index.html文件并识别元素内的 HTML 标签 。 Angular 应用总是在元素内部渲染 ，并由组件树组成。 当 Angular CLI 发现一个不是已知 HTML 元素的标签，例如<app-root>，它会开始搜索应用树的各个组件。 但它怎么知道从哪里开始呢？

Angular 应用的启动方法称为 引导（bootstrapping ），定义在src文件夹内的main.ts文件中： 

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

引导文件的主要任务是定义将在应用启动时加载的组件。 它调用bootstrapApplication了方法，并通过AppComponent参数来指定应用程序的起始组件。 它还将appConfig对象作为第二个参数传递，用于指定应用启动时将使用的配置。 应用程序配置描述在app.config.ts文件中： 

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

该appConfig对象包含一个providers属性，用于定义 Angular 应用中所提供的服务。

一个新的 Angular CLI 应用程序默认提供路由服务。 路由与应用内使用浏览器URL在不同组件之间导航有关。 它通过provideRouter方法激活，传递 一个称为 route配置( route configuration )的routes对象作为参数。 应用程序的路由配置定义在app.routes.ts文件中：

import { Routes } from '@angular/router';
export const routes: Routes = [];

我们的应用程序还没有路由配置，空routes数组显示了这一点。

模板语法

现在我们简要介绍了示例应用，接下来是时候开始与源代码互动了：

如果应用程序尚未运行，请在终端窗口中执行以下命令以启动该应用程序：

ng serve

如果你使用 VSCode，最好使用其集成终端，该终端可从 Terminal | 访问。 主 菜单新增终端选项。

在浏览器http://localhost:4200 打开应用，注意 Angular 标志下方的文字写着“Hello, myapp”。 my-app 这个词对应应用名称，来源于主组件 TypeScript 文件中声明的一个变量。 打开文件app.component.ts并找到title变量：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-app';
}

变量是title组件模板中使用的一个组件属性 。

打开app.component.html文件，进入第228行：

<h1>Hello, {{ title }}</h1>

该title性质被称为插值的双卷括语法包围 ， 这是Angular模板语法的一部分。 简而言之，插值将属性的值转换为文本并打印在页面上。

Angular 使用特定的模板语法来扩展和丰富应用模板中的标准 HTML 语法。

将app.component.ts文件中将title的值更改为"AppComponent World"，保存更改，等待应用程序重新加载，并在浏览器中检查输出。

恭喜你！ 你已经成功与应用的源代码进行了交互。

到现在为止，你应该已经对Angular的工作原理以及Angular应用的基本部分有了基本的理解。 作为读者，你到目前为止需要吸收大量信息。 不过，你将有机会在接下来的章节中更深入了解各个组成部分。

摘要

就是这样！ 你进入Angular世界的旅程才刚刚开始。 让我们回顾一下你迄今为止学到的功能。 我们了解了Angular是什么，回顾了该框架的简要历史，并探讨了使用它进行网页开发的优势。

我们的第一个应用让我们对Angular内部如何将应用渲染到网页上有了基本的理解。 我们开始了旅程，从一个Angular应用的主HTML文件开始。 我们看到 Angular 解析该文件并开始搜索组件树以加载主组件。 我们学习了Angular引导的流程，以及如何用它来加载应用配置。

在下一章中，你将学习TypeScript语言的一些基础知识。 本章将介绍通过引入类型和语言本身可以解决哪些问题。 TypeScript作为JavaScript的超集，包含许多强大的概念，并且与Angular框架非常契合，正如你即将发现的。

Leave a Reply