Angular2 Hello World 之 2.0

　　最近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下。

　　至此，已修改完毕，看一下运行结果，如下图：

posted @ 2016-09-24 22:53  du-blog  阅读(386)  评论(1)  编辑  收藏  举报