Angular快速生成文件基本命令

ng new

作用:创建一个已被初始化的Angular应用

命令选项

默认情况下组件@Component是这样的:

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})

如果,使用了-s-t后,是这样子的:

@Component({ selector: 'app-root', template: ` <h1>Tour of Heroes</h1> <app-hero-main [hero]="hero"></app-hero-main> `, styles: ['h1 { font-weight: normal; }']})

如果,使用了-p zx后,是这样子的:

@Component({ selector: 'zx-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})

ng generate

代码生成神器,能会是开发过程中,使用最频繁的一个命令

常规用法

ng generate component <name> [options]:生成一个组件

ng generate module <name> [options]:生成一个模块

ng generate directive <name> [options]:生成一个指令

ng generate class <name> [options]:生成一个类

ng generate guard <name> [options]:生成一个守卫

ng generate interface <name> [options]:生成一个接口

ng generate enum <name> [options]:生成一个枚举

ng generate pipe <name> [options]:生成一个管道

ng generate service <name> [options]:生成一个服务

快捷用法

ng g c <name> [options]:生成一个组件

ng g m <name> [options]:生成一个模块

ng g d <name> [options]:生成一个指令

ng g cl <name> [options]:生成一个类

ng g g <name> [options]:生成一个守卫

ng g i <name> [options]:生成一个接口

ng g e <name> [options]:生成一个枚举

ng g p <name> [options]:生成一个管道

ng g s <name> [options]:生成一个服务

option其他大同小异,接下来就来罗列一下,备查

component-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--project:项目名称

--inline-style (alias: -s):使用行内有样式

--inline-template (alias: -t):使用行内模板

--view-encapsulation (alias: -v):视图的封装模式,ViewEncapsulation

--change-detection (alias: -c):指定变化检查策略,ChangeDetectionStrategy

--prefix (alias: -p):指定组件指令选择器前缀

--styleext:指定组件样式文件名后缀,暂不清楚意义何在

--spec:是否生成单元测试文件,默认true,可选false

--flat:不生成独立目录,直接生成在src/app

--skip-import:不会自动import到模块

--selector:指定指令选择器

--module (alias: -m):在哪个module中声明(import)

--export:组件导入的模块,是否export组件

module-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--project:项目名称

--routing:生成的时候包含routing

--routing-scope:routing的组用于

--spec:是否生成单元测试文件,默认true,可选false

--flat:不生成独立目录,直接生成在src/app

--module (alias: -m):在哪个module中声明(import)

directive-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--project:项目名称

--prefix (alias: -p):指定指令选择器前缀

--spec:是否生成单元测试文件,默认true,可选false

--skip-import:不会自动import到模块

--selector:指定指令选择器

--flat:不生成独立目录,直接生成在src/app

--module (alias: -m):在哪个module中声明(import)

--export:组件导入的模块,是否export组件

class-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--project:项目名称

--spec:是否生成单元测试文件,默认true,可选false

--type:指定class文件类型,name.type.ts

guard-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--spec:是否生成单元测试文件,默认true,可选false

--flat:不生成独立目录,直接生成在src/app

--module (alias: -m):在哪个module中声明(import)

--project:项目名称

interface-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--project:项目名称

--prefix:前缀,文件name.ts,直接接口名称是prefixName

enum-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--project:项目名称

pipe-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--project:项目名称

--flat:不生成独立目录,直接生成在src/app

--spec:是否生成单元测试文件,默认true,可选false

--skip-import:不会自动import到模块

--module (alias: -m):在哪个module中声明(import)

--export:组件导入的模块,是否export组件

service-选项

--dry-run (alias: -d):不生成实际文件

--force (alias: -f):强制覆盖文件

--project:项目名称

--flat:不生成独立目录,直接生成在src/app

--spec:是否生成单元测试文件,默认true,可选false

ng serve

作用:构建应用,并本地web开发服务器

ng serve [options]

常用的options:

--open (alias: -o):直接在浏览器中打开

--aot:使用AOT编译

--prod:按照生产环境配置启动

其他参见ng serve --help

其他命令

ng build

ng lint

ng test

ng e2e

ng get/ng set

ng doc

ng xi18n

ng update

posted @   攀上顶峰  阅读(979)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
点击右上角即可分享
微信分享提示