Angular怎么代码规范？看完就会写

▌ 技术引导 Angular代码规范不是停留纸面的口令，是真实开发中踩过无数坑后总结出的血泪经验。你可能已经用过Angular CLI，但没用好它的配置文件就是浪费。我在一个中型项目里，因为没严格遵循代码规范，导致多人协作时组件结构混乱、编译时间拉长、测试覆盖率低，甚至牵扯出一些隐藏的类比问题。代码规范要从结构、命名、依赖注入、模板语法、模块划分五个维度入手。比如使用Angular CLI的`--strict`参数，开启TypeScript严格模式，能提前发现几十种潜在错误。还有angular.json里的build配置，必须统一使用`production`和`development`模式，否则打包后页面会卡顿。别以为代码规范只是写法上的问题，它直接关系到项目维护成本、代码可读性，甚至是后续迁移的难度。 ▌ 技术参考 一 Angular代码规范的核心在于降低认知负担，提高团队协作效率。TypeScript的严格模式是关键，必须在angular.json的`build`配置中设置`strict`: true。这样能强制要求类型定义，避免隐式类型带来的错误。我见过很多项目因为没开严格模式，导致在升级Angular版本时，出现大量类型相关错误，调试成本极高。在代码层面，每个组件应该有清晰的命名规则，比如`feature-list.component.ts`和`feature-list.module.ts`，模块和组件要分离，避免模块过度膨胀。组件内部的变量名建议用`private`修饰，尤其是内部逻辑不对外暴露的。 二 Angular CLI提供了丰富的代码规范工具，比如`ng lint`和`ng format`。lint检查的规则可以配置在`tsconfig.json`中，通过`eslintConfig`属性引入。我曾在一个项目中，误将`@angular-eslint/rule-pack`的规则集设置错了，导致代码中的一些语法错误被忽略。比如在模板中使用`[attr.disabled]`而不是`(click)`来控制按钮点击，这个细节容易让新人误操作。正确的做法是使用`ng lint --fix`一键修复所有格式问题，确保代码统一。另外，tsconfig.json的`noImplicitAny`选项必须设为true，避免隐式any类型带来的潜在错误。 三 组件之间的通信要遵循单向数据流原则，避免直接操作DOM，用`@Input()`、`@Output()`来管理数据传递。我曾踩过一个坑，直接在模板里操作`div`的`innerHTML`属性，结果在安全审查时被标记为风险，不得不重新用`DomSanitizer`处理。事件使用`EventEmitter`而不是直接调用方法，能保证事件的可追踪性和可扩展性。模块之间不要随意导入组件，除非它们确实属于同一个功能模块。模块划分不清晰会导致应用结构混乱，后期维护困难。在模块结构中，`feature`模块和`shared`模块要泾渭分明，避免代码冗余。 四 环境变量要通过Angular的`environment.ts`和`environment.prod.ts`来统一管理，而不是直接硬编码在代码中。在构建时，使用`--configuration=production`来加载对应的环境配置。我之前在一个项目中，误把API地址写在组件中，导致部署到生产环境后出现404错误，这才意识到环境变量的统一管理有多重要。另外，Angular的依赖注入系统要充分利用，避免直接new实例。这样能提高代码的可测试性和可维护性。对于服务类，建议使用`@Injectable()`装饰器，并在模块中用`providers`注册，而不是在组件中直接注入。 五 TypeScript的类型定义要尽可能具体，避免使用泛型。比如在组件中定义`@Input() items: Array`，而不是`@Input() items: any`。我见过一些新手在组件中使用any类型，导致编译器无法给出有效的提示，代码维护成本剧增。同时要善用`@Component`的`selector`属性，确保组件能被正确引用。避免使用`#myVar`这样的模板变量，除非真的需要在模板中直接操作DOM元素。使用纯函数来处理逻辑，避免在组件内部写复杂的业务逻辑，这样更利于单元测试和代码复用。 六 Angular的模板语法要规范，避免使用未经定义的属性。比如`[ngClass]`必须配合`class`属性，不能直接写`[class.my-class]`，否则需要额外的配置。模板中的事件处理要统一使用`()`而不是`click`，避免和原生事件冲突。我之前在写一个表单组件时，误用了`[(ngModel)]`和`[ngModel]`混用，导致双向绑定失效，花了两天才排查出来。模板中的条件判断要使用`ngIf`而非`if`，否则会出现语法错误。同时，模板中的循环要使用`ngFor`而非`for`，否则无法触发Angular的变更检测。 七 在Angular应用中，避免使用全局变量，除非有特殊用途。全局变量容易造成命名冲突，特别是在大型项目中。我曾在一个项目中，因为一个组件在`index.html`中定义了`window.myVar`，结果另一个组件误用了这个变量，导致功能错误。环境变量应通过`environment`模块来注入，而不是通过`window`对象。对于第三方库的引入，也要规范使用`npm install`命令，避免手动拷贝文件到项目中。使用Angular CLI的`ng add`命令来集成库，会自动处理依赖和配置问题，省去大量手动操作。 八 代码结构要保持一致，尤其是组件和模块的布局。组件应放在`src/app/feature/`目录下，模块则放置在`src/app/feature/`的子目录中。这样能保证项目结构清晰，便于后期维护。我之前在一个项目中，把所有组件都放在同一个文件夹，导致模块划分混乱，代码查找效率低下。此外，服务类应放在`src/app/core/`或`src/app/shared/`目录下，按功能分类。这样的结构能提高代码的可读性和可维护性，减少团队协作时的误解。 九 Angular的`RouterModule`配置要规范，避免多个模块中重复定义路由。使用`RouterModule.forRoot`来配置核心路由，`RouterModule.forChild`来配置子路由。我一次项目中因为没按这个方式配置，导致多个模块的路由冲突，页面加载出错。路由配置文件建议统一放在`src/app/feature/`目录下的`routing.module.ts`中，这样能保证结构清晰。同时，避免在路由中使用`loadChildren`来动态加载模块，除非确实需要按需加载，否则会导致路由解析延迟，影响用户体验。 十 Angular的样式文件要统一使用CSS或SCSS，避免混用。样式文件应该放在组件目录下，使用`@Component`的`styleUrls`属性来引用。我之前在一个项目中，把样式文件写在全局文件里，结果在不同环境部署时样式不一致，产生了大量样式冲突。使用`@angular-devkit/build-angular`中的`angular.json`配置文件，统一设置`style`和`styleExt`，能确保所有组件使用相同的样式规范。同时，避免使用内联样式，尽量通过类名控制样式，这样更利于复用和维护。 十一 Angular的单元测试要考虑覆盖率，使用`@angular/core`和`@angular/common`模块提供的测试工具。测试文件应放在`src/app/feature/`目录下的`feature-list.component.spec.ts`中，与组件文件相对应。我曾在一个项目中因为测试覆盖率不足，导致上线后出现了一些隐藏的bug，后来不得不回滚。在测试中，使用`compileComponents()`和`fixture.detectChanges()`来确保组件状态正确。测试用例应覆盖所有可能的输入，比如`@Input()`和`@Output()`的不同情况，确保代码健壮性。 十二 Angular的依赖注入要避免循环依赖，尤其是在服务之间。循环依赖会导致应用启动时崩溃，调试困难。我之前在写一个`auth.service`和`user.service`时，不小心形成了循环依赖，结果应用无法启动，必须重新设计依赖关系。使用`forwardRef`函数来延迟注入，能有效解决这个问题。依赖注入的组件应该通过`@Injectable()`装饰器声明，并在模块的`providers`数组中注册，而不是在组件中直接创建实例。这样能让依赖关系更清晰，也更利于测试和维护。 十三 Angular的懒加载模块配置要规范，避免资源加载混乱。使用`RouterModule.forChild`配合`loadChildren`来实现懒加载，能减少初始加载时间。我曾在一个项目中，因为模块没有正确设置懒加载，导致应用在加载时出现大量未处理的组件，影响性能。懒加载模块的配置文件要放在单独的文件夹中，例如`src/app/feature/my-feature/feature.module.ts`，这样能保证结构清晰。同时，使用`@angular/router`提供的`loadChildren`函数，能动态加载模块，减少首屏加载压力。 十四 Angular的构建配置要统一，尤其是`angular.json`文件中的`build`和`test`配置。`production`模式和`development`模式的配置要分开，避免打包时出现错误。我之前在一个项目中，误将`optimization`设为true，导致某些功能模块无法加载，结果花了几个小时才排查出来。`angular.json`中的`outputPath`要统一设置，避免不同环境打包路径混乱。使用`--configuration=production`和`--configuration=development`来区分构建环境，能确保代码在不同阶段的行为一致。 十五 Angular的代码规范要结合团队实际情况，不能一刀切。比如在小团队中，可以允许部分简化，但在大团队中必须严格遵循。我曾在一个项目中，使用了`@angular-eslint`工具，配置了`eslint`规则，这样能自动检测代码中的一些常见错误。配置文件放在`tsconfig.json`中，通过`eslintConfig`引入规则集，这样能确保所有代码符合规范。同时，使用`ng lint`和`ng format`来自动检查和格式化代码，能减少人工干预，提高开发效率。代码规范不是目标，而是手段，让代码更清晰、更容易维护。