angular快速入门

angular简介

1. 与angularJS的区别

路由

依据：SPA

名称	简介
Routes	路由配置
RouterOutlet	在html中标记路由内容呈现的占位符指令
Router	负责运行时执行路由的对象
RouterLink	在html中 <a> 标签中使用
ActivatedRoute	当前激活的路由对象,保存着当前路由的信息

1. 重定向路由redirectTo

   { path: '', redirectTo: '/player/player-list', pathMatch: 'full' },
   

2. 子路由

   {
   path: 'account',
   loadChildren: () => import('account/account.module').then(m => m.AccountModule), // Lazy load account module
   data: { preload: true }
   },
   
    {
   path: '',
   component: AccountComponent,
   children: [
       { path: 'login', component: LoginComponent },
       { path: 'register', component: RegisterComponent }
   ]
   }
   
   

3. 辅助路由

   <a [routerLink]="[{outlets:{aid: null}}]">显示</a>
   <router-outlet></router-outlet>
   <router-outlet name="aid"></router-outlet>
   

4. 路由守卫

   1. 适用于：
      • 只有登录并拥有权限才能访问当前路由
      • 当前未执行保存操作试图离开时候提醒用户等

   { path: 'users', component: UsersComponent, data: { permission: 'Pages.Users' }, canActivate: [AppRouteGuard] },
   

依赖注入

1. 注入器及其层级关系

     constructor(injector: Injector) {
   	super(injector);
   }
   

2. 提供器

    { provide: HTTP_INTERCEPTORS, useClass: JWTInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: SimpleInterceptor, multi: true },
   

3. 使用工厂和值声明提供器

   {
       provide: APP_INITIALIZER,
       useFactory: StartupServiceFactory,
       deps: [StartupService],
       multi: true,
   },
   

数据绑定、响应式编程和管道

1. 双向绑定 [(ngModel)]

2. 管道

   export class LocalizePipe extends AppComponentBase implements PipeTransform {
   
   constructor(injector: Injector) {
       super(injector);
   }
   
   transform(key: string, ...args: any[]): string {
       return this.l(key, ...args);
   }
   }
   

组件间通讯

参考：https://angular.cn/guide/component-interaction

1. 输入属性@Input()

   @Input() player:PlayerDto;
   

2. 输出属性@Output()

   @Output() onSave = new EventEmitter<any>();
   this.onSave.emit();
   

3. 服务

   用于无父子关系等的组件之间通讯

   private data = new Subject<boolean>();
   data$ = this.data.asObservable();
   setData(xdata: boolean) {
   this.data.next(xdata);
   }
   

4. 生命周期钩子lifecycle-hooks

   • ngOnChanges()
   • ngOnInit()
   • ngAfterContentInit()
   • ngAfterViewInit()
   • …
   • ngOnDestroy()

表单

zorro -from

1. 分类
   • 模板式表单
   • 响应式表单
2. 表单的验证
3. 表单处理
4. 状态字
   • touched/untouched
   • dirty

构建与部署

1. 构建
2. 部署
3. 多环境
   • 开发环境
   • 生产环境