Angular最新教程-第一節環境搭建和新建項目

步驟一：安裝開發環境

在開始學習angular之前，我們要先設置好開發環境。
一般現在的的開發環境基本上都是nodejs，
因爲基本上都有使用了nodejs的npm管理和安裝依賴包。
如果你的電腦上已經安裝過nodejs，那你可以現在命裏行中輸入node -v 和 npm -v查看他們的版本。

angular 要求node 6.9.x 和 npm 3.x.x 以上的版本。
如果你電腦上的版本低於要求，那麼可以到官網重新下載nodejs，覆蓋安裝就好了。
安裝的方法有很多種，參照nodejs官網：https://nodejs.org/download

步驟二：安裝TypeScript

安裝完nodejs接着就可以安裝TypeScript了。
運行命令：$ npm install -g typescript

TypeScript 作爲JavaScript的超集，
TS無論可讀性、可維護性、上手的容易程度、寫代碼的速度，都非常明顯地優於JS。
可能未開始之前，你會覺得，剛學了一個JavaScript，現在又要學一個TypeScript。
但其實只要你動手敲幾行代碼，你就會發現，其實TypeScript比JavaScript要容易的多。

步驟三：安裝Angular CLI

Angular CLI是一個命令行界面工具，它可以創建項目、添加文件以及執行一大堆開發任務，比如測試、打包和發佈。
Angular CLI是一個功能很強大的開發工具，你甚至可以用它來創建組建，使得整個項目的代碼風格保持一致。
安裝Angular CLI只要運行命令：$ npm install -g @angular/cli

步驟四：安裝VS Code

這裏我們選擇的開發工具是VS Code。
可能你已經有了自己用的很習慣的開發工具，
比如我自己之前一直使用的是webstorm。
但是現在還是下載了VS Code。
因爲VS Code可以直接Debug Angular應用（下一節課中講解）了。
還可以增加插件，用來檢測代碼規範。
直接官網下載安裝即可。https://code.visualstudio.com/
安裝完成，如下圖。

步驟五：安裝Angular TypeScript Snippets for VS Code

這個插件用於在VS Code中添加了angular的代碼片段。
效果如下：

在你要新建任何東西之前，你可以先查閱一下，已有片段。
常見的有

更多詳情可查看：https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
安裝過程：
點擊側邊欄的擴展按鈕。

搜索並安裝angular v4 typescript snippets

步驟六：新建示例項目

打開命令行窗口，運行下列命令(注意當前文件目錄，在哪運行就在那新建項目)
(爲了防止項目找不着了，我們先cd到d盤。如果你能搞清楚當前目錄，可忽略這一步。)

$ ng new oniplan-ng
ng new 是angular的新建項目的cli，後面跟着的是項目的名字，你可以取一個你自己喜歡的名字。

執行命令還是挺快的，但是到 Installing packages for tooling via npm.這行之後，會比較慢，因爲要安裝很多npm的依賴。
總的來說安裝時間比較久，耐心等候就好。