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

時間 2019-11-08

原文原文鏈接

ngModule

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

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 的子集。導出，供其餘模塊引用。es6

imports

聲明須要的其餘模塊bootstrap

providers

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

bootstrap

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

BrowserModule

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

FormsModule

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

HttpModule

http請求所必須的。ide

Component

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

selector -- html中自定義標籤

模板

有兩種方式：post

@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?'http://xxxxa.com':'http://zzzza.com' }
 ],
複製代碼

useFactory

@NgModule({
  providers: [
  BackendService,
  { provide: JSLoggerService, useFactory:() => {
      if(isFileLogged){
          return new FileLoggerService();
      }
      return new ConsoleLoggerService();
  } }
 ],
複製代碼

useExsiting

@NgModule({
  providers: [
  BackendService,
  { provide: API_URL, useValue: isProduction?'http://xxxxa.com':'http://zzzza.com' },
  { 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);
複製代碼