用Angule Cli建立Angular項目

Angular4.0來了，更小，更快，改動少

接下來爲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 packageManager = 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 serve

或者是

npm start

這兩個的默認端口都是4200：

http://localhost:4200

 這裏你也能夠修改默認的端口:

ng serve -p 3000

5)最後項目的打包

　　　用angular cli建立的項目會有不少文件，咱們就須要打包後再發行：

ng build