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，代码如下：
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 }
二、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 return gulp.src(srcPaths.js)
34 .pipe(gulp.dest(destPaths.js));
35 });
三、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 }
四、现在我们依次看一下用到的几个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 AppComponent
11 ],
12 // modules
13 imports: [
14 BrowserModule
15 ],
16 // providers
17 providers: [
18 ],
19 bootstrap: [
20 AppComponent
21 ]
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);
六、index.html，该文件在wwwroot目录中，代码如下：
1 <html>
2 <head>
3 <base href="/">
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>
至此，所有的升级已经完成，然后执行Gulp任务，编译解决方案，最后生成的目录结构如下图：
现在可以检查一下我们修改的成果，如下图:
angular2 RC6的demo已经弄完了，之后的东西慢慢研究！
时间： 2024-10-11 10:59:59