1.安裝node.js.   Node.js官方網站

2.接著安裝Typescript. npm install -g typescript

3.安裝angular-cli.npm install -g @angular/cli

4.新建一個專案。ng new xxxx

============================

angular常見的命令

• 新建一個專案：ng new XXX
• 安裝依賴：npm install
• 新建一個元件: ng generate component xxx
• 專案執行： ng serve
• 專案編譯：ng build
   --aot --prod

=============================

目錄結構分析

1.專案建立完成後的目錄結構

• e2e：在e2e/下是端到端（End-to-End）測試。她們不再src/下，是因為端到端的段測試實際上的應用是相互獨立的，它只適用於測試你的應用而已，這也就是為什麼它會擁有自己的tsconfig.json。
• Src：我們的專案的所有檔案得放在src裡面，所有的angular元件，模板，樣式，圖片以及你的應用所需要的任何東西
• node_modules：node.js建立了這個資料夾，並且把package.json中列舉的所有第三方模板
  都放在其中
• angular-cli.json：Angular CLi的配置檔案。在這個檔案中，我們可以設定一系列預設值，還可以配置專案編譯時要包含的那些檔案。
• editorconfig：給你的編輯器看的一個簡單的配置檔案，它用來確保參與你專案的每個人都具有基本的編輯器配置。大多數編輯器都支援editoraconfig檔案，詳情參看http://editorconfig.org
• .gitignore：一個Git的配置檔案，用來確保某些自動生成的檔案不會被提交到原始碼控制系統中。
• karma.conf.js：給Karma的但願測試配置，當執行 ng test 時會用到它。
• package.json：npm配置檔案，其中列出了專案使用到的第三方依賴包。你還可以在這裡新增自己的自定義指令碼
• protractor.conf.js：給Protractor使用的端到端測試配置檔案，當執行 ng e2e的時候會用到它。
• README.md：專案的基礎文件，預先寫入CLI命令資訊。別忘了用專案文件改進他，以便每個檢視詞庫的人都能根據此構建出你的應用
• tsconfig.json：Typescript編譯器配置，你的IDE會藉助它來給你提供更好的幫助
• tslint.json：給TSLint和Codelyzer用的配置資訊，當執行ng lint 時會用到。Lint功能可以幫你保持程式碼風格的統一

2.src目錄結構

• 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通常就夠了，不過你也可以檢視瀏覽器支援指南以瞭解更多資訊。
• style.css：這裡是你的全域性樣式。大多數情況下，你會希望在元件中使用區域性樣式，以利於維護，不過那些會影響你整個應用的樣式你還是需要集中存放在這裡。
• test.ts：這是單元測試的主要入口點。它有一些你不熟悉的自定義配置，不過你並不需要編輯這裡的任何東西。
• tsconfig.{app|spec}.json：TypeScript編譯器的配置檔案。tsconfig.app.json是為Angular應用準備的，而tsconfig.spec.json是為單元測試準備的

3.app.module.ts