Angulra2 View建立 with VS2015
# 需先完成Angular2環境設定
Step1: 基本設定(gulpfile.js/index.html/main.ts)
當Angular2環境設定好後需先修改 gulpfile.js，如下圖(增加 tsc 及 tsc:w 方法)
接著依序執行 clean, copy:lib ，如下圖
clean >> 將 wwwroot底下的libary先清掉
copy:lib >> 將package.json所下載回來的組件重新打包到wwwroot/lib 資料夾中
目前檔案結構如下圖:
接著將 gulp-typescript 資料夾刪除，編譯會無法通過
執行 tsc:w 方法
由於瀏覽器尚未完全支援TypeScript因此需先將typescript編譯成javascript語法
一般來說只要重建專案即可完成編譯，但是每修改一次ts檔都需要編譯一次
因此使用在 gulpfile.js 中新增兩個方法來自動執行
例如下圖的 app/app.component.ts 只要有修改並儲存，在 wwwroot/app/app.component.js 就會自動編譯。
建立基本結構
在 wwwroot底下新增一個index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="lib/core-js/client/shim.min.js"></script>
<script src="lib/zone.js/dist/zone.js"></script>
<script src="lib/reflect-metadata/Reflect.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<div>helloji</div>
<my-app>Loading...</my-app>
</body>
</html>
接著在根目錄底下建立一個app資料夾，新增一個TypeScript檔 main.ts
Angular2執行後會先從main.ts開始，必須先 import 你所需要的組件以及 Component
而最後一段 main.ts中的 bootstrap 並不是你想像中的 bootstrap
這是Angular2中用於啟動Component，可以看到這部份包成陣列型式，因此可以啟動複數個Component
/// <reference path="../typings/globals/core-js/index.d.ts" />
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
AppComponent
]);
因此目前為止的結構應該如下圖
