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) :

  • RULE OF ONE
  • 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 change detection techniques

Understanding Angular Change Detection for Beginners | Angular 17 Change Detection Methods

Understanding how the Angular change detection technique helps in the process of building dynamic and responsive web applications. In this article, we’ll explore some essential concepts of…

TypeScript Strategies for Angular, Explaining Best Practices and Techniques

Angular has fully embraced TypeScript as its primary development language, a decision that has evolved into a widely accepted standard practice. TypeScript introduces robust features for static…

Unlocking the Future of Web Development: A Deep Dive into Angular 17 Features

Angular 17, the powerhouse in the realm of JavaScript frameworks, celebrated its 13th anniversary recently. From its inception with AngularJS, the framework has continuously evolved to meet…

angular-icon

How to use ngx-spinner in Angular to create a loading spinner for smoother user interactions

In this article, we will create a loading spinner component with ngx-spinner in angular application. ngx-spinner in angular provides a loading spinner component that we can use…

angular-icon

Master AngularFire2 and Angular by building a CRUD operation app

In this article, we are creating a CRUD application with angularFire2 and angular, This module basically provides direct access to the Firebase database, and by using angular…

angular-icon

Master Angular NgRx by creating a To-Do Application

In this article we are building a todo application using Angular NgRx, NgRx is used for state management in angular applications. Let’s start by creating a new…

This Post Has One Comment

Leave a Reply

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