rc6 java_Angular2 Hello World 之 RC6

首先还是先创建一个ASP.NET Core Web Application空应用程序。还是在Startup.cs类中添加静态文件处理，下面说一下几处和上一篇中有区别的地方。

一、NPM 配置文件——package.json，代码如下：

1 {2 "version": "1.0.0",3 "name": "asp.net",4 "private": true,5 "dependencies": {6 "@angular/common": "2.0.0-rc.6",7 "@angular/compiler": "2.0.0-rc.6",8 "@angular/core": "2.0.0-rc.6",9 "@angular/platform-browser": "2.0.0-rc.6",10 "@angular/platform-browser-dynamic": "2.0.0-rc.6",11 "@angular/upgrade": "2.0.0-rc.6",12

13 "core-js": "^2.4.1",14 "reflect-metadata": "^0.1.3",15 "rxjs": "5.0.0-beta.6",16 "systemjs": "^0.19.37",17 "typings": "^1.3.2",18 "zone.js": "^0.6.12",19 "moment": "^2.14.1"

20 },21

22 "devDependencies": {23 "gulp": "^3.9.1",24 "typescript": "^1.8.10"

25 },26 "scripts": {27 "postinstall": "typings install dt~core-js --global"

28 }29 }

View Code

二、Gulp 配置文件——gulpfile.js，这次移动的js文件要多一些，代码如下：

1 var gulp = require('gulp');2

3 /// Define paths

4 var srcPaths ={5 js: [6 'node_modules/core-js/client/shim.min.js',7 'node_modules/zone.js/dist/zone.js',8 'node_modules/reflect-metadata/Reflect.js',9 'node_modules/systemjs/dist/system.src.js',10 'node_modules/typescript/lib/typescript.js',11 'node_modules/moment/moment.js'

12 ],13 js_angular: [14 'node_modules/@angular/**'

15 ],16 js_rxjs: [17 'node_modules/rxjs/**'

18 ]19 };20

21 var destPaths ={22 js: 'wwwroot/js/',23 js_angular: 'wwwroot/js/@angular/',24 js_rxjs: 'wwwroot/js/rxjs/'

25 };26

27 //Copy all JS files from external libraries to wwwroot/js

28 gulp.task('js', function() {29 gulp.src(srcPaths.js_angular)30 .pipe(gulp.dest(destPaths.js_angular));31 gulp.src(srcPaths.js_rxjs)32 .pipe(gulp.dest(destPaths.js_rxjs));33 returngulp.src(srcPaths.js)34 .pipe(gulp.dest(destPaths.js));35 });

View Code

三、TypeScript JSON配置文件——tsconfig.json，还是放在项目根目录下的typescript(用于存放ts文件)文件夹下，代码如下：

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

18 }

View Code

四、现在我们依次看一下用到的几个ts文件：

1 import {Component} from "@angular/core";2

3 @Component({4 selector: 'angularjs2demo',5 template: `

AngularJS 2 Demo

Hello ASP.NET Core! Greetings from AngularJS 2.

`6 })7

8 export class AppComponent { }

app.component.ts

1 import {NgModule} from "@angular/core";2 import {BrowserModule} from "@angular/platform-browser";3 import "rxjs/Rx";4

5 import {AppComponent} from "./app.component";6

7 @NgModule({8 //directives, components, and pipes

9 declarations: [10 AppComponent11 ],12 //modules

13 imports: [14 BrowserModule15 ],16 //providers

17 providers: [18 ],19 bootstrap: [20 AppComponent21 ]22 })23 export class AppModule { }

app.module.ts

1 import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";2 import {AppModule} from "./app.module";3

4 platformBrowserDynamic().bootstrapModule(AppModule);

boot.ts

五、systemjs.config.js，该文件在wwwroot目录中，代码如下：

1 (function(global) {2 System.config({3 paths: {4 //paths serve as alias

5 'npm:': 'js/'

6 },7 //map tells the System loader where to look for things

8 map: {9 //our app is within the app folder

10 app: 'app',11

12 //angular bundles

13 '@angular/core': 'npm:@angular/core/bundles/core.umd.js',14 '@angular/common': 'npm:@angular/common/bundles/common.umd.js',15 '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',16 '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',17 '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',18

19 //angular testing umd bundles

20 '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',21 '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',22 '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',23 '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',24 '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',25

26 //other libraries

27 'rxjs': 'npm:rxjs'

28 },29 //packages tells the System loader how to load when no filename and/or no extension

30 packages: {31 app: {32 main: './boot.js',33 defaultExtension: 'js'

34 },35 rxjs: {36 defaultExtension: 'js'

37 }38 }39 });40 })(this);

View Code

六、index.html，该文件在wwwroot目录中，代码如下：

1

2

3

4

ASP.NET Core with Angular 2 RC Demo

5

6

7

8

9

10

11

12

13

14

15

16

17 System.import('app').catch(function(err){ console.error(err); });18

19

20

21

22

23 Please wait...

24

25

View Code

至此，所有的升级已经完成，然后执行Gulp任务，编译解决方案，最后生成的目录结构如下图：

现在可以检查一下我们修改的成果，如下图:

angular2 RC6的demo已经弄完了，之后的东西慢慢研究！