使用Angular CLI快速搭建Angular2工程（一）
建立工程
上圖就是建立的過程，此時在建立中，npm也在下載相關的包，耐心等待；從控制檯中可以看到建立的內容；
建立結束
工程結構圖如下：
建立後的工程結構
就這樣，最簡單的angular2工程建立好了；
工程結構熟悉一下：angular-cli.json 是angular-cli的配置檔案，測試配置檔案karma.conf.js，typescript的lint配置檔案，端到端的測試配置檔案protractor.conf.js，匯入es6模組的配置檔案polyfills.ts，angular工程的main.ts引導啟動檔案，全域性樣式style.css，typescript配置檔案ts.config.json;typescript的宣告檔案typings.d.ts,以及生成了最賤的的一個angular組建 app.components相關的css，html，ts。這些配置都是angular2的生產專案中需要配置的檔案，angular-cli幫我們做了這麼多事情，我們只用了一個命令；
啟動
cd project_name
ng serve
啟動
瀏覽器輸入 http://localhost:4200/ 就可以看到app works！
嘗試的修改一下app.component.ts中的文字，看看熱部署是否馬上生效？yes！it does！
建立module，component，service，class
指令表
建立一個home的module；
ng g component home
我們看到 app下面多了一個home的component，它應有的css，html，*.spec.ts(測試程式碼)，ts都生成了；如果沒有元件化經驗的同學可能會問，為啥有css，html，ts，*.spec.ts都放在這下面啊？因為元件化可以重複使用，提高效率，龐大的工程程式碼中可以提高可維護性，閱讀性，方便測試等等；
再試著建立一個angular的模組
ng g module about
about 模組建立
可以看出模組比component多了一個module.ts檔案。
其他內容類似，讀者可以自己嘗試；
按需載入和程式碼分割
在生產中，程式碼會是龐大的，在單頁面應用中，如果沒有程式碼分割和按需載入，那麼第一次載入的時間就會非常久，可能要非常多的時間，這是無法接受的；而且使用者可能只需要訪問某部分的內容，把全部的程式碼返回給使用者，這也說不過去；所以在大的應用中，程式碼分割和按需載入久非常的重要；
前面我們已經提到，angular-cli使用了webpack做編譯的事情，那言外之意，我們可以用使用webpack中的code splitting來分割程式碼，用angular的loadChildren來實現懶載入；
webpack的code splitting官網怎麼使用，沒用過的讀者需要自行補腦；webpack code splitting；
接下來我們來實現一下，第一步：在app.module.ts中新增路由
新增root級路由
在app.component.html中新增路由的程式碼
app.component.html
router-outlet就是輸出的地方；
我們前面建立了一個home.component和一個abou的module。按需載入就是about這個module中實現；
所以在about.module.ts中新增以下內容：
about.module.ts
認真校對，跟我的對比，是否有缺失內容了；然後我們啟動應用ng serve；
程式碼分割
可以看出程式碼進行了分割，多了一個0.chunk.js。why？，因為webpack會對require.ensure的地方進行分割，我們接下來再瀏覽器中訪問下看看他的按需載入
輸入localhost：4200，我們看到預設訪問／home，why？其實在程式碼中我們已經預設是home；我們點選about：
按需載入了
可以看到router到了about的頁面，並且多了一個0.chunk.js的js。
這個就是我們剛剛程式碼分割出來的東西，其實就是about模組相關的內容的js，包括了css，html，js，當然，沒油包含測試程式碼；
整合angular material2，可能會比較複雜一點了
當然，上面講的內容還遠遠不夠，生產中還需要UI框架啊，你可以選擇bootstrap，也可以自己寫，也可以使用angular material2，往往也需要混用；
自己寫的css就放在styles.css檔案中，或者是外部檔案在styles.css中引用進來；
如果是boostrap檔案在angular-cli.json中應用，方式如下：
安裝angular material2 。
執行以下命令：
npm install --save@angular2-material/core@angular2-material/button@angular2-material/card@angular2-material/radio@angular2-material/checkbox@angular2-material/slider@angular2-material/tooltip
在app.module.ts中加入以下程式碼,這裡當做全域性的用
app.module.ts
接下來我們就能使用一些material的UI元件了，我們在home中使用下試試
然後我們在home.component.html 新增
home.component.html
在哪裡用都可以，因為是全域性的。
理論上這樣操作就可以了，但是其實material還依賴一個叫hammerjs的元件我們還沒install，直接編譯肯定報錯，我們安裝下，按順序執行下面2個命令
npm install --save hammerjs
在app.module.ts中 import 'hammerjs';
如此，我們就可以ng serve啟動了，可以看到了material的一些元件了