這次給大家?guī)?lái)Angular CLI+Angular 5實(shí)戰(zhàn)項(xiàng)目演示，Angular CLI+Angular 5實(shí)戰(zhàn)項(xiàng)目演示的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

安裝angular cli:

npm?install?-g?@angular/cli

不過(guò)首先要確保您安裝了比較新版本的nodejs.

今天主要通過(guò)以下幾個(gè)方面介紹Angular CLI:

• 生成項(xiàng)目

• 參數(shù)介紹

• 配置和自定義CLI

• 檢查和修復(fù)代碼

• 生成新項(xiàng)目:

ng?new?my-app

這個(gè)命令會(huì)生成一個(gè)新的項(xiàng)目叫做my-app并把該項(xiàng)目的文件放在my-app這個(gè)文件夾下.

項(xiàng)目生成完的時(shí)候別忘了cd進(jìn)入到my-app目錄.

另一個(gè)選項(xiàng)是使用--dry-run參數(shù):

ng?new?my-app?--dry-run

使用這個(gè)參數(shù)呢, 不會(huì)真的生成項(xiàng)目, 而是會(huì)打印出來(lái)如果創(chuàng)建該項(xiàng)目的話(huà)哪些文件將會(huì)生成.

另外一個(gè)常用的參數(shù)是--skip-install:

ng?new?my-app?--skip-install

這個(gè)命令作用是, 生成完項(xiàng)目文件之后不執(zhí)行npm install這個(gè)動(dòng)作.

不過(guò)以后還是需要手動(dòng)執(zhí)行npm install的.

使用--help參數(shù)可以查看幫助:

ng?new?--help

下面我要生成一個(gè)項(xiàng)目, 先不執(zhí)行npm install:

這個(gè)速度非?？? 然后使用我最喜歡的IDE VSCode將其打開(kāi):

code?.

看看整個(gè)的項(xiàng)目結(jié)構(gòu), 以及package.json:

scripts下面是一些預(yù)定義的項(xiàng)目命令:

start 是運(yùn)行項(xiàng)目的意思, 執(zhí)行npm start即可, 或者直接執(zhí)行ng serve也可以.

npm build / ng build 是執(zhí)行構(gòu)建.......

不一一介紹了.

然后看下dependencies:

我們使用的是angular 5.2.0, 前面的^符號(hào)表示, 我們使用的版本號(hào)是大于等于5.2.0的但是肯定會(huì)小于6.

最下面是devDependencies, 里面都是開(kāi)發(fā)時(shí)用的工具庫(kù), 可以看到angular cli就在里面.

接下來(lái)看看angular-cli.json這個(gè)文件:

angular-cli.json:

它是angular cli針對(duì)該項(xiàng)目的配置文件.

里面的prefix比較有趣, 它是所有生成的components和directives的默認(rèn)前綴.

可以查看一下app.component.ts:

它的前綴就是app.

如果想更改默認(rèn)前綴的話(huà), 就可以修改angular-cli.json文件里面的prefix屬性值了, 如果改成sales, 那么以后生成的components和directives的前綴就是sales. 但是對(duì)已經(jīng)生成的components/directives就不起作用了.

那么如何保證生成的項(xiàng)目的components/directives前綴是您想要的呢?

就是使用ng new的另一個(gè)參數(shù) --prefix:

ng?new?sales-app?--prefix?sales

這時(shí)里面生成的component的selector就是:

angular-cli.json文件里面的prefix:

在生成的項(xiàng)目里可以看到, 同時(shí)還生成了spec文件. 如果我不想讓我的項(xiàng)目生成spec文件呢?

ng new也有這個(gè)參數(shù)--skip-tests:

ng?new?my-app2?--skip-tests

可以看到, 并沒(méi)有生成任何spec文件.

ng new的參數(shù)一共有這些:

有幾個(gè)介紹過(guò)的, 其他的例如:

--skip-git: 生成項(xiàng)目的時(shí)候就不會(huì)把它初始化為git repository, 默認(rèn)是初始化為git repository的.

--directory: 可以設(shè)定生成的目錄, 默認(rèn)是使用的項(xiàng)目名稱(chēng).

--style: 可以設(shè)定樣式的類(lèi)型, 默認(rèn)是css, 例如可以改成scss.

也可以通過(guò)--inline-style把樣式的寫(xiě)法設(shè)為行內(nèi)樣式, 這個(gè)默認(rèn)是false的.

下面我來(lái)生成一個(gè)使用scss樣式的項(xiàng)目:

可以看到生成的是styles.scss, app.component.scss文件, angular cli不僅會(huì)生成scss文件, 而且也會(huì)編譯它們.

查看angular-cli.json, 可以在文件的下方看到采用的是scss樣式文件:

這樣, 以后生成的component的默認(rèn)樣式文件就是scss了.

最后我想介紹一下這個(gè)參數(shù), --routing:

如果想手動(dòng)為項(xiàng)目配置路由的話(huà), 還是需要一些步驟的, 所以可以使用這個(gè)參數(shù)直接生成帶路由配置的項(xiàng)目.

看一下項(xiàng)目路由文件:

再查看一下app.module:

可以看到import了AppRoutingModule.

綜上, ng new 的這些參數(shù)可以在生成項(xiàng)目的時(shí)候作為命令的參數(shù)聯(lián)合使用, 其中有一些參數(shù)也可以在項(xiàng)目生成以后通過(guò)修改angular-cli.json文件來(lái)做修改.

比較推薦的做法是:

在生成項(xiàng)目的時(shí)候使用: --routing, --prefix, --style, --dry-run參數(shù). 首先通過(guò)--dry-run參數(shù), 確保會(huì)生成哪些文件是否正確, 確認(rèn)后把--dry-run參數(shù)去掉, 生成文件.

下面我生成一個(gè)項(xiàng)目, 并且執(zhí)行npm install:

命令執(zhí)行完, 可以看到如下的項(xiàng)目結(jié)構(gòu);

里面有node_modules目錄了, 也就是所有的包都安裝好了, 接下來(lái)我可以運(yùn)行該項(xiàng)目了:

ng?serve?-o

其中的-o(--open)參數(shù)表示運(yùn)行項(xiàng)目的時(shí)候打開(kāi)默認(rèn)瀏覽器.

查看瀏覽器http://localhost:4200:

ng serve的優(yōu)點(diǎn)是, 當(dāng)代碼文件有變化的時(shí)候會(huì)自動(dòng)重新構(gòu)建并且刷新瀏覽器, 您可以試一下.

另外一種配置CLI的方法 ng set.

前面我介紹了使用ng new參數(shù)和修改angular-cli.json文件的方式來(lái)配置cli, 下面我介紹下通過(guò)ng set <屬性> <值> 來(lái)配置cli.

就拿當(dāng)前這個(gè)項(xiàng)目來(lái)說(shuō), 它的默認(rèn)樣式文件類(lèi)型是scss:

如果我在該項(xiàng)目目錄執(zhí)行:

ng?set?defaults.styleExt?css

那么該項(xiàng)目的設(shè)置就會(huì)改變:

如果使用參數(shù) -g(--global), 那就會(huì)進(jìn)行一個(gè)全局的配置, 這個(gè)配置會(huì)保存在一個(gè)文件里(如果還沒(méi)有任何去安居配置的情況下這個(gè)文件并不存在), 這個(gè)文件應(yīng)該在users/xxx目錄下, mac的話(huà)應(yīng)該在home目錄下.

它不會(huì)影響到已經(jīng)存在的項(xiàng)目. 但是如果新生成的項(xiàng)目不指定ng new的參數(shù)情況下, 默認(rèn)就會(huì)采用全局的配置:

Lint:

使用命令ng lint.

首先可以查看一下幫助:

ng?lint?--help

--fix: 嘗試修復(fù)lint出現(xiàn)的錯(cuò)誤.

--format: lint的輸出格式.

首先我針對(duì)上面的my-app6執(zhí)行ng lint:

沒(méi)有問(wèn)題.

然后我故意弄出來(lái)幾處錯(cuò)誤/不規(guī)范的寫(xiě)法:

然后再執(zhí)行ng lint:

可以看到這些錯(cuò)誤都被詳細(xì)的列了出來(lái).

把格式化的參數(shù)加進(jìn)去:

可以看到現(xiàn)在lint結(jié)果的顯示更直觀了一些.

下面執(zhí)行ng lint --fix:

執(zhí)行后lint的錯(cuò)誤減少到了一個(gè), 看下代碼:

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

如何在項(xiàng)目中使用p5.js鍵盤(pán)交互

webpack.config.js參數(shù)使用教程

Atas ialah kandungan terperinci Angular CLI+Angular 5實(shí)戰(zhàn)項(xiàng)目演示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!