ANGULAR STRUCTURE

ANGULAR PRESENT
-----
* CODING CONVENTION
** RESOURCE
   - https://angular.io/guide/styleguide
** NAMING
   - feature.type.ts
   - feature.module.ts => FeatureModule (upper camelCase + type suffix)
   - feature-a.component.ts => FeatureAComponent
   - component selector => app-feature-a (dashed-case)
   - directive selector, pipe => appFeatureA (lower camel-case)
   - test filename => feature-a.component.spec.ts
   - test e2e filename => feature-a.e2e-spec.ts
** CODING
   - class => upper camelCase
   - variable => lower camelCase
   - constant => define with const (prevent reassignment) + lower camelCase
   - interface => upper camel case (without I: as IModel, IBlabla)
   - property + method => lower camel case (private property without _: as _superprivate or __supersuperprivate)
   - import: separate third party and app module
     #+BEGIN_SRC js
     import { HttpClient } from '@angular/common/http';
     import { Injectable } from '@angular/core';

     import { ExceptionService, SpinnerService, ToastService } from '../../core';
     import { Hero } from './hero.model';
     #+END_SRC
* FOLDER STRUCTURE
  #+BEGIN_SRC sh
  app
  ├── core
  ├── feature
  │   ├── components
  │   ├── containers
  │   ├── services
  │   └── shared
  └── ui
  #+END_SRC
* GLOBAL SERVICE MODULE VS GLOBAL COMPONENT MODULE
** Global service module
   - Initialize globally => import once at root module
   - Example: HttpClientModule, BrowserAnimationModule
** Global component module
   - Init locally when import => import in every module that using.
   - Example: CommonModule, FormsModule
* SHARED MODULE AND CORE MODULE AND FEATURE MODULE
** CORE MODULE
   - Includes global services
   - Includes bootstrap code running when starting app
   - Reexport modules are imported once in root module.
** SHARED MODULE
   - Reexport shared component, pipe, module ....
** FEATURE MODULE
   - Separate module by feature for lazyloading
* LAZYLOAD MODULE
  - Import by routing module (load on demand)
  - Do not import in main module (load immediately)
* SMART COMPONENT VS DUMB COMPONENT
** Smart component
   - Handle business logic of component => as Controller in MVC
   - Do not handle styling HTML-CSS
** Dumb component
   - Only HTML-CSS => as View layer in MVC
   - Render data receive from parent
* ALIAS IMPORT
  - Alias for app root:
    - @app/* => src/app/*
  - Alias for environment:
    - @env or @environment => src/environments/environment
    - when build --prod => environtment.ts is replaced by environment.prod.ts