angular CLI 快速搭建angular 項目

1. 首先確保你的電腦上安裝了Node.js®和npm 

 

2.打開終端/或命令窗，安裝全局 angular CLI

npm install -g @angular/cli

 

3. 創建新項目 

//運行下列命令來生成一個新項目以及應用的骨架代碼：

ng new project-name

// 請耐心等待。 創建新項目需要花費很多時間，大多數時候都是在安裝那些npm包。

 

4. 啟動開發服務器

// 進入項目目錄
cd my-app

//啟動服務
ng serve --open

 

5. 文件結構如下

 

src
-----app
-----------app.component.css
-----------app.component.html
-----------app.component.spec.ts
-----------app.component.ts
-----------app.module.ts
-----assets
-----------.gitkeep
-----environments
-----------environment.prod.ts
-----------environment.ts
-----favicon.ico
-----index.html
-----main.ts
-----polyfills.ts
-----styles.css
-----test.ts
-----tsconfig.app.json
-----tsconfig.spec.json

 

6. 文件說明

app/app.component.{ts,html,css,spec.ts}	使用HTML模板、CSS樣式和單元測試定義AppComponent組件。 它是根組件，隨着應用的成長它會成為一棵組件樹的根節點。
app/app.module.ts	定義AppModule，這個根模塊會告訴Angular如何組裝該應用。 目前，它只聲明了AppComponent。 稍后它還會聲明更多組件。
assets/*	這個文件夾下你可以放圖片等任何東西，在構建應用時，它們全都會拷貝到發布包中。
environments/*	這個文件夾中包括為各個目標環境准備的文件，它們導出了一些應用中要用到的配置變量。 這些文件會在構建應用時被替換。 比如你可能在產品環境中使用不同的API端點地址，或使用不同的統計Token參數。 甚至使用一些模擬服務。 所有這些，CLI都替你考慮到了。
favicon.ico	每個網站都希望自己在書簽欄中能好看一點。 請把它換成你自己的圖標。
index.html	這是別人訪問你的網站是看到的主頁面的HTML文件。 大多數情況下你都不用編輯它。 在構建應用時，CLI會自動把所有js和css文件添加進去，所以你不必在這里手動添加任何 <script> 或 <link> 標簽。
main.ts	這是應用的主要入口點。 使用JIT compiler編譯器編譯本應用，並啟動應用的根模塊AppModule，使其運行在瀏覽器中。 你還可以使用AOT compiler編譯器，而不用修改任何代碼 —— 只要給ng build 或 ng serve 傳入 --aot 參數就可以了。
polyfills.ts	不同的瀏覽器對Web標准的支持程度也不同。 填充庫（polyfill）能幫我們把這些不同點進行標准化。 你只要使用core-js 和 zone.js通常就夠了，不過你也可以查看瀏覽器支持指南以了解更多信息。
styles.css	這里是你的全局樣式。 大多數情況下，你會希望在組件中使用局部樣式，以利於維護，不過那些會影響你整個應用的樣式你還是需要集中存放在這里。
test.ts	這是單元測試的主要入口點。 它有一些你不熟悉的自定義配置，不過你並不需要編輯這里的任何東西。
tsconfig.{app|spec}.json	TypeScript編譯器的配置文件。tsconfig.app.json是為Angular應用准備的，而tsconfig.spec.json是為單元測試准備的。

7. 原文來自https://angular.io/docs/ts/latest/cli-quickstart.html.