ng2環境配置

————————2017年4月19日  更新 ————————————

現在看到之前寫的東西，才覺得ng的版本實在是更新的不能再快了，還好終於在三月份發佈了穩定版4.0 

最近換了家新公司，所以需要重新配置環境，就順便更新一下之前的代碼。

現在就開始從拿到新電腦開始配置環境~~

一、ng中的包管理工具npm基於node.js ，所以要先下載。

（1）進node.js官網下載最近node版本(node.js官網)

（2）安裝完成後進入cmd查詢是否安裝成功

node -v  / npm -v

（3）在cmd（用管理員打開）中配置angular/cli

詳細可查angular官網（這是一個angular官網鏈接）

npm install -g @angular/cli

（4）安裝時需要翻牆。。。因此需要將其改爲淘寶源

在cmd中輸入 npm config edit 會彈出一個配置的文本文件.npmrc.txt 

在第一段後加入

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org/

該段代碼即可。

（5）等待安裝，完成後查是否成功

在cmd中 ng -v

ok

————————————————————————————————————

（一）配置Angular 2的運行環境

使用Angular-cli進行配置，這是一個較好的解決angular 2環境配置複雜的一個工具，因爲Angular 2是基於typescript所編寫，因此在安裝Angular-cli之前需要安裝：

npm install -g typescript typings
npm install -g angular-cli

接下來就可以配置Angular-cli環境，執行語句爲：

npm install -g angular-cli

完成之後，直接輸入指令創建新項目

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

更具體的介紹在angular-cli文檔說明

（二）項目結構

創建完一個Angular-cli的項目

1.在app.module.ts中寫入所有出現的模塊，在模塊中引入組件，具體定義的內容寫在app.component.ts中。

2.main.ts：通過引導AppModule來啓動應用。

（1）通過即時（JIT）編譯器動態引導。

（2）使用預編譯器（AoT-Ahead-Of-Time）進行靜態引導。