Angular CLI安裝教學課程

這篇文章主要介紹了Angular 開發學習之Angular CLI的安裝使用，現在分享給大家，也給大家做個參考。

前面我們已經準備好開發環境，現在可以正式開發了。如同前面所提到的，Angular 提供了一個命令列工具，可以簡化我們的程式開發。我們未來的開發也會使用這項工具，因此我們需要先安裝這個名為 Angular CLI 的開發工具。

安裝 CLI 的過程很簡單，與安裝其它工具、甚至是安裝一個普通開發包沒什麼區別。我們前面已經設定好 NPM Registry、安裝成功 yarn，那就使用 yarn 來安裝這個工具。具體的命令是：

yarn global add @angular/cli

參數global 說明是在全域安裝； add 說明是在「新增」；最後是CLI 的套件名，沒有註明版本好的話，會讓yarn 安裝最新版的CLI。 。這語句與之前 NPM 的

npm install -g @angular/cli

是等價的。

之後我們執行

ng version

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

Angular CLI 建立在 webpack 基礎之上，可以幫助我們產生 Angular 專案框架，產生 Angular 模組、元件、指令等。如果手動建造這個開發環境，需要了解 webpack 的各種細節、編寫各種自動化腳本等，要求較高的前端開發技術。考慮到我們的基礎教程，使用 CLI 輔助開發無疑是合適的。我們會在後面的章節中詳細介紹 Angular CLI 的使用，如果你對 Angular CLI 感興趣，可以透過其官方網站 了解更多的細節。

剛剛安裝完成的 CLI 預設使用 NPM 作為套件管理工具。我們希望使用 yarn，只需執行下面的指令：

ng set --global packageManager=yarn

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

ng set --global packageManager=npm

即可。

安裝好 Angular CLI，下面我們來建立第一個範例工程，以了解 Angular CLI 的基本使用。

首先，使用

ng new demo

建立一個示範專案。 new 是建立一個全新項目，後面的 demo 是項目的名字。 Angular CLI 會幫我們產生完整的專案架構－包括專案所需所有文件、文件結構以及各種輔助文件等。之後，Angular CLI 會自動執行 yarn install ，這是在安裝專案所需的各種依賴。安裝過程會比較漫長，需要耐心等待一段時間。

當出現類似上面的介面，提示「Projecy ‘demo' successfully created」時，表示專案已經建立完成。如果有錯誤，需要檢查安裝過程或網路連線等。

專案建立完畢，會在目前目錄下產生一個專案資料夾。之後我們可以進入專案目錄

cd demo

然後執行

ng serve

#ng serve 指令會編譯項目，然後啟動內建的小型伺服器，我們就可以透過瀏覽器查看專案的運行結果。注意上面的提示：NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/，也就是說，這個伺服器的位址應該是http://localhost:4200，我們只要用瀏覽器造訪這個位址即可：

可以看到Angular CLI 預設產生的專案頁面的運行結果。

注意，這內建伺服器只適用於開發測試用，並不能作為實際使用的伺服器。因此，我們如果要部署到正式的伺服器，需要將專案編譯成一個發布版。編譯發布版也很簡單，只要使用一條指令：

ng build --prod

編譯完成後，開啟專案資料夾，可以看到一個 dist 目錄，這裡面的檔案就是整個專案執行所需的檔案。當我們部署應用程式時，只需要將這個資料夾中的所有檔案部署到伺服器即可。

我們從創建專案開始，到專案​​的開發測試，最後是專案打包部署，全部利用 Angular CLI 提供的各種功能。可以看到，Angular CLI 提供了一站式的開發模式，我們可以利用 Angular CLI 很簡單的開發 Angular 專案。不過，這裡我們示範的只是最簡單的用法，在正式使用中，可能會增加許多額外的參數，以便產生我們所需的檔案和項目。這需要透過閱讀 Angular CLI 的文檔來獲取更多資訊。在後面的章節中，如果遇到相關內容，我們會再介紹一次。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用JavaScript實作比非同步更好的解決方法？

透過Node.js使用Koa進行專案建構

詳細解讀React Native Flexbox佈局

##############

以上是Angular CLI安裝教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！