用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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM