第一篇文章是: "使用angular cli生成angular5項目" :https://www.jb51.net/article/136621.htm
員工經(jīng)過長期磨合與沉淀,具備了協(xié)作精神,得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念,因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站制作、做網(wǎng)站、微信公眾號開發(fā)、電商網(wǎng)站開發(fā),微信平臺小程序開發(fā),軟件按需制作等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
這篇文章主要是講生成 Components, Directive, Service, class, interface, enum等等.
ng generate <藍本名> 命令.
該命令的格式是 ng generate <藍本名> <參數(shù)>.
也可以使用--dry-run參數(shù)來列出要生成的文件, 而不是真的生成.
例如:
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內(nèi)置了命令的別名, 例如:
ng generate component person 這個命令,
里面的generate 可以使用字母 g 代替,
里面的component 可以使用字母 c 代替.
所以這兩個命令是相等的:
ng generate component person ng g c person
可以到這里查看component相關(guān)的命令和別名:
https://github.com/angular/angular-cli/wiki/generate-component
可能常用的命令參數(shù)有:
看下面兩對作用相同的命令, 還是使用別名方便:
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結(jié)束后再進行操作.
建立好項目后, 進入該目錄, 執(zhí)行命令:
ng g c person -d
該命令將會生成上述4個文件, 并更新app.module.ts.
下面把-d參數(shù)去掉, 生成文件:
可以看到文件生成在項目里了. 并且更新了app.module.ts, 在里面做了component的聲明.
再試試生成另外一個component, 使用一些參數(shù) View Encapsulation 和 Change Detection Strategy:
ng g c student -ve Emulated -cd OnPush
可以看到參數(shù)起作用了.
通過源碼管理頁, 可以看到這兩個命令對app.module進行了哪些更新:
分別對生成的兩個component進行了聲明.
然后我commit一下..
Directive.
ng g d filter-box -d
這是文件報告, 下面真正的生成:
ng g d filter-box
通過vscode的源碼管理, 可以看到變化:
directive生成了兩個文件和component一樣, 也在app.module進行了聲明.
看一下目錄結(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
可以看到 這個命令會生成flat結(jié)構(gòu)的service.
然后把-d去掉, 真實生成文件:
ng g s order-data
可以從源碼管理看到, 只生成了兩個文件, 并沒有在app.module里面注冊:
當然可以在這里寫代碼把剛才生成的service注冊進去.
但是正確的做法是使用 -m 參數(shù)來指定需要注冊的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
這個命令會創(chuàng)建models文件夾, 然后在里面創(chuàng)建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進行聲明:
可以看到我要創(chuàng)建的welcome component默認是在app.module里面進行聲明的, 這時候如果想要在login module進行聲明, 就要使用 -m 參數(shù):
去掉-d執(zhí)行生成命令后:
可以看到welcome component這次實在login module進行的聲明.
今天先寫到這, 更多的參數(shù)還是要查看官方文檔:https://github.com/angular/angular-cli
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
名稱欄目:使用AngularCLI從藍本生成代碼詳解
標題網(wǎng)址:http://bm7419.com/article34/jcsope.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、品牌網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站改版、網(wǎng)站設(shè)計、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)