前面我們已經(jīng)準(zhǔn)備好開發(fā)環(huán)境，現(xiàn)在可以正式開發(fā)了。正如前面提到的，Angular 提供了一個(gè)命令行工具，可以簡化我們的程序開發(fā)。我們今后的開發(fā)也會(huì)使用這一工具，因此我們需要首先安裝這個(gè)名為 Angular CLI 的開發(fā)工具。

安裝 CLI 的過程很簡單，與安裝其它工具、甚至是安裝一個(gè)普通開發(fā)包沒什么區(qū)別。我們前面已經(jīng)配置好 NPM Registry、安裝成功 yarn，那么就使用 yarn 來安裝這個(gè)工具。具體的命令是：

yarn global add @angular/cli

參數(shù) global 說明是在全局安裝； add 說明是在“添加”；最后是 CLI 的包名，沒有注明版本好的話，會(huì)讓 yarn 安裝最新版的 CLI。。這一語句與之前 NPM 的

npm install -g @angular/cli

是等價(jià)的。

之后我們運(yùn)行

ng version

如果能夠輸出 Angular CLI 的版本號(hào)，說明安裝成功。注意，Angular CLI 的所有命令都是以 ng 開始的。

Angular CLI 建立在 webpack 基礎(chǔ)之上，可以幫助我們生成 Angular 項(xiàng)目框架，生成 Angular 模塊、組件、指令等。如果手動(dòng)搭建這一開發(fā)環(huán)境，需要了解 webpack 的各種細(xì)節(jié)、編寫各種自動(dòng)化腳本等，要求較高的前端開發(fā)技術(shù)。考慮到我們的基礎(chǔ)教程，使用 CLI 輔助開發(fā)無疑是合適的。我們會(huì)在后面的章節(jié)中詳細(xì)介紹 Angular CLI 的使用，如果你對(duì) Angular CLI 感興趣，可以通過其官方網(wǎng)站 了解更多的細(xì)節(jié)。

剛剛安裝完成的 CLI 默認(rèn)使用 NPM 作為包管理工具。我們希望使用 yarn，只需運(yùn)行下面的命令：

ng set --global packageManager=yarn

反之，如果想換回 NPM，只需使用

ng set --global packageManager=npm

即可。

安裝好 Angular CLI，下面我們來創(chuàng)建第一個(gè)示例工程，了解 Angular CLI 的基本使用。

首先，使用

ng new demo

創(chuàng)建一個(gè)演示項(xiàng)目。 new 是創(chuàng)建一個(gè)全新項(xiàng)目，后面的 demo 是項(xiàng)目的名字。Angular CLI 會(huì)幫我們生成完整的項(xiàng)目框架——包括項(xiàng)目所需所有文件、文件結(jié)構(gòu)以及各種輔助文件等。之后，Angular CLI 會(huì)自動(dòng)運(yùn)行 yarn install ，這是在安裝項(xiàng)目所需要的各種依賴。安裝過程會(huì)比較漫長，需要耐心等待一段時(shí)間。

當(dāng)出現(xiàn)類似上面的界面，提示“Projecy ‘demo' successfully created”時(shí)，表示項(xiàng)目已經(jīng)創(chuàng)建完成。如果有錯(cuò)誤，需要檢查安裝過程或者網(wǎng)絡(luò)連接等。

項(xiàng)目創(chuàng)建完畢，會(huì)在當(dāng)前目錄下生成一個(gè)項(xiàng)目文件夾。之后我們可以進(jìn)入項(xiàng)目目錄

cd demo

然后運(yùn)行

ng serve

ng serve 命令會(huì)編譯項(xiàng)目，然后啟動(dòng)一個(gè)內(nèi)置的小型服務(wù)器，我們就可以通過瀏覽器查看項(xiàng)目的運(yùn)行結(jié)果。注意上面的提示：NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/，也就是說，這個(gè)服務(wù)器的地址應(yīng)該是 http://localhost:4200，我們只要用瀏覽器訪問這個(gè)地址即可：

可以看到 Angular CLI 默認(rèn)生成的項(xiàng)目頁面的運(yùn)行結(jié)果。

注意，這一內(nèi)置服務(wù)器僅適用于開發(fā)測試用，并不能作為實(shí)際使用的服務(wù)器。因此，我們?nèi)绻渴鸬秸降姆?wù)器，需要將項(xiàng)目編譯成一個(gè)發(fā)布版。編譯發(fā)布版也很簡單，只需使用一條命令：

ng build --prod

編譯完成后，打開項(xiàng)目文件夾，可以看到一個(gè) dist 目錄，這里面的文件就是整個(gè)項(xiàng)目運(yùn)行所需要的文件。當(dāng)我們部署應(yīng)用時(shí)，只需要將這個(gè)文件夾中的所有文件部署到服務(wù)器即可。

我們從創(chuàng)建項(xiàng)目開始，到項(xiàng)目的開發(fā)測試，最后是項(xiàng)目打包部署，全部利用 Angular CLI 提供的各種功能?？梢钥吹?，Angular CLI 提供了一站式的開發(fā)模式，我們可以利用 Angular CLI 很簡單的開發(fā) Angular 項(xiàng)目。不過，這里我們演示的只是最簡單的用法，在正式使用中，可能會(huì)添加很多額外的參數(shù)，以便生成我們所需要的文件和項(xiàng)目。這需要通過閱讀 Angular CLI 的文檔來獲取更多信息。在后面的章節(jié)中，如果遇到相關(guān)內(nèi)容，我們會(huì)再次進(jìn)行介紹。

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

最新評(píng)論