第一篇文章是: "使用angular cli生成angular5項(xiàng)目" :http://www.dbjr.com.cn/article/136621.htm

這篇文章主要是講生成 Components, Directive, Service, class, interface, enum等等.

ng generate <藍(lán)本名> 命令.

該命令的格式是 ng generate <藍(lán)本名> <參數(shù)>.

也可以使用--dry-run參數(shù)來列出要生成的文件, 而不是真的生成.

例如:

ng generate component person, 就會(huì)生成一個(gè)person.component.ts.

ng generate service sales-data 就會(huì)生成一個(gè)sales-data.service.ts.

ng generate class user-model 就會(huì)生成一個(gè)user-model.ts 里面是UserModel類.

Components.

ng generate xxx xxx的命令還是有點(diǎn)長, 這里angular cli內(nèi)置了命令的別名, 例如:

ng generate component person 這個(gè)命令,

里面的generate 可以使用字母 g 代替,

里面的component 可以使用字母 c 代替.

所以這兩個(gè)命令是相等的:

ng generate component person
ng g c person

可以到這里查看component相關(guān)的命令和別名:

https://github.com/angular/angular-cli/wiki/generate-component

可能常用的命令參數(shù)有:

1. --flat  表示是否不需要?jiǎng)?chuàng)建文件夾
2. --inline-template (-it) 模板是否應(yīng)該放在ts文件里
3. --inline-style (-is) 樣式是否應(yīng)該放在ts文件里.
4. --spec 是否需要?jiǎng)?chuàng)建spec文件(測試文件)
5. --view-encapsulation (-ve)  View Encapsulation策略 (簡單理解為樣式文件的作用范圍策略).
6. --change-detection (-cd) 變化檢查策略.
7. --prefix 設(shè)定這個(gè)component的前綴
8. --dry-run (-d), 打印出生成的文件列表, 而不直接生成.

看下面兩對(duì)作用相同的命令, 還是使用別名方便:

ng generate component person
ng generate component person --inline-template --inline-style

ng g c person
ng g c person -it -is

下面來試試這些命令:

建立項(xiàng)目: ng new my-app 等npm install結(jié)束后再進(jìn)行操作.

建立好項(xiàng)目后, 進(jìn)入該目錄, 執(zhí)行命令:

ng g c person -d

該命令將會(huì)生成上述4個(gè)文件, 并更新app.module.ts.

下面把-d參數(shù)去掉, 生成文件:

可以看到文件生成在項(xiàng)目里了. 并且更新了app.module.ts, 在里面做了component的聲明.

再試試生成另外一個(gè)component, 使用一些參數(shù) View Encapsulation 和 Change Detection Strategy:

ng g c student -ve Emulated -cd OnPush

可以看到參數(shù)起作用了.

通過源碼管理頁, 可以看到這兩個(gè)命令對(duì)app.module進(jìn)行了哪些更新:

分別對(duì)生成的兩個(gè)component進(jìn)行了聲明.

然后我commit一下..

Directive.

ng g d filter-box -d

這是文件報(bào)告, 下面真正的生成:

ng g d filter-box

通過vscode的源碼管理, 可以看到變化:

directive生成了兩個(gè)文件和component一樣, 也在app.module進(jìn)行了聲明.

看一下目錄結(jié)構(gòu):

生成的directive的結(jié)構(gòu)是沒有目錄, 也就是flat的.

如果不想生成flat樣式的, 想讓其擁有自己的文件夾, 那么就是用--flat參數(shù):

ng g d filter-box2 --flat false

這樣就有自己的文件夾了.

commit一下.

Service.

ng g s order-data -d

可以看到 這個(gè)命令會(huì)生成flat結(jié)構(gòu)的service.

然后把-d去掉, 真實(shí)生成文件:

ng g s order-data

可以從源碼管理看到, 只生成了兩個(gè)文件, 并沒有在app.module里面注冊(cè):

當(dāng)然可以在這里寫代碼把剛才生成的service注冊(cè)進(jìn)去.

但是正確的做法是使用 -m 參數(shù)來指定需要注冊(cè)的module:

ng g s order-data2 -m app

這次生成的order-data2 service就會(huì)在app.module.ts里面進(jìn)行注冊(cè)了.

然后再commit一下.

Model/Interface/Enum/Pipe.

model:

ng g cl models/user

這個(gè)命令會(huì)創(chuàng)建models文件夾, 然后在里面創(chuàng)建user這個(gè)model:

interface:

ng g i models/animal

enum:

ng g e models/gender

commit一下.

Pipe.

ng g p camel-case

除了生成兩個(gè)文件之外, 這個(gè)命令默認(rèn)也會(huì)更新app.module.

Module.

ng g m login

可以看到module默認(rèn)是自帶文件夾的.

然后我試試添加一個(gè)component, 目的是要在login module進(jìn)行聲明:

可以看到我要?jiǎng)?chuàng)建的welcome component默認(rèn)是在app.module里面進(jìn)行聲明的, 這時(shí)候如果想要在login module進(jìn)行聲明, 就要使用 -m 參數(shù):

去掉-d執(zhí)行生成命令后:

可以看到welcome component這次實(shí)在login module進(jìn)行的聲明.

今天先寫到這, 更多的參數(shù)還是要查看官方文檔:https://github.com/angular/angular-cli

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論