【Web前端】Angular核心知识点梳理 - 详解

1. Angular 架构概述

1.1 核心概念

1）模块化架构 (NgModule)。

2）组件化开发。

3）依赖注入系统。

4）单向数据流。

5）TypeScript 支持。

1.2 平台支持

1）Web 应用 (浏览器)。

2）移动应用 (Ionic + Angular)。

3）桌面应用 (Electron + Angular)。

4）服务端渲染 (Angular Universal)。

2. 模块系统 (NgModule)

2.1 模块定义

@NgModule({
  declarations: [AppComponent, UserComponent], // 组件、指令、管道
  imports: [BrowserModule, HttpClientModule], // 导入其他模块
  providers: [UserService, AuthService],     // 服务提供者
  bootstrap: [AppComponent]                  // 根组件
})
export class AppModule { }

2.2 模块类型

1）根模块 (AppModule)

2）特性模块 (FeatureModule)

3）共享模块 (SharedModule)

4）核心模块 (CoreModule)

5）路由模块 (RoutingModule)

3. 组件系统

3.1 组件结构

@Component({
  selector: 'app-user',
  template: `
{{user.name}}
`,
  styleUrls: ['./user.component.css'],
  providers: [UserService]
})
export class UserComponent implements OnInit {
  @Input() user: User;
  @Output() userSelected = new EventEmitter();
  constructor(private userService: UserService) {}
  ngOnInit(): void {
    // 初始化逻辑
  }
}

3.2 组件生命周期钩子

export class UserComponent implements
  OnInit,        // 初始化
  OnDestroy,     // 销毁
  OnChanges,     // 输入属性变化
  AfterViewInit, // 视图初始化后
  AfterContentInit // 内容投影后
{
  ngOnInit() { /* 组件初始化 */ }
  ngOnChanges(changes: SimpleChanges) { /* 输入属性变化 */ }
  ngAfterViewInit() { /* 视图初始化后 */ }
  ngOnDestroy() { /* 组件销毁前清理 */ }
}

3.3 视图封装模式

1）Emulated (默认): 样式封装。

2）Native: 使用 Shadow DOM。

3）None: 全局样式。

4. 模板与数据绑定

4.1 数据绑定类型

{{title}}



保存

4.2 内置指令

条件显示
{{item.name}}

  活跃
  非活跃

4.3 模板引用变量

验证

5. 服务与依赖注入

5.1 服务创建

@Injectable({
  providedIn: 'root' // 根注入器
})
export class UserService {
  private apiUrl = '/api/users';
  constructor(private http: HttpClient) {}
  getUsers(): Observable {
    return this.http.get(this.apiUrl);
  }
}

5.2 依赖注入层次

1）根注入器 (全局单例)。

2）模块注入器 (模块级别)。

3）组件注入器 (组件级别)。

5.3 注入令牌

// 字符串令牌
export const API_URL = new InjectionToken('api.url');
// 在模块中提供
providers: [{ provide: API_URL, useValue: 'https://api.example.com' }]
// 在服务中注入
constructor(@Inject(API_URL) private apiUrl: string) {}

6. 路由系统

6.1 路由配置

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UserListComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: '**', component: PageNotFoundComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

6.2 路由导航

export class UserComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}
  navigateToUser(id: number) {
    // 编程式导航
    this.router.navigate(['/users', id]);
    // 带参数导航
    this.router.navigate(['/users'], { queryParams: { page: 1 } });
  }
  ngOnInit() {
    // 获取路由参数
    this.route.params.subscribe(params => {
      this.userId = params['id'];
    });
  }
}

6.3 路由守卫

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

7. 表单处理

7.1 模板驱动表单

  
  

    
用户名必填
    
用户名至少3位
  
  提交

7.2 响应式表单

export class UserFormComponent {
  userForm = new FormGroup({
    username: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [Validators.required, Validators.email]),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl('')
    })
  });
  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
  // 在模板中使用
  // 

  //   
  // 
}

8. HTTP 客户端

8.1 HTTP 服务

@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}
  // GET 请求
  getUsers(): Observable {
    return this.http.get('/api/users');
  }
  // POST 请求
  createUser(user: User): Observable {
    return this.http.post('/api/users', user);
  }
  // 带选项的请求
  searchUsers(term: string): Observable {
    const options = {
      params: new HttpParams().set('search', term)
    };
    return this.http.get('/api/users/search', options);
  }
}

8.2 错误处理

getUsers(): Observable {
  return this.http.get('/api/users').pipe(
    catchError(this.handleError)
  );
}
private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // 客户端错误
    console.error('客户端错误:', error.error.message);
  } else {
    // 服务端错误
    console.error(`服务端错误 ${error.status}: ${error.error}`);
  }
  return throwError('发生错误，请重试');
}

9. 状态管理

9.1 服务状态管理

@Injectable({ providedIn: 'root' })
export class UserStore {
  private users = new BehaviorSubject([]);
  private loading = new BehaviorSubject(false);
  users$ = this.users.asObservable();
  loading$ = this.loading.asObservable();
  loadUsers() {
    this.loading.next(true);
    this.userService.getUsers().subscribe(users => {
      this.users.next(users);
      this.loading.next(false);
    });
  }
}

9.2 NgRx 状态管理 (可选)

// Action
export const loadUsers = createAction('[User] Load Users');
export const loadUsersSuccess = createAction(
  '[User] Load Users Success',
  props<{ users: User[] }>()
);
// Reducer
export const userReducer = createReducer(
  initialState,
  on(loadUsers, state => ({ ...state, loading: true })),
  on(loadUsersSuccess, (state, { users }) => ({
    ...state,
    users,
    loading: false
  }))
);
// Effect
loadUsers$ = createEffect(() => this.actions$.pipe(
  ofType(loadUsers),
  mergeMap(() => this.userService.getUsers().pipe(
    map(users => loadUsersSuccess({ users })),
    catchError(() => of(loadUsersFailure()))
  ))
));

10. 性能优化

10.1 变更检测策略

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 使用 OnPush 策略
})
export class UserListComponent {
  @Input() users: User[];
}

10.2 懒加载

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

10.3 跟踪函数

  {{user.name}}

trackByUserId(index: number, user: User): number {
  return user.id;
}

11. 测试

11.1 组件测试

describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UserComponent],
      imports: [HttpClientTestingModule],
      providers: [UserService]
    }).compileComponents();
  });
  beforeEach(() => {
    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('应该创建组件', () => {
    expect(component).toBeTruthy();
  });
  it('应该显示用户名称', () => {
    component.user = { id: 1, name: '张三' };
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('张三');
  });
});

12. 高级特性

12.1 动态组件

export class ModalService {
  constructor(private componentFactoryResolver: ComponentFactoryResolver,
              private injector: Injector) {}
  createModal(component: Type): ComponentRef {
    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
    return factory.create(this.injector);
  }
}

12.2 自定义指令

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() appHighlight: string;
  constructor(private el: ElementRef) {}
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.appHighlight || 'yellow');
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

12.3 自定义管道

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

13. Angular CLI 重要命令

# 创建新项目
ng new my-app
# 生成组件
ng generate component user-list
# 生成服务
ng generate service user
# 生成模块
ng generate module admin
# 构建项目
ng build --prod
# 运行测试
ng test
# 运行端到端测试
ng e2e

14. 总结

Angular 是一个完整的前端框架，具有以下核心特点：

1）模块化架构：通过 NgModule 组织代码。

2）组件化开发：可复用的 UI 组件。

3）依赖注入：强大的服务管理。

4）TypeScript 支持：类型安全和更好的开发体验。

5）强大的工具链：Angular CLI 提供完整的开发工作流。

6）丰富的生态系统：路由、表单、HTTP 等内置功能。