最近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下。
至此，已修改完毕，看一下运行结果，如下图：
时间： 2024-10-25 23:51:43