前言

今天要說明的是Angular是如何Bootstrapping Component的。 我們會從 pluralsight的課程 Angular 2: Getting Started 提供的 Github範例 做說明。

要Bootstrapping Component我們需要完成兩件事情

  1. Load the root component(bootstrapping)
  2. Host the application

說明

app.component.ts
  • ts
1
2
3
4
5
6
7
8
9
import { Component } from '@angular/core';

@Component({
  selector: 'pm-app',
  template: `
      <h1>Angular2: Getting Started</h1>
  `
})
export class AppComponent { }
Index.html
  • html
1
2
3
4
5
6
7
8
9
10
<head lang="en">
  <!-- Configure SystemJS -->
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app').catch(function(err){ console.error(err); });
  </script>
</head>
<body>
  <pm-app>Loading App ...</pm-app>
</body>

Component的 selector:’pm-app’ 代表指定directive的名稱，而Index的 我們稱為directive。 directive就是我們自己設計的元素，依上面的例子就是讀取template的Html。

那現在的問題是，Module是如何知道我們的root application component的呢?

  1. index.html Import App 資料夾的ES module
  2. Systemjs.config.js 設定main.js為application的起點，所以main.js就是我們讀取的第一個ES module
  3. main ts file bootstraps 我們的第一個Angular module，並啟動application

視覺化流程就是這樣

啟動流程啟動流程

參考

Angular 2: Getting Started