你的位置:首页 > Java教程

[Java教程]Angular2 Hello World 之 RC6


  angular2还没有发布正式版,确实有点不靠谱,变化太频繁,之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于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/js28 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   return gulp.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: `<h1>AngularJS 2 Demo</h1><div>Hello ASP.NET Core! Greetings from AngularJS 2.</div>`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   // modules13   imports: [14     BrowserModule15   ],16   // providers17   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 folder10       app: 'app',11 12       // angular bundles13       '@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 bundles20       '@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 libraries27       'rxjs': 'npm:rxjs'28     },29     // packages tells the System loader how to load when no filename and/or no extension30     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 <html> 2 <head> 3   <base href="http://www.cnblogs.com//"> 4   <title>ASP.NET Core with Angular 2 RC Demo</title> 5   <meta name="viewport" content="width=device-width, initial-scale=1"> 6   <!-- Step 1. Load libraries --> 7   <!-- Polyfill(s) for older browsers --> 8   <script src="js/shim.min.js"></script> 9   <script src="js/zone.js"></script>10   <script src="js/Reflect.js"></script>11   <script src="js/system.src.js"></script>12   <!-- Angular2 Native Directives -->13   <script src="js/moment.js"></script>14   <!-- Step 2. Configure SystemJS -->15   <script src="systemjs.config.js"></script>16   <script>17    System.import('app').catch(function(err){ console.error(err); });18   </script>19 </head>20 <!-- Step 3. Display the application -->21 <body>22   <!-- Application PlaceHolder -->23   <angularjs2demo>Please wait...</angularjs2demo>24 </body>25 </html>

View Code

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

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


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