angular2+typescript的第一个应用---Hello world!

首页：

<!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>

最后一行代码把根组件传递给bootstrap方法并启动应用。

angular2+typescript的第一个应用---Hello world!

猜你喜欢