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">

{{hero.name}}

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

[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