使用Angular CLI從藍本生成代碼

第一篇文章是: "使用angular cli生成angular5項目" : http://www.cnblogs.com/cgzl/p/8594571.html

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

ng generate <藍本名> 命令.

該命令的格式是 ng generate <藍本名> <參數>.

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

例如:

ng generate component person, 就會生成一個person.component.ts.

ng generate service sales-data 就會生成一個sales-data.service.ts.

ng generate class user-model 就會生成一個user-model.ts 裏面是UserModel類.

 

Components.

ng generate xxx xxx的命令仍是有點長, 這裏angular cli內置了命令的別名, 例如:

ng generate component person 這個命令, 

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

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

因此這兩個命令是相等的:

ng generate component person
ng g c person

 

能夠到這裏查看component相關的命令和別名:

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

可能經常使用的命令參數有: 

• --flat  表示是否不須要建立文件夾
• --inline-template (-it) 模板是否應該放在ts文件裏
• --inline-style (-is) 樣式是否應該放在ts文件裏.
• --spec 是否須要建立spec文件(測試文件)
• --view-encapsulation (-ve)  View Encapsulation策略 (簡單理解爲樣式文件的做用範圍策略).
• --change-detection (-cd) 變化檢查策略.
• --prefix 設定這個component的前綴
• --dry-run (-d), 打印出生成的文件列表, 而不直接生成.

看下面兩對做用相同的命令, 仍是使用別名方便:

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

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

 

 

下面來試試這些命令: 

創建項目: ng new my-app 等npm install結束後再進行操做.

創建好項目後, 進入該目錄, 執行命令:

ng g c person -d

該命令將會生成上述4個文件, 並更新app.module.ts.

下面把-d參數去掉, 生成文件:

能夠看到文件生成在項目裏了. 而且更新了app.module.ts, 在裏面作了component的聲明.

 

再試試生成另一個component, 使用一些參數 View Encapsulation 和 Change Detection Strategy:

ng g c student -ve Emulated -cd OnPush

 

能夠看到參數起做用了.

經過源碼管理頁, 能夠看到這兩個命令對app.module進行了哪些更新:

分別對生成的兩個component進行了聲明.

而後我commit一下..

 

Directive.

ng g d filter-box -d

 

這是文件報告, 下面真正的生成:

ng g d filter-box

 

經過vscode的源碼管理, 能夠看到變化:

directive生成了兩個文件和component同樣, 也在app.module進行了聲明.

看一下目錄結構:

生成的directive的結構是沒有目錄, 也就是flat的.

若是不想生成flat樣式的, 想讓其擁有本身的文件夾, 那麼就是用--flat參數:

ng g d filter-box2 --flat false

 

這樣就有本身的文件夾了.

commit一下.

 

Service.

ng g s order-data -d

 

能夠看到 這個命令會生成flat結構的service.

而後把-d去掉, 真實生成文件:

ng g s order-data

 

能夠從源碼管理看到, 只生成了兩個文件, 並無在app.module裏面註冊:

固然能夠在這裏寫代碼把剛纔生成的service註冊進去.

可是正確的作法是使用 -m 參數來指定須要註冊的module:

ng g s order-data2 -m app

 

此次生成的order-data2 service就會在app.module.ts裏面進行註冊了.

而後再commit一下.

 

Model/Interface/Enum/Pipe.

model:

ng g cl models/user

 

這個命令會建立models文件夾, 而後在裏面建立user這個model:

 

interface:

ng g i models/animal

 

enum:

ng g e models/gender

 

commit一下.

 

Pipe.

ng g p camel-case

 

除了生成兩個文件以外, 這個命令默認也會更新app.module.

 

Module.

ng g m login

能夠看到module默認是自帶文件夾的.

而後我試試添加一個component, 目的是要在login module進行聲明:

能夠看到我要建立的welcome component默認是在app.module裏面進行聲明的, 這時候若是想要在login module進行聲明, 就要使用 -m 參數:

去掉-d執行生成命令後:

能夠看到welcome component此次實在login module進行的聲明.

 

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