在這裡我要介紹在Eclipse的開發環境中，以一個簡單的Angular2範列來說明如何簡單的在Eclipse中設置Angular2的初始設置。Typescript使用了Eclipse的typescript外掛、module使用了System.js。
需準備的步驟如下：
- node.js因為等下會使用到npm (Angular CLI)，並且Eclipse的Typescript也需要用到node.js的功能，所以我們要先安裝node.js。
node.js官網 - git for windows
因為Angular CLI會需要用到git，所以需安裝windows版本的git。
windows版本下載 - Angular CLI (選用)
一個對於建置Angular2專案非常方便的工具，不過這裡為了要學習自己建置，所以只利用了Angular CLI來取得Angular2所需的modules，取得modules不一定要用Angular CLI，所以為選用。
Angular CLI官方網站 - system.js
這裡我們使用了system.js來使用javascript module，但也可選擇其他的module工具，例如webpack。
取得Angular2所需的modules
我們可以利用node.js的npm來安裝Angular2所需的modules (會放到node_modules資料夾中)，
但這裡我們也可以利用Angular CLI來簡單取得modules，
安裝好Angular CLI後，可以在命令列視窗中使用
ng new XXX
來在當下資料夾中建立Angular專案，在建立好的專案資料中，可以
找到Angular2所需的modules已經都下載後放在node_modules資料夾中
Eclipse (這裡安裝的是neon版本) + Typescript plugin
Help --> Install New Software...
--> 加入一個連結 : http://eclipse-update.palantir.com/eclipse-typescript/
下載安裝Eclipse的Typescript plugin
建立我們的專案
以下是我們的檔案結構圖
其中紅色框裡的是我們會建立的，藍框則是Typescript plugin幫我們編譯產生的。
在這裡Typescript plugin不是也不需使用如tsconfig.json的設定檔，而是直接在Eclpse裡設定，
對著專案按右鍵，選擇 Properties --> Typescript 可以看到如下畫面，其中
Source folder(s): ts檔放置的位置
Exported folder(s): 在 import module時，預設的路徑位置，例如node_modules之下的import路徑不用再打node_modules，預設會先重這裡找
Output folder: ts編譯成的js檔要放置的位置
/index.jsp:
<%@ page language="java" contentType="text/html; charset=BIG5" pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
<script src="node_modules/core-js/client/shim.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="app/js/system.js"></script>
<script>
System.config({
defaultJSExtensions: true,
paths: {
'app/*': './app/*',
'@angular/*': './node_modules/@angular/*',
'rxjs/*': './node_modules/rxjs/*'
},
packageConfigPaths: ['./node_modules/@angular/*/package.json']
});
SystemJS.import('app/js/index.js');
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
其中Angular所需的shim.js、Reflect.js、zone.js雖然有被放在node_modules中，但因為它們並沒有寫成modules的型式，所以要直接用<script>來載入。在這邊我們使用了system.js來載入module，System.config()設置了module的載入設定，以下說明：
defaultJSExtension: 如果為ture，則import module時可以不用寫副檔名，預設為js
paths:規定了module查找路徑，需注意的是在這裡除了使用了@angular之下的module，還有rxjs之下的module。
packageConfigPaths:預設先去尋找指定路徑資料夾內的package.json設定檔，如果找到了main屬性，以main指定的js檔案為要import的module
設定完後，用SytemJS.import()來載入此頁要用的，一開始的js程式。
/ts/index.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
/ts/app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular2!!! App</h1>'
})
export class AppComponent { }
最後啟動Server，瀏覽index.jsp，應該就可以看到頁面一開始有Loading...字樣，然後很快變成My First Angular2!!! App的字的效果了
原始碼下載：
沒有留言 :
張貼留言