Angular快速生成文件基本命令

ng new

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

命令选项

 

参数

 

说明

 

--collection

-c

 

指定工程模板

属于高阶操作,暂不知道如何使用

 

--directory

 

指定新项目创建的目录名

 

--dryRun

-d

 

不生成实际文件

只是让你看下哪些文件将会生成

 

--force

-f

 

强制覆盖文件

默认情况下如果文件已经存在创建过程为中断

 

--inline-style

-s

 

指定使用行内样式

 

--inline-template

-t

 

指定使用行内模板

 

--new-project-root

 

指定新项目创建的路径

 

--prefix

-p

 

指定selector前缀

 

--routing

 

生成时自动包含

路由模块

 

--skip-git

-g

 

不生成初始化git仓库

 

--skip-install

 

不安装依赖

 

--skip-tests

-S

 

不创建测试文件

 

--style

 

默认值

css

,可选值

sass

less

 

--verbose

-v

 

显示详细运行日志

试了下似乎加不加没什么区别

 

--view-encapsulation

 

指定

视图的封装模式

默认情况下组件@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 @ 2022-03-29 19:39  攀上顶峰  阅读(880)  评论(0编辑  收藏  举报