最近angular2正式版發佈了，現在就趁熱接著記錄一下2.0版的Hello World。據說由RC6升級到2.0代碼改動不是很大，在寫的時候也感覺改動不是很大，這次記錄還是以asp.net core 空項目模板為基礎，本著在此基礎上添加最少的代碼來實現Hello World，沒用的代碼全部清掉（用 ...
最近angular2正式版發佈了，現在就趁熱接著記錄一下2.0版的Hello World。據說由RC6升級到2.0代碼改動不是很大，在寫的時候也感覺改動不是很大，這次記錄還是以asp.net core 空項目模板為基礎，本著在此基礎上添加最少的代碼來實現Hello World，沒用的代碼全部清掉（用的時候再引入）。
一、準備工作。
首先，創建一個asp.net core空項目，併在Startup.cs類中添加“靜態文件支持”；然後，在項目根目錄下添加NPM配置文件、Gulp配置文件和typescript文件夾，併在該文件夾下TypeScript JSON配置文件。代碼如下：
1 { 2 "version": "1.0.0", 3 "name": "asp.net", 4 "private": true, 5 "dependencies": { 6 "@angular/common": "2.0.0", 7 "@angular/compiler": "2.0.0", 8 "@angular/core": "2.0.0", 9 "@angular/platform-browser": "2.0.0", 10 "@angular/platform-browser-dynamic": "2.0.0", 11 12 "core-js": "2.4.1", 13 "systemjs": "0.19.38", 14 "rxjs": "5.0.0-beta.12", 15 "zone.js": "0.6.25" 16 }, 17 "devDependencies": { 18 "gulp": "3.9.1" 19 } 20 }package.json
1 { 2 "compilerOptions": { 3 "emitDecoratorMetadata": true, 4 "experimentalDecorators": true, 5 "module": "system", 6 "moduleResolution": "node", 7 "noImplicitAny": false, 8 "noEmitOnError": false, 9 "removeComments": false, 10 "target": "es5", 11 "outDir": "../wwwroot/app" 12 }, 13 "exclude": [ 14 "node_modules", 15 "wwwroot" 16 ] 17 }tsconfig.json
1 /* 2 This file in the main entry point for defining Gulp tasks and using Gulp plugins. 3 Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007 4 */ 5 6 var gulp = require('gulp'); 7 8 /// Define paths 9 var srcPaths = { 10 js: [ 11 'node_modules/core-js/client/shim.min.js', 12 'node_modules/zone.js/dist/zone.js', 13 'node_modules/systemjs/dist/system.src.js', 14 ], 15 js_angular: [ 16 'node_modules/@angular/**' 17 ], 18 js_rxjs: [ 19 'node_modules/rxjs/**' 20 ] 21 }; 22 23 var destPaths = { 24 js: 'wwwroot/js/', 25 js_angular: 'wwwroot/js/@angular/', 26 js_rxjs: 'wwwroot/js/rxjs/' 27 }; 28 29 // Copy all JS files from external libraries to wwwroot/js 30 gulp.task('js', function () { 31 gulp.src(srcPaths.js_angular) 32 .pipe(gulp.dest(destPaths.js_angular)); 33 gulp.src(srcPaths.js_rxjs) 34 .pipe(gulp.dest(destPaths.js_rxjs)); 35 return gulp.src(srcPaths.js) 36 .pipe(gulp.dest(destPaths.js)); 37 });gulpfile.js
二、在typescript文件夾下創建以下三個文件app.component.ts、app.module.ts、boot.ts，代碼如下：
1 import {Component} from "@angular/core"; 2 @Component({ 3 selector: 'myApp', 4 template: `Hello World!` 5 }) 6 export class AppComponent { }app.component.ts
1 import { NgModule } from '@angular/core'; 2 import { BrowserModule } from '@angular/platform-browser'; 3 import { AppComponent } from './app.component'; 4 @NgModule({ 5 imports: [BrowserModule], 6 declarations: [AppComponent], 7 bootstrap: [AppComponent] 8 }) 9 export class AppModule { }app.module.ts
1 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 import { AppModule } from './app.module'; 3 const platform = platformBrowserDynamic(); 4 platform.bootstrapModule(AppModule);boot.ts
三、在靜態文件目錄wwwroot中，添加以下兩個文件index.html和systemjs.config.js，代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!-- 1. Load libraries --> 9 <script src="js/shim.min.js"></script> 10 <script src="js/zone.js"></script> 11 <script src="js/system.src.js"></script> 12 <!-- 2. Configure SystemJS --> 13 <script src="systemjs.config.js"></script> 14 <script> 15 System.import('app').catch(function(err){ console.error(err); }); 16 </script> 17 </head> 18 <body> 19 <myApp>Loading...</myApp> 20 </body> 21 </html>index.html
1 /** 2 * System configuration for Angular samples 3 * Adjust as necessary for your application needs. 4 */ 5 (function (global) { 6 System.config({ 7 paths: { 8 // paths serve as alias 9 'npm:': 'js/' 10 }, 11 // map tells the System loader where to look for things 12 map: { 13 // our app is within the app folder 14 app: 'app', 15 // angular bundles 16 '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 // other libraries 22 'rxjs': 'npm:rxjs', 23 }, 24 // packages tells the System loader how to load when no filename and/or no extension 25 packages: { 26 app: { 27 main: './boot.js', 28 defaultExtension: 'js' 29 }, 30 rxjs: { 31 defaultExtension: 'js' 32 } 33 } 34 }); 35 })(this);system.config.js
四、將JS文件拷貝到wwwroot目錄中，即執行Gulp任務；生成解決方案——將ts文件轉換為js文件到目錄/wwwroot/app下。
至此，已修改完畢，看一下運行結果，如下圖：
