I have summarized that I have studied Angular as a framework for developing SPA (Single Page Application) and Front-end of services

Keypoints.Angular.md

Angular Keypoints

App Module

• bootstrap ( main -> app.module )
  • for bootstrapping
  • only root module can have this property
• imports ( app.module )
  • modules and components
  • component tree will be open
• AppModule : Root module
• Feature module : submodule
  • page / auth / router
• Shared module : using by Feature module
  • directive / pipe

angular-cli

• ng generate
  • component
  • service
  • directive
  • pipe
  • module
  • class
  • interface
  • enum
  • guard

Routing

• use routerLink ( in HTML tag <a> )
  • routerLinkActive and routerLinkActiveOption
• route.navigate(['link']) ( in .ts )
• build only for specific path
  • ng build --prod --base-href=/path/

Rendering

• pipe
  • {{ value | pipe }}
• built-in directive
  • ngIf, ngFor
• data binding
  • one-way data binding
  • two-way data binding

One-way data binding

• interpolation
  • component -> view
  • {{ expression }}
  • {{ data?.value }}
• property binding
  • DOM HTML element property -> value
  • [property]="variable"
• event binding
  • DOM event handler -> component method
  • (event)="function()"
  • for using value in DOM ( using template reference variable )
  • <input #inputData> and (event)="function(inputData.value)"

Two-way data binding ( keyboard input )

• ngModel directive from FromsModule
  • [(ngModel)]="keyword"
  • ngModelChange event be called
  • [(ngModel)]="keyword" (ngModelChange)="inputChange()"
  • compositioned event triggered
  • option: for supporting KR,

    • composition buffer should be challenged

    • COMPOSITION_BUFFER_MODE=false

        import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
        @NgModule({
          ...
          providers:[
            { provide: COMPOSITION_BUFFER_MODE, useValue: false }
          ]
      

Data sharing between parent and child

• @Input decorator
  • CALL-BY-REFERENCE
    • parent(stateful) --> child(stateless)
  • Parent: property binding ( in template.html )
    • [child:property]="parent:variable"
  • Child: @Input() ( in component.ts )
  • @Input() variable: type; : using same name
  • @Input('alias name') variable: type;
  • option: setter ( in component.ts )

    set property(value: type) {
      this._variable = do_somethig( value )
    }
    

• @Output decorator
  • SENDING AND BINDING EVENT
  • Child: event declaration
    • @Output() eventA = new EventEmitter(); ( in component.ts )
    • send event and data ( in component.ts )

      this.eventA.emit({
        name: `${expression}`,
      })
      

  • Parent: event binding
    • <child (eventA)="parent:function($event)> ( in template.html )
    • fetch event and access data ( in component.ts )

      function(data): type {
        this.data = `${data.a} ( ${data.b} )`;
      }
      

• @ViewChild, @ViewChildren decorator
  • WARNING: code can be spagetti
  • parent can control children's objects, DOMs and their events

Content projection ( transclusion )

• <ng-content></ng-content>

Data processing

• service
  • acquiring data from outside
  • S.data = S:get(O)
  • gathering
• service mediator pattern
  • acquiring data from shared service
  • directive: input
  • directive: output
  • C.data = C:get(S:data); do_something( C.data )
  • pulling
• RxJS
  • pub/sub
  • next / subscribe
  • S.data.next( S:get(O) )
  • C.subscribe( S:data => do_something( S:data ) )
  • push

Singleton Service and Singleton Module

• Singleton Service
  • in ab.service.ts

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

• Singleton Module (using forRoot)
  • in ab.service.ts

    constructor(@Optional() config: UserServiceConfig) {
      if(config) { this._data = config.data; }
    }
    

  • in ab.module.ts

    static forRoot(@Optional() config: UserServiceConfig): ModuleWithProviders {
      return {
        ngModule: AbModule,
        providers: [
          { provide: UserServiceConfig, useValue: config }
        ]
      }
    }
    

  • in app.module.ts

    import { AbModule } from './ab/ab.module';
    @NgModule({
      imports: [
        AbModule.forRoot()
      ]
    ...
    

Prevent reimport

• in ab.module.ts

  constructor (@Optional() @SkipSelf() parentModule: AbModule) {
    if (parentModule) {
      throw new Error(
        'AbModule is already loaded. Import it in the AppModule only');
    }
  }
  

Component lifecycle

• constructor
  • service injection
• ngOnChanges
  • data binding between parent and child
  • Parent: put primitive data to child
  • Child: be called when reference changed
  • can check using SimpleChanges
  • requirement: @Input
• ngOnInit
  • initializing attributes
• ngDoCheck
  • be called when every changing detected
  • warning: performance slow down
• ngAfterContentInit
  • only once after ngDoCheck called
• ngAfterContentChecked
• ngAfterViewInit
  • once after all views have appeared
• ngAfterViewChecked
• ngOnDestroy