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樣式和單元測試定義 |
app/app.module.ts |
定義 |
assets/* |
這個文件夾下你可以放圖片等任何東西，在構建應用時，它們全都會拷貝到發布包中。 |
environments/* |
這個文件夾中包括為各個目標環境準備的文件，它們導出了一些應用中要用到的配置變量。 這些文件會在構建應用時被替換。 比如你可能在產品環境中使用不同的API端點地址，或使用不同的統計Token參數。 甚至使用一些模擬服務。 所有這些，CLI都替你考慮到了。 |
favicon.ico |
每個網站都希望自己在書簽欄中能好看一點。 請把它換成你自己的圖標。 |
index.html |
這是別人訪問你的網站是看到的主頁面的HTML文件。 大多數情況下你都不用編輯它。 在構建應用時，CLI會自動把所有 |
main.ts |
這是應用的主要入口點。 使用JIT compiler編譯器編譯本應用，並啟動應用的根模塊 |
polyfills.ts |
不同的瀏覽器對Web標準的支持程度也不同。 填充庫（polyfill）能幫我們把這些不同點進行標準化。 你只要使用 |
styles.css |
這裏是你的全局樣式。 大多數情況下，你會希望在組件中使用局部樣式，以利於維護，不過那些會影響你整個應用的樣式你還是需要集中存放在這裏。 |
test.ts |
這是單元測試的主要入口點。 它有一些你不熟悉的自定義配置，不過你並不需要編輯這裏的任何東西。 |
tsconfig.{app|spec}.json |
TypeScript編譯器的配置文件。 |
7. 原文來自https://angular.io/docs/ts/latest/cli-quickstart.html.
angular CLI 快速搭建angular 項目