一、目錄結構分析

詳情參考：https://www.angular.cn/guide/file-structure

二、app.module.ts、元件分析

1. app.module.ts

定義 AppModule，這個根模組會告訴 Angular 如何組裝該應用。 目前，它只聲明瞭
AppComponent。 之後它還會宣告更多元件

/* 
angular模組類描述應用的部件是如何組合在一起的。每個應用都至少有個一個angular模組，也就是根模組
用來引導並執行應用。你可以為她取任何的名字。常規名字是AppModule。也就是app.module.ts檔案 
*/
import { NgModule } from '@angular/core';/* angularJS核心模組 */
import { BrowserModule } from '@angular/platform-browser';/* BrowserModule瀏覽器解析模組 */

import { AppComponent } from './app.component';/* 根元件 */
import { HeaderComponent } from './components/header/header.component';

//@NgModule接受一個元資料物件，告訴angular如何編譯和啟動應用。

@NgModule({
  declarations: [/* 引入當前專案執行的元件 */
    AppComponent,
    HeaderComponent
  ],
  imports: [/* 引入當前模組執行依賴的其他模組 */
    BrowserModule
  ],
  providers: [],/* 定義的服務，回頭放到這裡面 */
  bootstrap: [AppComponent]/* 指定應用的主檢視（根元件） 通過引導根AppModule來啟動應用，這裡一般寫的是根元件 */
})
/* 根模組不需要匯出任何東西，因為其他元件也不需要匯入根模組，但是必須得寫 _(:з」∠)_ */
export class AppModule { }
 

2. 自定義元件

建立元件 ng g component components/header
components代表在component檔案下新建一個叫components的資料夾，裡面放置header元件

元件內容詳解

import { Component, OnInit } from '@angular/core';/* 引入angular核心 */
@Component({
  selector: 'app-header',/* 使用這個元件的名稱 */
  templateUrl: './header.component.html',/* html模板 */
  styleUrls: ['./header.component.scss']/* css樣式 */
})
export class HeaderComponent implements OnInit {/* 實現介面 */
	title="我是header元件"
  constructor() { }/* 建構函式 */
  ngOnInit(): void {/* 初始化載入的生命週期函式 */

  }
}
 

詳情參考：https://cli.angular.io/

三、繫結資料

<p>{{ title }}</p>