Angular 主要分為八大構造塊（也就是八個核心概念）：模塊 (module)、組件 (component)、模板 (template)、元數據 (metadata)、數據綁定 (data binding)、指令 (directive)、服務 (service)、依賴注入 (dependency injection)。其中，最核心的一個概念就就組件。

1. 模塊 (module)

Angular 應用是模塊化的，并且 Angular 有自己的模塊系統，它被稱為 Angular 模塊或 NgModules。

每個Angular應用至少有一個模塊（根模塊），習慣上命名為AppModule。

根模塊在一些小型應用中可能是唯一的模塊，大多數應用會有很多特性模塊，每個模塊都是一個內聚的代碼塊專注于某個應用領域、工作流或緊密相關的功能。

Angular 模塊（無論是根模塊還是特性模塊）都是一個帶有@NgModule裝飾器的類。

下面是一個簡單的根模塊：

// src/app/app.module.tsimport { NgModule }   from '@angular/core';import { BrowserModule } from '@angular/platform-browser';@NgModule({ imports:   [ BrowserModule ], providers:  [ Logger ], declarations: [ AppComponent ], exports:   [ AppComponent ], bootstrap:  [ AppComponent ]})export class AppModule { }

其中重要的屬性是：

declarations - 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令、管道； exports - declarations 的子集，可用于其它模塊的組件; imports - 本模塊聲明的組件模板需要的類所在的其它模塊。用來導入其他自定義模塊，第三方插件模塊； providers - 服務的創建者，并加入到全局服務列表中，可用于應用任何部分； bootstrap - 指定應用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設置bootstrap屬性。通常在main.ts中引導AppModule，這樣platformBrowserDynamic().bootstrapModule(AppModule)

2. 組件 (component)

組件負責控制屏幕上的一小塊區域，我們稱之為視圖。

下面是一個組件的簡單例子：

// src/app/hero-list.component.tsexport class HeroListComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor(private service: HeroService) { } ngOnInit() {  this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; }}

3. 模板 (template)

模板就是HTML文件，但是不是標準的HTML文件，它使用了一些模板語法，模板語法使模板有了自己的邏輯關系，并能夠實現和組件的簡單數據交互。

下面是一個簡單的模板：

// src/app/hero-list.component.html<h2>Hero List</h2><p><i>Pick a hero from the list</i></p><ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)">  {{hero.name}} </li></ul><hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>