Skip to content

Instantly share code, notes, and snippets.

@vuquangtam
Created September 12, 2019 03:15
Show Gist options
  • Save vuquangtam/4ed37740fb1320e11504258559f7dfbd to your computer and use it in GitHub Desktop.
Save vuquangtam/4ed37740fb1320e11504258559f7dfbd to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment