新手必看：Angular完全指南 | 13分钟学会

▌ 技术引导 Angular 是一个基于 TypeScript 的前端框架，适合构建大型企业级应用。13 分钟内能掌握它的核心玩法，前提是必须理解它的模块化结构、依赖注入机制和组件通信方式。真实项目中，我见过不少新手因为模块懒加载配置错误，导致页面加载时间飙升 300%。更致命的是，很多人在组件之间传递数据时，误用 ViewChild 或 ng-content，结果在服务端渲染时出现严重的结构混乱。模块化是 Angular 的底层逻辑，必须通过 ng generate 命令和 routing module 来完成。环境变量配置不当，也会让项目从本地环境直接崩溃在生产环境。我见过有人在构建时忘记设置 --prod 标志，导致依赖树没有被优化，最终打包体积比预期大了 4 倍。这些细节在实际开发中都会直接暴露，容不得半点马虎。 ▌ 技术参考 一 Angular 项目初始化时，必须通过 ng new 命令创建，否则无法正常使用依赖注入和模块系统。运行 ng new my-app --routing --style=scss 会同时启用路由和 SCSS 样式，节省后续配置时间。创建后，立即运行 ng generate component 组件名，Angular 会自动创建 component.ts、component.html、component.css 文件。模块系统是 Angular 的核心，所有组件必须归属于 module，否则无法编译。在 app.module.ts 中，用 @NgModule 装饰器包裹，导入 BrowserModule 和 AppRoutingModule，同时声明 AppComponent。注意，模块导入必须使用 import 语句，不能直接写路径，否则会报模块未找到错误。模块懒加载配置需要在 AppRoutingModule 中使用 loadChildren 方法，并确保路径正确。 二 Angular 的依赖注入系统依赖于 providers 配置，所有服务必须在模块中注册。运行 ng generate service service-name 会自动生成 service.ts 文件，里面默认有一个 injectable 装饰器。服务注入时，需要在 component 中使用 constructor 注入，否则无法访问服务方法。例如：constructor(private myService: MyService) {}。如果服务未在模块 providers 中声明，组件无法调用。模块 providers 配置在 @NgModule 装饰器里，比如 providers: [MyService]。服务之间通信可以通过事件总线或者 RxJS 的 Subject 实现。在实际项目中，我见过有人误将服务实例直接作为参数传递，导致多个组件实例同时调用同一个服务，引发数据污染和错误。必须通过依赖注入来确保服务单例。 三 Angular 的组件通信有三种主要方式：父组件到子组件通过 @Input()，子组件到父组件通过 @Output()，以及通过 Service 进行全局通信。@Input() 是父组件传递数据的桥梁，比如 { ... })。我见过有人在组件间使用 ViewChild 来访问子组件，结果在服务端渲染时出现异常，因为 Angular 的视图渲染机制在服务端不支持动态组件创建。组件通信必须通过静态方式，如 @Input() 和 @Output()，或者在服务层统一管理数据。 四 路由系统在 Angular 中必须通过 AppRoutingModule 来配置，不能直接在 AppModule 中定义。动态路由使用 ActivatedRoute 来获取参数，比如 this.route.snapshot.paramMap.get('id')。懒加载路由必须用 loadChildren 方法，并确保路径正确。例如：{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }。我在实战中发现，如果懒加载模块没有正确设置 RouterModule，会导致页面空白或 404 错误。另外，路由守卫需要通过 canActivate 配置，并在组件中注入 ActivatedRoute 和 Router。有时会因为守卫逻辑错误，导致路由跳转失败或页面无法加载。务必在路由配置中检查路径和模块是否存在。 五 Angular 的构建系统默认使用 Angular CLI，构建命令为 ng build。生产环境构建需要加上 --prod 标志，这样会触发 AOT 编译和 Tree Shaking，打包体积减少 30%-50%。同时，使用 --output-hashing=all 可以防止缓存问题，确保每次构建都生成新的文件名。我在多个项目中发现，使用 --build-optimizer 会降低首次构建时间，但可能影响调试效率。构建后的 dist 文件夹需要部署到服务器，推荐使用 Nginx 或 Apache。如果部署到 CDN，需要配置正确的路径和缓存策略，否则会出现 404 或 500 错误。构建过程中如果有多个模块，必须确保所有模块都已正确导入，否则会报模块未找到。 六 Angular 的组件样式可以通过 SCSS、CSS 或 LESS 来编写，但推荐使用 SCSS，因为它支持嵌套和变量。样式文件必须与组件同名，例如 component.scss。在组件中，通过 styleUrls: ['component.scss'] 来引入样式。如果样式需要全局应用，必须在 styles.css 或 styles.scss 中定义。我在项目中遇到过组件样式被全局样式覆盖的问题，原因是在组件中未使用 scoped 样式，导致样式污染。Angular 14 支持更灵活的样式配置，可以在 component.html 中直接写样式，或者使用 @Component 装饰器的 styles 属性。建议统一使用 SCSS 所有项目样式，确保一致性。 七 Angular 的模块懒加载可以通过动态导入实现，必须在 AppRoutingModule 中设置 loadChildren 方法。例如：import('./lazy/lazy.module').then(m => m.LazyModule)。懒加载模块需要独立的 module 文件，并在其中配置路由。模块加载失败时，会报 Missing export 错误，通常是因为模块未正确导出或路径错误。我在实际项目中发现，如果懒加载模块没有正确设置 exports，会导致组件无法访问模块中的服务或组件。此外，懒加载模块必须使用 NgModule 装饰器，并配置 RouterModule.forRoot 还是 RouterModule.forChild，取决于是否是根模块。配置错误会导致路由无法解析，页面跳转失败。 八 Angular 的依赖注入需要在模块的 providers 数组中声明，否则无法被组件使用。例如，在 AppModule 中加入 providers: [MyService]。服务注入时，必须在组件的 constructor 中使用，否则无法调用。我见过有人在组件中误写为 constructor(private myService: MyService) { super() } 导致服务未正确注入。服务之间可以通过注入其他服务来实现依赖关系，但必须确保依赖链的完整性。如果某个服务未被注入，整个依赖树会崩溃。此外，在服务中使用 HttpClient 时，必须在 AppModule 中注入 HttpClientModule，否则无法发起请求。依赖注入是 Angular 的核心机制，忽视这个细节会导致项目无法运行。 九 Angular 的组件生命周期钩子包括 ngOnInit、ngOnChanges、ngDoCheck、ngAfterViewInit 等，每个钩子对应不同的执行时机。ngOnInit 在组件初始化后调用，适合执行数据获取或初始化逻辑。在 ngAfterViewInit 中调用子组件的方法，可以确保子组件已经渲染。我在项目中遇到过组件未完全渲染就调用子组件方法的情况，导致数据错误。此外，使用 ngDoCheck 可以监听数据变化，但频繁调用会影响性能。生命周期钩子必须合理使用，避免重复渲染或不必要的计算。如果组件频繁更新，建议使用 ChangeDetectorRef 来手动控制检测。 十 Angular 的模块化结构允许将功能模块分离，比如创建一个 SharedModule 来存储常用组件和服务。共享模块需要使用 @NgModule({ declarations: [], exports: [] })，确保组件和服务可以被其他模块导入。我在多个项目中发现，共享模块未正确导出导致组件无法使用，必须在模块配置中设置 exports。此外，每个模块应该只负责一个功能领域，避免模块臃肿。模块之间可以通过导入方式共享，但必须确保模块路径正确。如果模块中含有路由，必须使用 RouterModule.forChild 配置，否则会报路由重复错误。模块化是 Angular 的核心设计，合理拆分模块能显著提高代码维护性。 十一 Angular 的组件样式可以通过 CSS Modules 或 SCSS 来实现，但推荐使用 SCSS，因为它支持变量和嵌套。样式文件必须和组件同名，比如 component.scss。在组件中使用 styleUrls: ['component.scss'] 来引入。如果样式需要全局应用，必须在 styles.css 或 styles.scss 中定义。我见过有人在项目中误将组件样式写在全局样式文件中，导致样式污染。Angular 14 支持更灵活的样式配置，可以在 component.html 中直接写样式，或者使用 @Component 的 styles 属性。建议统一使用 SCSS 所有项目样式，确保一致性。 十二 Angular 的路由守卫分为 canActivate、canActivateChild、canLoad 三种，分别用于控制组件是否可访问、子路由是否可访问、模块是否可加载。canActivate 需要通过 canActivate 方法返回 boolean，如果返回 false 会阻止路由跳转。我在项目中遇到过守卫逻辑错误导致路由无法跳转，比如未正确处理异步数据。canLoad 守卫用于懒加载模块，可以避免模块在页面加载时就被初始化。如果守卫逻辑复杂，建议使用 RxJS 的 Observable 返回值，而不是直接返回 boolean。守卫配置必须在 AppRoutingModule 中定义，否则不会生效。路由守卫是控制访问权限的重要手段，不能忽视。 十三 Angular 的构建配置可以通过 angular.json 文件进行调整，比如修改 build 配置中的 options 字段。outputPath 必须指向正确的 dist 目录，否则部署失败。如果使用 AOT 编译，必须在 build 选项中设置 aot: true。Tree Shaking 配置在 optimization 中，通过设置 optimization: true 启用，这样会移除未使用的代码。我在项目中发现，如果未启用 Tree Shaking，打包体积会比预期大 30% 以上。此外，使用 --build-optimizer 会提升构建速度，但可能影响调试，需要根据实际情况调优。构建过程中如果遇到问题，可以通过 --verbose 参数查看详细日志。 十四 Angular 的模块懒加载需要配置 loadChildren 方法，并确保模块路径正确。例如：{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }。懒加载模块必须使用 NgModule 装饰器，并配置 RouterModule.forChild。如果模块未正确导出，会导致组件无法被访问。我在项目中遇到过懒加载模块未正确导入导致 404 错误，必须检查模块路径和 RouterModule 的配置。此外，使用 loadChildren 会增加首次加载时间，但能显著减少初始包体积。如果项目存在大量路由，建议使用路由分组或模块拆分，避免路由树过于庞大。懒加载是优化性能的重要手段，但配置复杂。 十五 Angular 的组件通信可以通过 Event Emitter 实现，比如在子组件中使用 @Output() 创建事件，并在父组件中监听。例如，子组件中：@Output() dataChanged = new EventEmitter(); 父组件中：@ViewChild(ChildComponent) child: ChildComponent; 通过 child.dataChanged.subscribe(value => { ... })。我见过有人误将数据直接写在子组件中，导致父组件无法获取更新。此外，使用 RxJS 的 Subject 可以在多个组件间传递数据，但必须确保 Subject 的生命周期管理。如果 Subject 在组件销毁时未被清理，会导致内存泄漏。建议使用 BehaviorSubject 或 ReplaySubject 来管理数据流，确保数据一致性。组件通信是项目稳定性的重要因素，不能随意处理。