Angular 4環(huán)境準(zhǔn)備與Angular cli創(chuàng)建項(xiàng)目詳解

第Angular4環(huán)境準(zhǔn)備與Angularcli創(chuàng)建項(xiàng)目詳解本文介紹的是為Angular4.0準(zhǔn)備環(huán)境和學(xué)會(huì)使用Angularcli來創(chuàng)建項(xiàng)目的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看詳細(xì)的介紹：

1.環(huán)境準(zhǔn)備：

1）在開始工作之前我們必須設(shè)置好開發(fā)環(huán)境,如果你的機(jī)器上還沒有安裝Node.js和npm，請(qǐng)安裝他們

（這里特別推薦使用淘寶的鏡像cnpm，記得以后把npm的指令改為cnpm就可以了）

npminstall-gcnpm--registry=

然后我們可以通過node-v和cnpm-v來分別查看node和cnpm安裝的版本和結(jié)果

node-v

cnpm-v

2）安裝全局Angularcli

cnpminstall-g@angular/cli

2.創(chuàng)建新的項(xiàng)目

打開終端窗口（這里我使用的是webstorm的Terminal，也可以使用計(jì)算機(jī)自帶的powershell）

ngnewmy-app

項(xiàng)目會(huì)很快創(chuàng)建完成，接下來你會(huì)看到

Installingpackagesfortoolingvianpm

這里如果你選這了淘寶的cnmp鏡像，應(yīng)該最好在安裝完全局Angularcli后設(shè)置一下，保證正常下載工具

ngsetglobalpackageManage=cnpm

然后我們的項(xiàng)目就創(chuàng)建完成了

我們會(huì)發(fā)現(xiàn)在文檔中有很多文件，這里參考Angular官方文檔，以便認(rèn)識(shí)這些文件的作用。

3.在項(xiàng)目中引入bootstrap和jQuery

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

cnpminstallbootstrap--save

cnpminstalljquery--save

我們?cè)陧?xiàng)目中就添加了bootstrap和jQuery，我們可以在node_modules文件夾中找到他們（這個(gè)文件夾放的是第三方庫）；

然后我們需要操作.angular-cli.json文件，把bootstrap和jQuery添加進(jìn)去:

這里需要注意的是：因?yàn)閍ngular用的是微軟開發(fā)的typescript語言，我們需要在終端做下面的操作，以便讓typescript認(rèn)識(shí)bootstrap和jQuery一些字符（比如jQuery的$）：

cnpminstall@types/bootstrap--save-dev

cnpminstall@types/jquery--save-dev

這樣我們就在項(xiàng)目中正常使用bootstrap和jQuery了

4）為項(xiàng)目添加組件

nggcomponentnavbar

5）項(xiàng)目的啟動(dòng)

啟動(dòng)項(xiàng)目我們可以直接通過：

ngserve

或者是

npmstart

這兩個(gè)的默認(rèn)端口都是4200：http://localhost:4200

這里你也可以修改默認(rèn)的端口:

ngserve-