angular学习笔记

  1. 1. init
  2. 2. 模块
  3. 3. 组件
  4. 4. 路由
    1. 4.1. app-routing.module.ts
    2. 4.2. html 中
    3. 4.3. component.ts
      1. 4.3.1. 跳转
      2. 4.3.2. 获取
    4. 4.4. 辅助路由
    5. 4.5. 路由守卫
      1. 4.5.1. routes
      2. 4.5.2. canActivate
      3. 4.5.3. CanDeactivate
      4. 4.5.4. Resolve
  5. 5. 依赖注入
  6. 6. 数据绑定
    1. 6.1. 插值表达式
    2. 6.2. 属性表达式
    3. 6.3. 事件绑定
  7. 7. 响应式编程
  8. 8. 管道
  9. 9. 组件间通信
    1. 9.1. 路由属性
    2. 9.2. 输入属性
    3. 9.3. 输出属性
    4. 9.4. 中间人模式(有共同的父组件)
  10. 10. 组件生命周期
  11. 11. 表单
    1. 11.1. 数据模型
    2. 11.2. 两种表单比较
    3. 11.3. 模板式表单
    4. 11.4. 响应式表单
    5. 11.5. 指令对照表
    6. 11.6. 校验
  12. 12. 和服务器通讯
  13. 13. build

init

1
2
3
4
5
6
7
8
9
10
# 使用 yarnpkg 只需要设置一次
ng config -g cli.packageManager yarn
# 新建项目 有路由, 无测试, scss
ng new $project --routing -S --style=scss

# 添加 material
yarnpkg add @angular/material @angular/cdk @angular/animations

# 生成 component
ng g c $name

模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@NgModule({
declarations: [
组件,
指令,
管道
],
imports: [
依赖模块
],
providers: [
服务
],
bootstrap: [
主组件
]
})

组件

component

路由

route

app-routing.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const routes: Routes = [
// 路由重定向
{
path: '',
redirectTo: '/home',
pathMath: 'full',
},
// 基本路由配置
{
path: 'home',
component: HomeComponent,
data: [
{
isProd: true,
},
],
},
{
path: 'children',
// 子路由
children: [
{
path: '',
component: Children1Component,
},
{
path: 'xxx/:id',
component: Children2Component,
},
],
},
// 默认路由
{
path: '**',
redirectTo: '',
},
];

html 中

1
2
3
4
5
<!-- routerLink数组,   queryParams 对象 -->
<a [routerLink]="['/product', id]" [queryParams]="{debug: 1}">XXXX</a>

<!-- 在标签下面展示路由内容 -->
<router-outlet></router-outlet>

component.ts

跳转

1
2
3
4
5
6
7
constructor(private router: Router){}

this.router.navigate(["/", id], {
queryParams: {
debug: 1
}
})

获取

1
2
3
4
5
6
7
8
9
constructor(private routeInfo: ActivatedRoute) {
routeInfo.params.subscribe((params: Params) => this.productId = params["id"]);
routeInfo.queryParams.subscribe((params: Params) => this.test = params["test"]);

this.id = routeInfo.snapshot.params['id'];

// 路由中配置 data: [{isprod: true}]
this.isProd = routeInfo.snapshot.data[0]['isProd'];
}

辅助路由

aux

路由守卫

routes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
path: 'product/:id',
component: ProductComponent,
// 在路由激活之前获取数据
resolve: {
product: ProductResolveGuard
},
// 处理导航到某个路由
canActivate: [LoginGuard],
// 处理从当前路由离开
canDeactivate: [UnsavedGuard],
data: [{
isProd: true
}],
}

canActivate

1
2
3
4
5
6
7
8
9
10
11
12
export class LoginGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let loggedIn: boolean = Math.random() < 0.5;
if (!loggedIn) {
console.log('LoginGuard:用户未登录' + new Date());
}
return loggedIn;
}
}

CanDeactivate

1
2
3
4
5
export class UnsavedGuard implements CanDeactivate<ProductComponent> {
canDeactivate() {
return window.confirm('你还没有保存.确定要离开么?');
}
}

Resolve

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Injectable()
export class ProductResolveGuard implements Resolve<ProductComponent> {
constructor(private router: Router) {}

resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<ProductComponent> | Promise<ProductComponent> | ProductComponent {
let productId: number = route.params['id'];

if (productId == 1) {
return undefined;
} else {
this.router.navigate(['/home']);
return undefined;
}
}
}

依赖注入

DI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
providers: [
LoggerService,
{
provide: ProductService,
// 单例, 只在第一次需要的时候初始化
useFactory: (logger: LoggerService, appConfig) => {
if (appConfig.isDev) {
return new ProductService(logger);
} else {
return new AnotherProductService(logger);
}
},
// 提供参数
deps: [LoggerService, 'APP_CONFIG'],
},
{
// 变量
provide: 'APP_CONFIG',
useValue: {
isDev: false,
},
},
];

数据绑定

插值表达式

1
<h1>{{title}}</h1>

属性表达式

1
<img [src]="imgUrl">

事件绑定

bind

响应式编程

RxJS 学习笔记

管道

1
2
3
4
5
6
7
8
9
10
11
@Pipe({
name: 'multiple',
})
export class MultiplePipe implements PipeTransform {
transform(value: number, args?: number): any {
if (!args) {
args = 1;
}
return value * args;
}
}

组件间通信

路由属性

获取路由属性

输入属性

1
2
3
// 子组件 component 中
@Input()
price: number;
1
2
<!-- 父组件html中 -->
<child-component [price]="some-value"></child-componen>

输出属性

1
2
3
4
5
6
// 子组件
@Output('priceChange')
lastPrice:EventEmitter<number> = new EventEmitter();

// some trigger
this.lastPrice.emit(10);
1
2
<!-- 父组件中 -->
<child-component (lastPrice)="priceHandle($event)"></child-component>
1
2
3
4
// 父组件中
priceHandle(event: number) {
console.log('price: ', event)
}

中间人模式(有共同的父组件)

1
2
3
4
5
// child1 组件
@Output('priceChange')
lastPrice:EventEmitter<number> = new EventEmitter();

this.lastPrice.emit(10);
1
2
3
<!-- 父组件 -->
<child1-component (lastPrice)="priceHandle($event)"></child1-component>
<child2-component [lastPrice]="lastPrice"></child2-component>

组件生命周期

life

表单

数据模型

angular/form模块中特定的类(FormControl, FormGroup, FormArray)组成

两种表单比较

模板式表单 响应式表单
import FormsModule ReactiveFormsModule
如何构造 通过组件模板中相关指令 通过编写 typescript 代码
数据模型创建 angular 基于模板中的指令隐式创建 编码明确创建数据模型
能否直接访问数据模型 不能
HTML 直接生成 自己编写绑定数据

模板式表单

  • NgFrom 会自动添加到 <form> 表单上
  • 手动添加 NgFrom: <form #myForm="ngForm">
  • <form>表单的提交不会被触发
  • 实现 (ngSubmit)="onSubmit(myForm.value)"
  • NgForm 元素下 寻找标记为 NgModel 属性的元素(需要指定name属性才能绑定)

响应式表单

  • formGroupformControl 需要属性绑定语法
  • formGroupName, formControlName, formArrayName 不需要属性绑定语法
  • formGroupName, formControlName, formArrayName 只能用在 formGroup 指令覆盖的范围内

指令对照表

类名 模板式表单指令 响应式表单指令
FormGroup ngFrom
ngModelGroup
formGroup
formGroupName
FormControl ngModel formControl
formControlName
FormArray formArrayName

校验

  • formControl 校验器
1
2
3
4
5
6
function mobileValidator(control: FormControl): any {
let value = (control.value || '') + '';
var mobileReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
let valid = mobileReg.test(value);
return valid ? null : { mobile: true };
}
  • formGroup 校验器
1
2
3
4
5
6
7
8
9
10
11
function equalValidator(group: FormGroup): any {
let password: FormControl = group.get('password') as FormControl;
let pconfirm: FormControl = group.get('pconfirm') as FormControl;

let valid: boolean = false;
if (password && pconfirm) {
valid = password.value === pconfirm.value;
}

return valid ? null : { equal: { description: '密码和确认密码不匹配!' } };
}
  • 异步校验器 (返回 observable)
1
2
3
function mobileAsyncValidator(control: FormControl): any {
return Observable.of(valid ? null : { mobile: true }).delay(5000);
}
  • 在 响应式表单中 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
constructor(fb: FormBuilder) {
this.formModel = fb.group({
// 初始值 同步校验器 异步校验器
mobile: ['', mobileValidator, mobileAsyncValidator],
// 多个同步校验器
username: ['', [Validators.required, Validators.minLength(5)]],
passwordsGroup: fb.group(
{
password: ['', Validators.minLength(6)],
pconfirm: [''],
},
// formGroup 校验器
{ validator: equalValidator }
),
})
}

onSubmit() {
let isValid: boolean = this.formModel.get('username').valid;
let errors: any = this.formModel.get('username').errors;

if (this.formModel.valid) {
console.log(this.formModel.value);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<form [formGroup]="formModel" (submit)="onSubmit()">
<!-- 同步校验 -->
<div [hidden]="formModel.get('username').valid || formModel.get('username').untouched">
<!-- hasError的第一个参数是 校验器返回的对象的key, 不是校验器的名称 -->
<div [hidden]="!formModel.hasError('required', 'username')">
用户名是必填项
</div>
<div [hidden]="!formModel.hasError('minlength', 'username')">
用户名最小长度是5
</div>
</div>

<!-- 异步校验 -->
<div>
手机号:<input type="number" formControlName="mobile">
</div>
<div [hidden]="!formModel.get('mobile').pending">
正在校验手机号合法性
</div>
<div [hidden]="formModel.get('mobile').valid || formModel.get('mobile').pristine">
<div [hidden]="!formModel.hasError('mobile', 'mobile')">
请输入正确的手机号
</div>
</div>

<!-- formGroup 校验 -->
<div formGroupName="passwordsGroup">
<div>密码:<input type="password" formControlName="password"></div>
<div [hidden]="!formModel.hasError('minlength', ['passwordsGroup','password'])">
密码最小长度是6
</div>
<div>确认密码:<input type="password" formControlName="pconfirm"></div>
<div [hidden]="!formModel.hasError('equal', 'passwordsGroup')">
<!-- 从校验器中获取错误信息 -->
{{formModel.getError('equal', 'passwordsGroup')?.description}}
</div>
</div>
</form>
  • 在 模板式表单 使用
1
2
3
4
5
6
7
8
9
10
// 先封装成一个 指令
@Directive({
// 中括号 括起来
selector: '[mobile]',
// provide 是固定的 useValue 从 validator 引入 multi: true
providers: [{ provide: NG_VALIDATORS, useValue: mobileValidator, multi: true }],
})
export class MobileValidatorDirective {
constructor() {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
constructor() { }
ngOnInit() {}

onSubmit(value:any, valid:boolean){
console.log(valid);
console.log(value);
}

usernameValid:boolean = true;
usernameUntouched:boolean = true;

// 模板式表单获取 状态
onUsernameInput(form:NgForm) {
if(form) {
this.usernameValid = form.form.get("username").valid;
this.usernameUntouched = form.form.get("username").untouched;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                                        <!-- 传递表单值      传递表单状态  -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value, myForm.valid)" novalidate>
<div>用户名:<input ngModel required minlength="6" name="username" type="text"
(input)="onUsernameInput(myForm)">
<!-- 模板式表单获取 状态 -->

</div>
<div [hidden]="usernameValid || usernameUntouched">
<!-- myForm.form -->
<div [hidden]="!myForm.form.hasError('required','username')">
用户名是必填项
</div>
<div [hidden]="!myForm.form.hasError('minlength','username')">
用户名最小长度是6
</div>
</div>
</form>

和服务器通讯

HttpClient

build

  1. 添加环境配置(如 staging)
    编辑 angular.json, 仿照 projects.architect.build.configurations.staging 下添加环境变量

  2. build 的时候加入 --configuration

1
2
#                使用哪个 config          输出路径
ng build --prod --configuration=${env} --output-path dist