angularJS的環境搭建--初學

一  \在這裏簡單介紹一下Angular-cli的特性：

• Angular-cli能夠快速搭建框架，建立module，service，class，directive等；
• 有webpack的功能，能夠實現代碼分隔、按需加載等；
• 自動配置開發環境、測試環境、生產環境，能夠實現代碼的打包壓縮和熱部署，還能夠實現模塊測試、端到端測試
• Angular-cli能夠經過後綴自動識別sass、less的預編譯；
• Angular-cli能夠在建立的時候進行TypeScript的配置，還能夠作一些個性化配置；
• 經過Angular-cli建立的工程結構是最佳實踐，能夠用於生產環境；

2、安裝nodejs

　　AngularJS須要用到Nodejs，因此咱們須要先安裝nodejs，須要用到nodejs，nodejs的下載地址是：https://nodejs.org/en/download/，

3、安裝npm和cnpm

下一步是安裝npm，

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：

• 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
• 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

到這裏已經完成了nodejs和npm的安裝，不過在大天朝內用npm安裝的話會有一些問題，因此咱們用cnpm安裝，cnpm也是npm的一個包。

安裝cnpm，執行命令

npm i -g cnpm

執行這個命令以後，等待完成，而後輸入cnpm version查看是否安裝完成，這裏我已經安裝過了，因此能夠進去了。

安裝完成cnpm以後，咱們開始安裝Angular-cli。

執行命令

cnpm i -g angular-cli

而後能夠執行ng version命令，查看是否安裝完成和angular-cli的版本

安裝完成以後咱們就可使用ng命令，下面開始建立項目。

 

4、項目建立

安裝完成angular-cli以後就能夠直接建立項目了，執行命令

其中JustForTest是項目名稱
執行這個命令是建立不少文件，並且須要等待一下，這個步驟會等好久,須要等到nod_.modules的安裝完成

直接使用ng serve啓動。

這樣就能夠直接啓動項目，咱們在瀏覽器中輸入：http://localhost:4200能夠直接訪問：

ng new JustForTest

5、在導入項目

若是是從網上找項目，咱們怎麼在本地啓動呢？下面咱們具體操做一下：

推薦你們去看一下大漠老師的這個教程：Angular2.0視頻教程來了
，在這裏演示咱們也是用大漠老師的一個項目：NiceFish，首先咱們須要經過git將項目clone下來，這裏就不演示這個了，這是NiceFish的項目地址：http://git.oschina.net/mumu-osc/NiceFish

項目clone下來以後，命令行進入項目所在目錄。

執行命令

這裏說明一下，以前咱們安裝的是全局的angular-cli。

等待命令執行完成，以後再執行命令cnpm i -g @angular/cli

cnpm install

而後執行命令

ng serve -prod -aot

而後等待編譯完成。
完成以後，咱們就能夠在瀏覽器中輸入：

訪問項目。http://localhost:4200