Angular Best Practices

Angular Module Organization

Module is a set of components

 App Module
 Core Modules
o Shared Singleton services
o App - Level Components like nav component or search component
 Shared Module
o Shared Components
o Directives
o Pipes
 Feature Module
o Feature level services
o Components
o Directives & pipes

1. Core Module
Create a core folder with module file like core.mModule is a set of components

 App Module
 Core Modules
o Shared Singleton services
o App - Level Components like nav component or search component
 Shared Module
o Shared Components
o Directives
o Pipes
 Feature Module
o Feature level services
o Components
o Directives & pipes

1. Core Module
1. Create a core folder with module file like core.module.ts
2. Import singleton services
3. Import and export core components like nav
4. Create NgModule
a. Add CommonModule from angular core as import
5. Add Core Module to App Module imports
6. Be Careful that any directives used in app module should be imported in core module, ex: router
module
2. Shared Module
1. Create a shared module with module file shared.module.ts
 2. Import and export shared components
3. Import Module in App.Module.ts
3. Feature Module
1. Import Common Module (if not exported in shared module) and import router and other modules
2. Import feature module in app.module.ts
1. module.ts
2. Import singleton services
3. Import and export core components like nav
4. Create NgModule
a. Add CommonModule from angular core as import
5. Add Core Module to App Module imports
6. Be Careful that any directives used in app module should be imported in core module, ex: router
module
2. Shared Module
1. Create a shared module with module file shared.module.ts
2. Import and export shared components
3. Import Module in App.Module.ts
3. Feature Module
1. Import Common Module (if not exported in shared module) and import router and other modules
2. Import feature module in app.module.ts

Application Structure & Organization

Follow the LIFT principle

LIFT:

1. L : Locate Code Quickly

2. I: Identify Code at a glance
3. F: Flattest structure possible
4. Try to be avoid duplicate code

Environment Setup:

1. Install node & git

2. Angular CLI: https://cli.angular.io/
o Why? : Comes out of the box with all the best practices
o How?: Install the Angular CLI globally and use ng new {project-name} to generate the project

Naming Structure:
1. File Naming
a. Components:
i. Components: {descriptor}.component.ts i.e. coupon.component.ts
ii. Component styles:{descriptor}.component.css i.e. coupon.component.css
iii. Component template: {descriptor}.component.html i.e. coupon.component.html
 b. Services: {descriptor}.services.ts i.e. coupon.services.ts or data-dashboard.services.ts
c. Note: Replaces spaces with -
2. Folder Structure:
a. Files related to a component should be in a folder ex:
i. Coupon
1. Coupon.component.ts
2. Coupon.component.html
3. Coupon.component.css
4. Coupon.service.ts (if used only in coupon component)
b. Common Components?
3. One Item Per File
a. Each component file or service file should represent only one component/service
b. You don’t want to keep 2 components in one service, for ex: you don’t want to keep coupon &
deals component classes in coupon.component.ts as it would become difficult to find.

Components Best Practices

1. Selectors
a. No need for selector for route based components
b. Prefixes
i. Meaning full prefixes like cat-grid for grid in category tab
2. Input & Output
a. Use decorators i.e. @Input
3. Delegate complex logic to services or sub services

Ordering of Class Members:

1. Variables or properties on the top
2. Public methods first

Services Best Practices

Injectable:
 Required when one service is injected by other service. However, it is recommended to just add it

Using for Data Retrieval:

 Move all data retrieving and complex functionalities to services to implement single responsibility
principle
 Provides abstraction and re - usability
Service Injector in Providers
 Consider a singleton service which needs to be initiated only once
 This service is registered in an Eagerly loaded feature module
o A Root Injector gets created and the service is injected in case of App Module. Service gets
registered in the root injector
 Service gets provided in Lazy Loaded Feature Module.
o In this case a new injector gets created and a new service instance gets injected causing state or
data issues
 Summary: If a service is provided in Lazy Loaded module it wont be available in Lazy Loaded Module.
If services are required across the app inject it in a core module ( eagerly loaded module)

Other best practices

1. Single Responsibility Principle
2. Naming
3. Immutability
4. Function size

 Single Responsibility Principle

Each file or class should have only one responsibilities
i.
 Naming
o Variables
 cammelCasing i.e couponName (applicable for constants as well)

o Classes
  PascalCase i.e CouponComponent or CouponService (suffix should be maintained)
 Make class name consisted with file name
 Ex: add-coupon.component.ts should have AddCouponComponent instead
of AddComponent as class name
o Imports
 3rd party imports first
 Angular/core imports
 In house imports next
 Our own Services or model imports


 Immutability
o Not changing existing objects in memory
o Helps to avoid bugs
o How?
 Use Object.assign instead of updating the same object.
 Function size
o Break functions to smaller size for easy readability

Performance
Ahead of time compilation
1. Compiles the app and creates a dist folder with files which can be deployed in production
a. Use Angular CLI
b. Use ng build --prod to do a production build

Lazy Loading Modules

1. Create a Feature Module
2. Lazy Loading should be done in routes
a. {path: 'compname', loadChildren: '{path to file}#{ModuleName}'}
i. Ex: {path:'coupon', loadChildren: 'app/coupon/coupon.module#CouponModule'}
b. Add Child Routes in Feature Module as RouterModule.forChild instead of forRoute

Handling Bundle Sizes

1. You can install tools like source map explorer and check builds
2. Ng build --prod with sourcemap =true
3. Run soruce-map-explorer {bundleName} to see what is taking up space
4. Caution in import
a. Ex: donot use imports like import {Observable} from 'rxjs/Rx';
i. Use import {Observable} from 'rxjs/Observable'
b. Imporves page size