正文

Angular2 Hello World 之 RC6

IP云
IP云V管理员/3 阅读
08/09
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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已经弄完了，之后的东西慢慢研究！