自从接触到angular就被angular的语法深深吸引着，从17年开始接触angular4，6，7, 8这几个版本，到现在的19版本，都已经使用过了。也见证这angular的发展。
为什么对我有这么大的新引力呢，我也想过，简单总结一下
class、ts、装饰器的写法
我从jquery和bootstrap开发项目，慢慢接触阮一峰老师的es6的书，再到angular。就会发现angular对jq项目的绝对碾压。
在angular项目中可以直接使用class，module。真的不要太好用了。当然这还不是最吸引我的地方。
rxjs
angular是基于rxjs写的，不需要额外的引用，rxjs使用方法不难，但是很难深度的结合业务去使用。
不妨看一下这篇文章，感受一下它的魅力
tracking user interaction area
依赖注入
极大的方便了代码的灵活性，灵活的解耦复杂的逻辑。
下面是一个常用方法，先获取父级的依赖注入的配置，没有的话用自己的依赖注入配置，这样保证了组件配置的灵活性
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
export function provideOptions<T>(
provide: InjectionToken<T>,
options: Partial<T>,
fallback: T,
): FactoryProvider {
return {
provide,
useFactory: (): T => ({
...(inject(provide, {optional: true, skipSelf: true}) || fallback),
...options,
}),
};
}
let BTNOPTIONS = new InjectionToken<T>('BTNOPTIONS')
export function btnOptions(options:Partial<BtnOptions> ):FactoryProvider{
return provideOptions(BTNOPTIONS, options, {size: m}) // size:m 是默认的大小
}
// 使用
@Directive({
...
providers: [
btnOptions({size: 'l'})
]
...
})
第二个使用场景
通过依赖注入的方式，加载指令，更加灵活
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export abstract class PositionAccessor {
public abstract getPosition(rect: DOMRect, element?: HTMLElement): Point;
}
// 提供依赖
@Directive({
standalone: true,
providers: [
{PositionAccessor, DropdownPosition, false}
]
})
export class DropdownPosition extends PositionAccessor {
}
// 通过依赖注入的方式，获取DropdownPosition
private readonly accessor = inject(PositionAccessor);
新增加的功能
新版本的angular使用起来也更加舒服了。
hostDirective新版本中增加了这个功能，超级好用。
signal配合computed和effect 简化了很多逻辑。
在html中可以这样使用
1
2
3
4
5
6
7
8
9
10
@if(bool){
<span>等待中</span>
}@else{
}
@for(){
}
@defer{
}
暂时总结了这些，大家会不会心动？