为什么喜欢Angular

自从接触到Angular就被Angular的语法深深吸引着，从17年开始接触angular4，6，7, 8这几个版本，到现在的19版本，都已经在项目中使用过了。也见证这angular的发展。为什么对我有这么大的新引力呢，我也想过，简单总结一下

class、ts、装饰器的写法

我从jquery和bootstrap开发项目，慢慢接触阮一峰老师的es6的书，再到angular。发现angular对jq项目有绝对的碾压。在angular项目中可以直接使用class、module、ts、装饰器等。真的不要太好用了。当然这还不是最吸引我的地方。下面就简单总结一下：

rxjs

angular是基于rxjs写的，不需要额外的引用，rxjs使用方法不难，但是深度结合业务去使用很难。
这是我博客详情页面右侧目录的部分代码，当文章渲染之后，监听页面滚动，当页面到达手机端尺寸的时候停止监听，超过手机端尺寸的时候恢复监听（手机端会对目录放置到顶端，监听滚动也没有了意义，会停止监听），还加上了很多滤波功能。

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
private initScrollListener(): void {
    let els: HTMLElement[] = [];
    this.appRef.isStable.pipe(
      first(isStable => isStable === true),
      switchMap(()=>{
          els = this.el.nativeElement.querySelectorAll('h1, h2, h3, h4');
          return fromEvent(document, 'scroll')
      }),
      distinctUntilChanged((p: any, q: any) => p.y !== q.y),
      map(() => this.getTopTitle(els)),
      filter(v => !!v),
      debounceTime(300),
      takeUntil(this.setting.isMobile$.pipe(filter(Boolean))),
      repeat({
        delay: () => this.setting.isMobile$.pipe(
          filter(v => !v),
          take(1)
        )
      }),
      takeUntilDestroyed(this.destroyRef),
      catchError(err => {
        console.error('Scroll handler error:', err);
        return EMPTY;
      }),
    ).subscribe((v) => {
      this.setSideMenuActive(v as string);
    });
  }

依赖注入

极大的方便了代码的灵活性，灵活解耦复杂的逻辑。下面是一个常用方法，先获取父级的依赖注入的配置，没有的话用自己的依赖注入配置，这样保证了组件配置的灵活性

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: [
    insProvide{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(){

}

暂时总结了这些，大家会不会心动？