Created
September 12, 2019 03:15
-
-
Save vuquangtam/4ed37740fb1320e11504258559f7dfbd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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