angular --開發環境搭建及項目建立

1.配置node環境

1）.下載node安裝包並安裝，如下下是個人node安裝路徑

2）.安裝完成以後在 選擇 個人電腦 右鍵 選屬性-> 高級系統設置 ->  環境變量 -> 新建 

變量名自定義，變量值寫node的安裝路徑

以下是個人變量值：

3).查看node是否安裝成功：

win+r 進入輸入cmd進入命令行，輸入 node -v 命令 ，安裝成功以後會顯示node的版本號，以下所示：

到此node安裝成功。

在命令行，輸入 npm -v 命令 ，查看npm的版本號

 

2.配置python環境

若是不安裝python的話在進行第3步安裝時會出現與python相關的錯誤，

python的安裝與node的安裝步驟相同，能夠參照node的安裝。

查看python是否安裝的命令爲  python  。

 

3.安裝angular-cli

1).由於angular-cli是用typescript寫的，因此要先裝這個： npm install -g typescript typings

2).安裝angular-cli :  npm install -g @angular/cli

 若是你以前安裝失敗過，最好在安裝angular-cli以前先卸載乾淨，使用一下命令：

      npm uninstall -g angular-cli
      npm cache clean 

 

以後進入以下目錄，刪除ng和ng.cmd這兩個文件。

 

 

3).因爲被牆的緣由按照普通方式安裝可能會安裝失敗，所以能夠設置淘寶鏡像安裝

設置方法1. npm config set registry https://registry.npm.taobao.org，

　　　　　　成功以後再使用  npm install -g @angular/cli 安裝便可。

設置方法2.能夠直接使用npm安裝淘寶鏡像：npm i -g cnpm,

　　　　　安裝成功使用 cnpm i -g @angular/cli 安裝便可。

安裝指定的angula版本：cnpm install -g @angular/cli@1.6.3

4).若是安裝過程出現下載node-sass失敗 請嘗試單獨安裝node-sass  安裝命令： npm install --save-dev node-sass。

5).檢查angular-cli是否安裝成功，在命令行使用 ng -v 查看是否成功

4.建立angular項目

1).建立angular新項目命令：ng new projectName ;注：projectName爲項目的名稱，等待項目自動建立。

2).項目建立成功以後切換到項目的目錄下，使用 ng serve 啓動項目，編譯完成能夠在瀏覽器地址欄輸入http://localhost:4200/，就能夠看到新建立的項目。

5.開發工做

 接下來就可使用angular進行相關項目的代碼編寫

6.編譯本地運行 ng serve

參照第4部分

7.打包

 進行打包 ng build 打包後會生成dist文件夾

angular的基本環境配置及編譯基本結束，在angular2的開發中還有細節之處須要處理，在這裏就不一一闡述，有什麼問題能夠私信或評論，若有不當之處還望指出^-^