Angular 学习笔记

前情提要

公司组织机构调整，将之前的vue2和vue3的代码定义为过去式，新的技术选型定了Angular 为后续的主要开发方向，因此对于一直在写vue项目的我来说需要重新来熟悉框架，等于从头开始当小白。

我的计划

整体上给的时间并不多，当我写此文的时候已经过去了2天多时间，我觉得刚好适合做个总结。

学习内容

首先了解一下Angular的来源，知己知彼： Angular是一个由Google开发和维护的现代前端JavaScript框架，学习Angular的重点可以归纳为以下几个方面：

- 基础知识准备

HTML、CSS、JavaScript：这是前端开发的基础知识，也是学习Angular之前必须掌握的内容。HTML用于定义网页的结构，CSS用于设置网页的样式，JavaScript则用于实现网页的动态交互。
TypeScript：Angular是基于TypeScript语法进行开发的，因此了解TypeScript的基础语法是必要的。TypeScript是JavaScript的一个超集，它添加了可选的静态类型和基于类的面向对象编程。

• Angular核心概念

组件（Component）：Angular应用的基本构建块，每个组件都负责一部分视图的渲染。组件包括TypeScript类、HTML模板和CSS样式。
模块（Module）：用于将相关的组件、服务、指令等组织在一起，形成一个功能块。NgModule用于配置和引导应用。
路由（Routing）：用于管理应用的导航和页面间的切换。
数据绑定：包括插值表达式、属性绑定、事件绑定等，使UI与应用状态同步。
指令（Directives）：用于向Angular模板添加额外的行为。Angular有一些内置指令，如*ngIf、*ngFor等，也可以创建自定义指令。

1. 结构型指令
*ngIf

用于根据表达式的真假值来添加或移除DOM元素。

<div *ngIf="condition">This div will be shown if condition is true.</div>
*ngFor

用于基于可迭代对象（如数组或对象）中的每个项来重复渲染一个模板。

<div *ngFor="let item of items; let i = index">
  Item {{ i }}: {{ item }}
</div>
*ngSwitch 和 *ngSwitchCase / *ngSwitchDefault

用于在多个可能的值之间切换视图。

<div [ngSwitch]="value">
  <div *ngSwitchCase="'a'">Case A</div>
  <div *ngSwitchCase="'b'">Case B</div>
  <div *ngSwitchDefault>Default case</div>
</div>
2. 属性型指令
[ngStyle] 和 [ngClass]

用于动态地设置元素的样式和类。

<!-- ngStyle -->
<div [ngStyle]="{'color': color, 'font-size': fontSize + 'px'}">Styled div</div>

<!-- ngClass -->
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Class-bound div</div>
[attr.xxx]

用于绑定HTML属性。

<img [attr.src]="imageUrl" alt="Image description">
3. 事件绑定指令
(event)

用于监听DOM事件并触发组件中的方法。

<button (click)="onClick()">Click me</button>
4. 双向数据绑定指令
[(ngModel)]（需要FormsModule）

用于在表单输入控件和组件属性之间创建双向数据绑定。

<input [(ngModel)]="modelValue" placeholder="Edit me">
/****************************************************************************************************/
PS：注意事项
结构型指令（如*ngIf和*ngFor）通常以星号（*）前缀开始，这是Angular的语法糖，表示将<ng-template>元素和指令包装在一起。
属性型指令和事件绑定指令则直接使用方括号（[]）或圆括号（()）进行绑定。
双向数据绑定指令结合了属性绑定和事件绑定的特性，使用方括号和圆括号的组合（[()]）。

管道（Pipes）：用于在模板中进行数据转换和格式化，如日期格式化、货币转换等。

一、内置Pipes的使用
Angular提供了一系列内置Pipes，用于处理常见的数据转换需求。以下是一些常用内置Pipes的示例：

DatePipe：用于格式化日期和时间。
<p>今天的日期是: {{ currentDate | date:'fullDate' }}</p>
在组件中，你需要定义一个currentDate属性，并赋予它一个日期对象。然后，在模板中使用date管道，并传入所需的日期格式参数（如'fullDate'）。

CurrencyPipe：用于将数字格式化为货币格式。
<p>商品价格: {{ productPrice | currency:'USD':true }}</p>
这里，productPrice是一个数字，currency管道将其格式化为美元货币格式，并显示货币符号。

UpperCasePipe和LowerCasePipe：用于将字符串转换为大写或小写。
<p>原始字符串: {{ message }}</p>
<p>大写字符串: {{ message | uppercase }}</p>
<p>小写字符串: {{ message | lowercase }}</p>
NumberPipe：用于格式化数字，包括小数位数和千位分隔符等。
<p>{{ num | number:'1.2-4' }}</p>
这里，num是一个数字，number管道将其格式化为带有最多4位小数和至少2位小数的数字字符串。

JsonPipe：用于将对象转换为JSON字符串，便于调试。
<p>{{ {name: 'semlinker', age: 18} | json }}</p>
SlicePipe：用于从字符串或数组中截取部分内容。
<p>{{ 'Hello World' | slice:0:5 }}</p>
这里，从字符串'Hello World'中截取从索引0开始到索引5（不包括索引5）的子字符串。

PercentPipe：用于将数字格式化为百分比。
<p>{{ 0.25 | percent }}</p>
输出为25%。

AsyncPipe：用于处理异步数据（如Promise或Observable）。
<p>{{ asyncData | async }}</p>
这里，asyncData是一个Observable或Promise，async管道会自动订阅并显示异步数据。

二、自定义Pipes的创建与使用
除了内置Pipes外，Angular还支持自定义Pipes。自定义Pipes允许你创建可重用的数据转换逻辑，以适应特定的需求。

创建自定义Pipe
使用Angular CLI的命令来生成一个新的Pipe文件：

ng generate pipe capitalize
这将在项目中创建一个名为capitalize.pipe.ts的文件。

实现转换逻辑
在capitalize.pipe.ts文件中，实现自定义Pipe的转换逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}
这里，我们创建了一个名为CapitalizePipe的自定义Pipe，它实现了PipeTransform接口，并定义了transform方法来将字符串的首字母转换为大写。

在模板中使用自定义Pipe
一旦创建了自定义Pipe，你就可以在模板中使用它来转换数据：

<p>{{ name | capitalize }}</p>
这里，name是一个字符串变量，capitalize是我们自定义的Pipe名称。它会调用Pipe的transform方法，将name的值传递给Pipe进行处理。

服务（Services）：用于处理应用逻辑和数据流的对象，它们可以在多个组件之间共享。
依赖注入（Dependency Injection）：Angular的依赖注入系统允许声明组件或服务的依赖项，并在运行时自动注入这些依赖项。

一、创建Service
要创建一个新的Service，你可以使用Angular CLI提供的命令：

ng generate service 服务名称
或者简写为：

ng g s 服务名称
这将生成一个包含基本结构的.service.ts文件，其中包含一个可注入的服务类。

二、定义Service
在生成的.service.ts文件中，你可以定义服务的属性和方法。通常，你会使用@Injectable()装饰器来标记这个类为可注入的服务。

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

@Injectable({
  providedIn: 'root', // 这意味着服务将在整个应用中可用
})
export class MyService {
  constructor() { }

  // 定义服务的方法
  getData(): string {
    return 'Hello from MyService!';
  }
}
三、在Module中注册Service
在Angular中，服务需要在模块（Module）的providers数组中注册，以便Angular能够创建和管理这些服务的实例。但是，如果你使用了@Injectable({ providedIn: 'root' })装饰器，则无需在模块中显式注册服务，因为它会自动在整个应用中可用。

如果你没有使用providedIn: 'root'，则需要在模块中这样注册服务：

import { NgModule } from '@angular/core';
import { MyService } from './my.service';

@NgModule({
  providers: [MyService], // 在这里注册服务
  // ... 其他模块配置
})
export class AppModule { }
四、在组件中注入Service
一旦服务被创建并注册，你就可以在组件中通过构造函数注入的方式使用这个服务了。

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private myService: MyService) {
    // 使用服务的方法
    console.log(this.myService.getData());
  }
}
五、在模板中使用Service（可选）
虽然服务主要在组件的类中使用，但有时你可能需要在模板中直接访问服务的方法或属性。这通常不是最佳实践，因为模板应该保持简单并专注于展示数据。然而，如果你确实需要在模板中使用服务，你可以通过组件的属性或方法来间接访问服务。

例如，你可以在组件中定义一个方法来调用服务，并在模板中绑定这个方法的结果：

// 在组件类中
export class MyComponent {
  dataFromService: string;

  constructor(private myService: MyService) {
    this.dataFromService = this.myService.getData();
  }
}

// 在模板中
<p>{{ dataFromService }}</p>

• Angular开发工具与命令

Angular CLI：是开发Angular应用最快、最简单和推荐的方式。通过CLI可以创建项目、添加文件、运行测试等。
常用命令：（非常重要）

一、全局命令
查看Angular CLI版本

ng --version
这个命令用于查看当前安装的Angular CLI的版本号，以确保你正在使用正确版本的工具。

创建新的Angular项目

ng new <project-name> [options]
<project-name>：你想要创建的项目名称。
[options]：可选参数，如--routing（添加路由支持）、--style=less（使用LESS作为样式预处理器）、--skip-install（不自动安装依赖）等。
二、项目内部命令
创建组件

ng generate component <component-name>
或者简写为：

ng g c <component-name>
<component-name>：你想要创建的组件的名称。
创建服务

ng generate service <service-name>
或者简写为：

ng g s <service-name>
<service-name>：你想要创建的服务的名称。
创建模块

ng generate module <module-name>
或者简写为：

ng g m <module-name>
<module-name>：你想要创建的模块的名称。
可以通过添加--routing参数来同时创建该模块的路由配置。
启动开发服务器

ng serve
这个命令会启动Angular的开发服务器，并在浏览器中自动打开应用。默认情况下，应用会在http://localhost:4200/上运行。

构建生产环境的应用

ng build --prod
这个命令会构建用于生产环境的应用，并进行优化（如代码压缩、树摇等）。构建后的文件会存放在dist目录中。

查看应用版本和依赖信息

虽然ng --version用于查看Angular CLI的版本，但你也可以在项目根目录下运行npm list来查看项目的依赖包及其版本号。

三、其他常用命令
生成指令

ng generate directive <directive-name>
或者简写为：

ng g d <directive-name>
<directive-name>：你想要创建的指令的名称。
生成管道

ng generate pipe <pipe-name>
或者简写为：

ng g p <pipe-name>
<pipe-name>：你想要创建的管道的名称。
生成类、接口、枚举等

Angular CLI还支持生成类、接口、枚举等TypeScript基础结构。例如，生成一个类：

ng generate class <class-name>
或者简写为：

ng g cl <class-name>
<class-name>：你想要生成的类的名称。

• Angular进阶内容

表单管理：Angular提供了响应式表单和模板驱动表单两种表单处理方式，了解它们的特点和使用方法。
HTTP客户端：Angular提供了HttpClient模块来简化HTTP请求的处理。
性能优化：学习如何优化Angular应用的性能，如懒加载、代码分割等。
路由守卫与保护：使用路由守卫来控制访问权限，实现路由保护。
状态管理：可以使用NgRx（基于Redux模式的状态管理库）来管理应用的状态。