首页 > 代码库 > Angular2 Hello World 之 2.0
Angular2 Hello World 之 2.0
最近angular2正式版发布了，现在就趁热接着记录一下2.0版的Hello World。据说由RC6升级到2.0代码改动不是很大，在写的时候也感觉改动不是很大，这次记录还是以asp.net core 空项目模板为基础，本着在此基础上添加最少的代码来实现Hello World，没用的代码全部清掉（用的时候再引入）。
一、准备工作。
首先，创建一个asp.net core空项目，并在Startup.cs类中添加“静态文件支持”；然后，在项目根目录下添加NPM配置文件、Gulp配置文件和typescript文件夹，并在该文件夹下TypeScript JSON配置文件。代码如下：
1 { 2 "version": "1.0.0", 3 "name": "asp.net", 4 "private": true, 5 "dependencies": { 6 "@angular/common": "2.0.0", 7 "@angular/compiler": "2.0.0", 8 "@angular/core": "2.0.0", 9 "@angular/platform-browser": "2.0.0",10 "@angular/platform-browser-dynamic": "2.0.0",11 12 "core-js": "2.4.1",13 "systemjs": "0.19.38",14 "rxjs": "5.0.0-beta.12",15 "zone.js": "0.6.25"16 },17 "devDependencies": {18 "gulp": "3.9.1"19 }20 }
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 }
1 /* 2 This file in the main entry point for defining Gulp tasks and using Gulp plugins. 3 Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007 4 */ 5 6 var gulp = require(‘gulp‘); 7 8 /// Define paths 9 var srcPaths = {10 js: [11 ‘node_modules/core-js/client/shim.min.js‘,12 ‘node_modules/zone.js/dist/zone.js‘,13 ‘node_modules/systemjs/dist/system.src.js‘,14 ],15 js_angular: [16 ‘node_modules/@angular/**‘17 ],18 js_rxjs: [19 ‘node_modules/rxjs/**‘20 ]21 };22 23 var destPaths = {24 js: ‘wwwroot/js/‘,25 js_angular: ‘wwwroot/js/@angular/‘,26 js_rxjs: ‘wwwroot/js/rxjs/‘27 };28 29 // Copy all JS files from external libraries to wwwroot/js30 gulp.task(‘js‘, function () {31 gulp.src(srcPaths.js_angular)32 .pipe(gulp.dest(destPaths.js_angular));33 gulp.src(srcPaths.js_rxjs)34 .pipe(gulp.dest(destPaths.js_rxjs));35 return gulp.src(srcPaths.js)36 .pipe(gulp.dest(destPaths.js));37 });
二、在typescript文件夹下创建以下三个文件app.component.ts、app.module.ts、boot.ts，代码如下：
1 import {Component} from "@angular/core";2 @Component({3 selector: ‘myApp‘,4 template: `Hello World!`5 })6 export class AppComponent { }
1 import { NgModule } from ‘@angular/core‘;2 import { BrowserModule } from ‘@angular/platform-browser‘;3 import { AppComponent } from ‘./app.component‘;4 @NgModule({5 imports: [BrowserModule],6 declarations: [AppComponent],7 bootstrap: [AppComponent]8 })9 export class AppModule { }
1 import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic‘;2 import { AppModule } from ‘./app.module‘;3 const platform = platformBrowserDynamic();4 platform.bootstrapModule(AppModule);
三、在静态文件目录wwwroot中，添加以下两个文件index.html和systemjs.config.js，代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!-- 1. Load libraries --> 9 <script src="js/shim.min.js"></script>10 <script src="js/zone.js"></script>11 <script src="js/system.src.js"></script>12 <!-- 2. Configure SystemJS -->13 <script src="systemjs.config.js"></script>14 <script>15 System.import(‘app‘).catch(function(err){ console.error(err); });16 </script>17 </head>18 <body>19 <myApp>Loading...</myApp>20 </body>21 </html>
1 /** 2 * System configuration for Angular samples 3 * Adjust as necessary for your application needs. 4 */ 5 (function (global) { 6 System.config({ 7 paths: { 8 // paths serve as alias 9 ‘npm:‘: ‘js/‘10 },11 // map tells the System loader where to look for things12 map: {13 // our app is within the app folder14 app: ‘app‘,15 // angular bundles16 ‘@angular/core‘: ‘npm:@angular/core/bundles/core.umd.js‘,17 ‘@angular/common‘: ‘npm:@angular/common/bundles/common.umd.js‘,18 ‘@angular/compiler‘: ‘npm:@angular/compiler/bundles/compiler.umd.js‘,19 ‘@angular/platform-browser‘: ‘npm:@angular/platform-browser/bundles/platform-browser.umd.js‘,20 ‘@angular/platform-browser-dynamic‘: ‘npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js‘,21 // other libraries22 ‘rxjs‘: ‘npm:rxjs‘,23 },24 // packages tells the System loader how to load when no filename and/or no extension25 packages: {26 app: {27 main: ‘./boot.js‘,28 defaultExtension: ‘js‘29 },30 rxjs: {31 defaultExtension: ‘js‘32 }33 }34 });35 })(this);
四、将JS文件拷贝到wwwroot目录中，即执行Gulp任务；生成解决方案——将ts文件转换为js文件到目录/wwwroot/app下。
至此，已修改完毕，看一下运行结果，如下图：
Angular2 Hello World 之 2.0
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。