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

providers – 元件依賴的服務

DI

Angular發現某個元件依賴於服務時，它將首先檢查注入程式是否具有該服務的任何現有例項。如果請求的服務例項尚不存在，則注入器使用註冊的提供者建立一個例項，並將其新增到注入器中，然後再將服務返回到Angular。

注入依賴共三種方式，範圍從大到小

根級別注入

@Injectable({

providedIn: 'root',

})

NgModule級別注入

@NgModule({

  providers: [

  BackendService,

  Logger

 ],

 ...

})

Component級別注入

@Component({

  selector:    'app-hero-list',

  templateUrl: './hero-list.component.html',

  providers:  [ HeroService ]

})

providers注入有以下方式：

• 預設方式 ,等效於useClass

@NgModule({

  providers: [

  BackendService,

  Logger

 ],

• useClass

// provide 為令牌名，useClass：對應的是服務名，angular根據令牌名，進行服務注入



//provide 與useClass同名

@NgModule({

  providers: [

  BackendService,

  [{ provide: Logger, useClass: Logger }]

 ],

 

 //provide與useClass不同名，== 給服務起別名

 @NgModule({

  providers: [

  BackendService,

  { provide: JsLogger, useClass: Logger }

 ],

• useValue

 @NgModule({

  providers: [

  BackendService,

  { provide: API_URL, useValue: isProduction?'':'' }

 ],

• useFactory

 @NgModule({

  providers: [

  BackendService,

  { provide: JSLoggerService, useFactory:() => {

      if(isFileLogged){

          return new FileLoggerService();

      }

      return new ConsoleLoggerService();

  } }

 ],

• useExsiting

 @NgModule({

  providers: [

  BackendService,

  { provide: API_URL, useValue: isProduction?'':'' },

  { provide: JSBackendService, useExisting:BackendService  }, //起別名+複用之前的服務

 ],

使用依賴有以下兩種方式：

顯示宣告依賴

構造方法中@Inject顯示宣告依賴

@Component({

  selector: 'app-hero-list',

  template: `

    <div *ngFor="let hero of heroes">

      {{hero.id}} - {{hero.name}}

    </div>

  `

})

export class HeroListComponent {

  heroes: Hero[];



  constructor(@Inject(HeroService) heroService: HeroService) {

    this.heroes = heroService.getHeroes();

  }

}

Angular推斷依賴

構造方法中宣告依賴

@Component({

  selector: 'app-hero-list',

  template: `

    <div *ngFor="let hero of heroes">

      {{hero.id}} - {{hero.name}}

    </div>

  `

})

export class HeroListComponent {

  heroes: Hero[];



  constructor(heroService: HeroService) {

    this.heroes = heroService.getHeroes();

  }

}

可選依賴

@Component({

  selector: 'app-hero-list',

  template: `

    <div *ngFor="let hero of heroes">

      {{hero.id}} - {{hero.name}}

    </div>

  `

})

export class HeroListComponent {

  heroes: Hero[];

  logger:Logger;



  constructor(heroService: HeroService,@Optional() private logger: Logger) {

    this.heroes = heroService.getHeroes();

    if (this.logger) {

     this.logger.log(some_message);

    }

  }

}

編譯

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

單元測試

開發外掛和devTool

參考文獻

本文作者：前端首席體驗師(CheongHu)

版權宣告： 本文章除特別宣告外，均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明出處！