angular2+typescript的第一個應用---Hello world!
阿新 • • 發佈：2018-11-29
首頁：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title><%= TITLE %></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- inject:css --> <!-- endinject --> </head> <body> <app>Loading...</app> <!-- inject:js --> <!-- endinject --> <%= INIT %> </body> </html>
頁面的body中有一個app標籤，它內部有一個文字節點"Loading..."，這個標籤會一直處於可見狀態，直到應用啟動好、主元件渲染完成為止。
<%= INIT %>和<-- inject:js...，這兩個是模版佔位符，用來注入內容的，在不同的例子裡面注入的內容不同，這些模版不是angular特有的，只是用來避免大量的重複程式碼，轉換後的內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Switching to Angular 2</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- inject:css --> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"> <!-- endinject --> </head> <body> <app>Loading...</app> <!-- inject:js --> <script src="/node_modules/es6-shim/es6-shim.min.js"></script> <script src="/node_modules/reflect-metadata/Reflect.js"></script> <script src="/node_modules/systemjs/dist/system.src.js"></script> <script src="/node_modules/zone.js/dist/zone.js"></script> <script src="/node_modules/rxjs/bundles/Rx.min.js"></script> <!-- endinject --> <script> System.config({"defaultJSExtensions":true,"paths":{"bootstrap":"/dist/dev/bootstrap","markdown":"/node_modules/markdown/lib/markdown","immutable":"/node_modules/immutable/dist/immutable.js"},"map":{"rxjs":"/node_modules/rxjs","@angular":"/node_modules/@angular"},"packages":{"@angular/core":{"main":"index.js","defaultExtension":"js"},"@angular/compiler":{"main":"index.js","defaultExtension":"js"},"@angular/common":{"main":"index.js","defaultExtension":"js"},"@angular/platform-browser":{"main":"index.js","defaultExtension":"js"},"@angular/platform-browser-dynamic":{"main":"index.js","defaultExtension":"js"},"@angular/router-deprecated":{"main":"index.js","defaultExtension":"js"},"@angular/http":{"main":"index.js","defaultExtension":"js"},"rxjs":{"defaultExtension":"js"}}}); System.import("./app") .catch(function () { console.log("Report this error to https://github.com/mgechev/switching-to-angular2/issues", e); }); </script> </body> </html>
app.ts程式碼如下：
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
@Component({
selector: 'app',
templateUrl: './app.html'
})
class App {
target:string;
constructor() {
this.target = 'world';
}
}
bootstrap(App);一開始從@angular/core模組匯入了@Component裝飾器，從@angular/platform-browser-dynamic模組匯入了bootstrap函式，然後用@Component裝飾了APP類。
接下來定義了元件的檢視，這裡使用了templateUrl而不是內聯模版template，模版在app.html中：
<h1>Hello {{target}}!</h1>