How to organize your angular application using modules

Angular Basics

  • Its a javascirpt framework
  • Its different from angular js
  • Used to build powerful frontend applications.
  • Its used for rapid application development and code generation.

Some of important features of angular applications are :

  1. Components
  2. Services
  3. Routing
  4. Lazy Loading
  5. Testing
  6. Data binding
  7. HTTP Module
  8. Form Module (Template Driven and Reactive Form)
  9. Pipes
  10. Directives
  11. Observables

 Ways to organize code :

To organize angular code we should use lazy loading, to get this we should create modules according to the features of application and we should create all sub components inside the module folder.

Benefits of feature module is it allows lazy loading so it load module when it require not on the time of app module load.

Single Responsibility Principle (SRP) :

  • Define one component or service per file.
  • Define small functions to reuse code.
  • Use consistent names for all symbols.
  • Use dashes to separate words in the descriptive names.
  • Use consistent names for all assets named after what they represent.
  • Use consistent names for all services named after their features.

LIFT Principle :

  • Locate code fast
  •  Identify
  • Flat (Easy file structure)
  • Try to Dry

Convention based approach :

  •  Structure our components in folders
  • All services in service folder

 Feature based approach :

  •  Each module has its own component, service and pipe files.
  • All files inside the feature folder.

 Some Useful ng Commands :

Component : ng generate component component_name

Service : ng generate service service_name

Pipe : ng generate pipe pipe_name

Directive : ng generate directive directive_name

Module : ng generate module module_name –route module_name –module app

Library ; ng generate library ng-shared (This will create the same folder like src folder)

Related Posts

angular icon

How to create Draggable Grid Blocks using angular-gridster2

To create Draggable Grid Blocks using angular-gridster2 first you need to Install the angular-gridster2 library by running npm install angular-gridster2 in your project’s root directory. You also…

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

angular icon

What is Angular Framework? Why we use Angular and What are the Advantages and Disadvantages?

Hi Everyone, In this blog we will discuss about Angular Framework and this is going to be a brief blog about Angular and its pros and cons….

angular icon

Why toPromise is depricated and Explain other options like firstValueFrom and lastValueFrom methods

toPromise method is a method form Rxjs library, It is used to convert an observable to a promise. The toPromise method subscribe to observable and retrun the…

angular icon

How to use RxJS observables in Angular? How to subscribe services with reactive programming

RxJS is a library for reactive programming, RxJS stands for reactive extension for JavaScript. It helps to handle asynchronous request in a easier way using observables. You…

angular icon

How angular app works? what happen in background when angular application starts.

Let’s understand how an angular application works from core, what happen when it starts. In index.html file there is a <app-root> custom html code, this app-root is…

This Post Has One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *