首页 > 代码库 > Angular2 Hello World 之 RC6
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，代码如下：
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/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 });
三、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 { }
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 { }
1 import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";2 import {AppModule} from "./app.module";3 4 platformBrowserDynamic().bootstrapModule(AppModule);
五、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);
六、index.html，该文件在wwwroot目录中，代码如下：
1 <html> 2 <head> 3 <base href="http://www.mamicode.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="http://www.mamicode.com/js/shim.min.js"></script> 9 <script src="http://www.mamicode.com/js/zone.js"></script>10 <script src="http://www.mamicode.com/js/Reflect.js"></script>11 <script src="http://www.mamicode.com/js/system.src.js"></script>12 <!-- Angular2 Native Directives -->13 <script src="http://www.mamicode.com/js/moment.js"></script>14 <!-- Step 2. Configure SystemJS -->15 <script src="http://www.mamicode.com/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已经弄完了，之后的东西慢慢研究！
Angular2 Hello World 之 RC6
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。