ng

[wangbinyq]

Decortaor pattern

• Dependency Injection

Rx pattern

Component

• structural directives
• local variable
• lifecycle

Template

• template variables

[wangbinyq]

Form

Reactive

• data flow
  • view to model: input event -> formControl.setValue
  • model to view: setValue

  setValue(value: any, options: {
    onlySelf?: boolean,
    emitEvent?: boolean,
    emitModelToViewChange?: boolean,
    emitViewToModelChange?: boolean
  } = {}): void {
    (this as{value: any}).value = this._pendingValue = value;
    if (this._onChange.length && options.emitModelToViewChange !== false) {
      this._onChange.forEach(
          (changeFn) => changeFn(this.value, options.emitViewToModelChange !== false));
    }
    this.updateValueAndValidity(options);
  }

• FormBuilder

  _createControl(controlConfig: any): AbstractControl {
    if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||
        controlConfig instanceof FormArray) {
      return controlConfig;

    } else if (Array.isArray(controlConfig)) {
      const value = controlConfig[0];
      const validator: ValidatorFn = controlConfig.length > 1 ? controlConfig[1] : null;
      const asyncValidator: AsyncValidatorFn = controlConfig.length > 2 ? controlConfig[2] : null;
      return this.control(value, validator, asyncValidator);

    } else {
      return this.control(controlConfig);
    }
  }

Template

• data flow
  • view to model: input event -> directive (formControl.setValue) -> emit ngModuleChange
  • model to view: ngOnChange -> directive update -> view update

Validate

[wangbinyq]

Decorator Pattern

• NgModule Directive Contructor
• @NgModule

[wangbinyq]

Directive

Component

Attribute Component

• selector
• ElementRef
• @input
• @HostListener

Structural Component

Angular's NgIf, Else, Then - Explained

Angular ngFor, and the compiler

• ViewContainerRef and TemplateRef (then structural template)
• * desugar

<div *ngIf="hero" class="name">{{hero.name}}</div>

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

• ng-template: not render
• ng-container: group elements

[wangbinyq]

Dependency Injection

Mastering Angular dependency injection with @Inject, @Injectable, tokens and providers

• @Injectable/@NgModule/@component
• Provider

Injectable

export type InjectableProvider = ValueSansProvider | ExistingSansProvider |
    StaticClassSansProvider | ConstructorSansProvider | FactorySansProvider | ClassSansProvider;

export interface InjectableDecorator {
  /**
   * A marker metadata that marks a class as available to `Injector` for creation.
   *
   * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
   *
   * @usageNotes
   * ### Example
   *
   * {@example core/di/ts/metadata_spec.ts region='Injectable'}
   *
   * `Injector` will throw an error when trying to instantiate a class that
   * does not have `@Injectable` marker, as shown in the example below.
   *
   * {@example core/di/ts/metadata_spec.ts region='InjectableThrows'}
   *
   */
  (): any;
  (options?: {providedIn: Type<any>| 'root' | null}&InjectableProvider): any;
  new (): Injectable;
  new (options?: {providedIn: Type<any>| 'root' | null}&InjectableProvider): Injectable;
}

export const Injectable: InjectableDecorator = makeDecorator(
    'Injectable', undefined, undefined, undefined,
    (type: Type<any>, meta: Injectable) => SWITCH_COMPILE_INJECTABLE(type as any, meta));

Hierarchical Dependency Injectors

• create dependency value by provider, if not found a valid provider, it goes up
• Injectable level
• NgModule level
• Component level
• Injector search
• @option / @host
• @self / @SkipSelf

Provider

• tell injector how to create a dependency value / configure injector
• types: export type Provider = TypeProvider | ValueProvider | ClassProvider | ConstructorProvider | ExistingProvider | FactoryProvider | any[]

[wangbinyq]

Change Detection

Understanding Change Detection Strategies in Angular