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 的文檔來獲取更多信息。在后面的章節中，如果遇到相關內容，我們會再次進行介紹。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com