Angular2 Hello World 之 RC6

　　angular2还没有发布正式版，确实有点不靠谱，变化太频繁，之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于RC6。参考：http://web3.codeproject.com/Articles/1124864/ASP-NET-Core-and-Angular-Code-Venture-Part

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

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

 {
   "version": "1.0.0",
   "name": "asp.net",
   "private": true,
   "dependencies": {
     "@angular/common": "2.0.0-rc.6",
     "@angular/compiler": "2.0.0-rc.6",
     "@angular/core": "2.0.0-rc.6",
     "@angular/platform-browser": "2.0.0-rc.6",
     "@angular/platform-browser-dynamic": "2.0.0-rc.6",
     "@angular/upgrade": "2.0.0-rc.6",

     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "^0.19.37",
     "typings": "^1.3.2",
     "zone.js": "^0.6.12",
     "moment": "^2.14.1"
   },

   "devDependencies": {
     "gulp": "^3.9.1",
     "typescript": "^1.8.10"
   },
   "scripts": {
     "postinstall": "typings install dt~core-js --global"
   }
 }

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

 var gulp = require('gulp');

 /// Define paths
 var srcPaths = {
     js: [
         'node_modules/core-js/client/shim.min.js',
         'node_modules/zone.js/dist/zone.js',
         'node_modules/reflect-metadata/Reflect.js',
         'node_modules/systemjs/dist/system.src.js',
         'node_modules/typescript/lib/typescript.js',
         'node_modules/moment/moment.js'
     ],
     js_angular: [
         'node_modules/@angular/**'
     ],
     js_rxjs: [
         'node_modules/rxjs/**'
     ]
 };

 var destPaths = {
     js: 'wwwroot/js/',
     js_angular: 'wwwroot/js/@angular/',
     js_rxjs: 'wwwroot/js/rxjs/'
 };

 // Copy all JS files from external libraries to wwwroot/js
 gulp.task('js', function () {
     gulp.src(srcPaths.js_angular)
         .pipe(gulp.dest(destPaths.js_angular));
     gulp.src(srcPaths.js_rxjs)
         .pipe(gulp.dest(destPaths.js_rxjs));
     return gulp.src(srcPaths.js)
         .pipe(gulp.dest(destPaths.js));
 });

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

 {
   "compilerOptions": {
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "module": "system",
     "moduleResolution": "node",
     "noImplicitAny": false,
     "noEmitOnError": false,
     "removeComments": false,
     "target": "es5",
     "outDir": "../wwwroot/app"
   },
   "exclude": [
     "node_modules",
     "wwwroot"
   ]

 }

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

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

 @Component({
     selector: 'angularjs2demo',
     template: `<h1>AngularJS 2 Demo</h1><div>Hello ASP.NET Core! Greetings from AngularJS 2.</div>`
 })

 export class AppComponent { }  

app.component.ts

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

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

 @NgModule({
     // directives, components, and pipes
     declarations: [
         AppComponent
     ],
     // modules
     imports: [
         BrowserModule
     ],
     // providers
     providers: [
     ],
     bootstrap: [
         AppComponent
     ]
 })
 export class AppModule { }  

app.module.ts

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

 platformBrowserDynamic().bootstrapModule(AppModule);

boot.ts

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

 (function (global) {
     System.config({
         paths: {
             // paths serve as alias
             'npm:': 'js/'
         },
         // map tells the System loader where to look for things
         map: {
             // our app is within the app folder
             app: 'app',

             // angular bundles
             '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
             '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
             '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
             '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
             '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

             // angular testing umd bundles
             '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
             '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
             '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
             '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
             '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',

             // other libraries
             'rxjs': 'npm:rxjs'
         },
         // packages tells the System loader how to load when no filename and/or no extension
         packages: {
             app: {
                 main: './boot.js',
                 defaultExtension: 'js'
             },
             rxjs: {
                 defaultExtension: 'js'
             }
         }
     });
 })(this);

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

 <html>
 <head>
     <base href="/">
     <title>ASP.NET Core with Angular 2 RC Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Step 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
     <script src="js/shim.min.js"></script>
     <script src="js/zone.js"></script>
     <script src="js/Reflect.js"></script>
     <script src="js/system.src.js"></script>
     <!-- Angular2 Native Directives -->
     <script src="js/moment.js"></script>
     <!-- Step 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app').catch(function(err){ console.error(err); });
     </script>
 </head>
 <!-- Step 3. Display the application -->
 <body>
     <!-- Application PlaceHolder -->
     <angularjs2demo>Please wait...</angularjs2demo>
 </body>
 </html>

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

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

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