angular创建细节.md 3.9 KB


只生成.spec.ts文件

ng g c my-component --skip-import --skip-style --skip-template --skip-tests=false


在 Angular 中,创建模块和组件通常使用 Angular CLI 工具来快速生成必要的文件和代码。以下是相关命令及其选项的概述:

创建 Modules

使用以下命令创建一个新的 Angular 模块:

ng generate module ModuleName

或者简写形式:

ng g m ModuleName

可选参数:

  • --routing:生成一个带有路由配置的模块。这将同时创建一个用于定义路由的文件。
  • --commonModule:默认情况下会导入 CommonModule 而不是 BrowserModule。此选项对于非根模块特别有用。

创建 Components

要创建一个新的 Angular 组件,请使用以下命令:

ng generate component ComponentName

或其简写形式:

ng g c ComponentName

可选参数:

  • --standalone:指定是否创建独立组件。独立组件不需要声明于任何 NgModule 中,可以直接引导应用或被其他独立组件/指令等引用。
  • --export:当与 --module 一起使用时,它会将组件导出,使得该模块外部的组件可以使用这个组件。
  • --flat:如果设置,不为组件创建单独的目录。默认情况下,CLI 会为每个新组件创建一个新目录。
  • --module-m:指定组件应声明于哪个模块中。这对于组织大型项目中的代码非常有用。
  • --skipTests-t:跳过测试文件(.spec.ts)的生成。如果你不想要为组件自动生成测试文件,可以使用这个选项。
  • --inlineStyle-s:指示样式应内联添加到组件中而不是通过外部文件。
  • --inlineTemplate-t:指示模板应内联添加到组件中而不是通过外部文件。

这些选项可以帮助你根据项目的需要定制生成的代码结构。例如,使用 --standalone 可以让你更灵活地组织应用程序,而 --routing 则有助于设置模块级别的路由。

Component 相关选项

样式相关

  • --style=scss:指定组件样式表的格式为 SCSS(Sassy CSS)。其他可用的样式预处理器包括 css, sass, less, 和 styl。选择适合项目的样式语言有助于代码组织和维护。

测试文件相关

  • .spec.ts 文件是单元测试文件。当你创建一个组件或服务时,Angular CLI 默认会同时创建对应的 .spec.ts 文件,用于编写该组件或服务的单元测试。
  • 不生成 .spec.ts 文件的影响:如果你选择了 --skipTests=true 选项来跳过测试文件的生成,那么你将失去自动为你创建的基础测试框架,这可能使得后续手动添加测试变得更加困难。此外,缺少单元测试可能会导致代码质量下降,因为没有自动化的方式来验证你的组件或服务是否按预期工作。

Module 相关选项

对于模块来说,主要关注的是其内部结构和如何集成组件和服务。虽然模块本身通常不直接关联特定的样式或测试文件配置(除了它包含的组件),但你可以通过以下选项影响其生成:

  • --routing:如果设置,会生成一个带有路由配置的模块,便于模块级别的导航。
  • --commonModule:默认情况下导入 CommonModule 而不是 BrowserModule,适用于非根模块。

总结

  • 样式选项(如 --style=scss)允许你根据项目需求选择合适的样式预处理器。
  • .spec.ts 文件 是非常重要的,它们用于编写单元测试,确保代码的质量和功能符合预期。如果不生成这些文件,可能会导致后期维护难度增加,以及缺乏对代码更改的即时反馈。

因此,在开发过程中,除非有特别的原因,否则建议保留 .spec.ts 文件的生成,并利用这些测试来提高代码质量和稳定性。