Angular2 Hello World 之 2.0.0-beta.14

時間 2019-11-08

標籤 angular2 angular hello world 2.0.0 beta.14 beta 欄目 AngularJS 简体版

原文原文鏈接

　　公司如今採用angualrjs開發一些web應用，採用的是angular1，如今angular2已經差很少了，據說最近rc6已經出來了……其實感受好慢啊！以前也作過一些anglar2的例子，可是沒有記錄下來，如今從新拾起來還費了半天勁兒！弄了半天老是報錯，按着文件對比了半天也沒有找打是哪裏寫錯了……哎！最後發現是版本的問題，此次想把它記錄下來，方便以後查看。html

環境：Visual Studio 2015 Update 3+Asp.net core templatesnode

　 1、建立一個 Asp.net core空項目es6

　　至此，一個空的項目就建立成功了。能夠直接按F5調試，以下圖：web

　頁面的輸出的「Hello World！」是下面這段代碼起的做用，typescript

1 app.Run(async (context) =>
2 {
3        await context.Response.WriteAsync("Hello World!");
4 });

View Code

　　如今咱們要將上面代碼換掉(若是不換掉，在瀏覽器查看網頁時老是顯示「Hello World!」)，代碼以下（添加靜態文件處理）：gulp

1 app.UseStaticFiles();

View Code

　　2、添加「NPM 配置文件」至項目根目錄下，並添加angular2以及依賴包（程序會自動下載），以下：bootstrap

 1 {
 2   "version": "1.0.0",
 3   "name": "asp.net",
 4   "private": true,
 5   "dependencies": {
 6     "angular2": "2.0.0-beta.14",
 7     "systemjs": "0.19.24",
 8     "rxjs": "5.0.0-beta.3",
 9     "zone.js": "0.6.6"
10   },
11   "devDependencies": {
12     "gulp": "3.9.1"
13   }
14 }

View Code

　　3、添加「Gulp 配置文件」至項目根目錄下，用於移動angular2以及依賴包到指定的目錄下，代碼以下：瀏覽器

 1 var gulp = require('gulp');
 2 
 3 gulp.task("angular2:moveLibs", function () {
 4     return gulp.src([
 5             "node_modules/angular2/bundles/angular2-polyfills.js",
 6             "node_modules/systemjs/dist/system.src.js",
 7             "node_modules/rxjs/bundles/Rx.js",
 8             "node_modules/angular2/bundles/angular2.dev.js",
 9     ]).pipe(gulp.dest('./wwwroot/libs/'));
10 });

View Code

　　添加完成以後，右鍵「gulpfile.js」選擇「任務運行程序資源管理器」，以下圖：angular2

　　如上圖會發現一個任務：「angular2:moveLibs」，而後右鍵該任務點擊「運行」，以下圖：app

　　此時便會將gulp任務中指定的js文件拷貝到指定的路徑下，這裏是「./wwwroot/libs/」。

　　4、在項目更目錄下添加目錄「typescripts」（用來存放typescript腳本文件，也是咱們編寫的angular2代碼）以及在該目錄下添加「TypeScript JSON 配置文件」，並在配置文件中添加以下代碼：

 1 {
 2   "compilerOptions": {
 3     "target": "es6",
 4     "module": "system",
 5     "moduleResolution": "node",
 6     "sourceMap": true,
 7     "emitDecoratorMetadata": true,
 8     "experimentalDecorators": true,
 9     "removeComments": false,
10     "noImplicitAny": false,
11     "outDir": "../wwwroot/typescripts"
12   },
13   "exclude": [
14     "node_modules",
15     "wwwroot"
16   ]
17 }

View Code

　　說明："outDir": "../wwwroot/typescripts" 該配置會將「typescripts」目錄中的*.ts文件編譯爲對應的*.js文件放到wwwroot/typescripts目錄中。

　　在該目錄下新建兩個「TypeScript 文件」，這裏分別命名：「app.ts」，「boot.ts」。前者是demo主程序，後者爲啓動使用（不知道說的對不對），代碼以下：

1 import {Component} from 'angular2/core';
2 @Component({
3     selector: 'my-app',
4     template: '<h1>My First Angular 2 App</h1>'
5 })
6 export class AppComponent { }

app.ts

1 import {bootstrap}    from 'angular2/platform/browser';
2 import {AppComponent} from './app';
3 bootstrap(AppComponent);

boot.ts

　　5、在「wwwroot」目錄下新建「index.html」文件，代碼以下：

 1 <html>
 2 <head>
 3     <base href="/">
 4     <title>Angular 2 QuickStart</title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <!-- 1. Load libraries -->
 7     <script src="libs/angular2-polyfills.js"></script>
 8     <script src="libs/system.src.js"></script>
 9     <script src="libs/rx.js"></script>
10     <script src="libs/angular2.dev.js"></script>
11     <!-- 2. Configure SystemJS -->
12     <script>
13       System.config({
14         packages: {
15             typescripts: {
16             format: 'register',
17             defaultExtension: 'js'
18           }
19         }
20       });
21         System.import('typescripts/boot')
22             .then(null, console.error.bind(console));
23     </script>
24 </head>
25 <!-- 3. Display the application -->
26 <body>
27     <my-app>Loading...</my-app>
28 </body>
29 </html>