Angular 4環境準備與Angular cli建立專案詳解

本文介紹的是為Angular4.0準備環境和學會使用Angular cli來建立專案的相關內容，分享出來供大家參考學習，需要的朋友們下面來一起看看詳細的介紹：

1.環境準備：

1）在開始工作之前我們必須設定好開發環境, 如果你的機器上還沒有安裝Node.js和npm，請安裝他們
（這裡特別推薦使用淘寶的映象cnpm，記得以後把npm的指令改為cnpm就可以了）

npm install -g cnpm --registry=https://registry.npm.taobao.org

然後我們可以通過node -v和cnpm -v來分別檢視node和cnpm安裝的版本和結果

node -v
cnpm -v

2）安裝全域性Angular cli

cnpm install -g @angular/cli

2.建立新的專案

開啟終端視窗（這裡我使用的是webstorm的Terminal，也可以使用計算機自帶的powershell）

ng new my-app

專案會很快建立完成，接下來你會看到

Installing packages for tooling via npm

這裡如果你選這了淘寶的cnmp映象，應該最好在安裝完全域性Angular cli後設定一下，保證正常下載工具

ng set global packageManage = cnpm

然後我們的專案就建立完成了

我們會發現在文件中有很多檔案，這裡參考Angular官方文件 ，以便認識這些檔案的作用。

3.在專案中引入bootstrap和jQuery

這裡我使用webstorm的Terminal，直接在終端操作

cnpm install bootstrap --save 
cnpm install jquery --save

我們在專案中就新增了bootstrap和jQuery，我們可以在node_modules資料夾中找到他們（這個資料夾放的是第三方庫）；
然後我們需要操作.angular-cli.json檔案，把bootstrap和jQuery新增進去:

這裡需要注意的是：因為angular用的是微軟開發的typescript語言，我們需要在終端做下面的操作，以便讓typescript認識bootstrap和jQuery一些字元（比如jQuery的$）：

cnpm install @types/bootstrap --save-dev
cnpm install @types/jquery --save-dev

這樣我們就在專案中正常使用bootstrap和jQuery了

4）為專案新增元件

ng g component navbar

5）專案的啟動

啟動專案我們可以直接通過：

ng serve

或者是

npm start

這兩個的預設埠都是4200：http://localhost:4200
這裡你也可以修改預設的埠:

ng serve -p 3000

6)最後專案的打包

用angular cli建立的專案會有很多檔案，我們就需要打包後再發行：

ng build