Angulra2 View建立 with VS2015 - Step1. 基本設定

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
]);

因此目前為止的結構應該如下圖