Angular核心概念一覽表(持續更新中)

ngModule

中小型項目中ngModule往往只有一個，但在大型應用中，往往多個功能相關的ngModule。定義在同一個ngModule中的視圖組件，可以同範圍內直接使用標籤。

import { 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

聲明模塊中擁有的視圖類。主要包括：組件，指令和管道。

exports

declarations 的子集。導出，供其他模塊引用。

imports

聲明需要的其他模塊

providers

全局的服務列表，應用的任何部分都可以訪問到。

bootstrap

指定根視圖，僅根視圖可配置此項。或者配置此項的組件，即爲根視圖。渲染dom時候，會替換index.html 中app-root對應的元素。

BrowserModule

針對需要運行在瀏覽器中module所必須的。

FormsModule

表單處理，雙向綁定，所必須的。

HttpModule

http請求所必須的。

Component

 @Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {}

selector -- html中自定義標籤

模板

有兩種方式：

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {

@Component({
  selector: 'lightswitch-comp',
  template: `
    <button (click)="clicked()">Click me!</button>
    <span>{{message}}</span>`
})
export class LightswitchComponent {}

服務 -- 組件依賴的服務

DI

Angular發現某個組件依賴於服務時，它將首先檢查注入程序是否具有該服務的任何現有實例。如果請求的服務實例尚不存在，則注入器使用註冊的提供者創建一個實例，並將其添加到注入器中，然後再將服務返回到Angular。共三種方式，範圍從大到小

根級別

    @Injectable({
        providedIn: 'root',
    })

NgModule級別

@NgModule({
  providers: [
  BackendService,
  Logger
 ],
 ...
})

Component級別

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

編譯

JIT (及時編譯) -- 默認採用

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

AOT （預編譯）

數據模型 -- js es6對象

數據顯示

生命週期

input輸入

父子組件通信

組件樣式

指令

Dom操作

管道

http請求

Rxjs

Router

單元測試

本文由博客一文多發平臺 OpenWrite 發佈！