Application Structure and Best Practices Of Angular — Part 1

Ankita Joshi
Oct 4 · 3 min read
Image from

Before this, we have spoken about the Angular Architecture Pattern. Where we learn the basics about Modular Architecture or Domain-Driven Design. Now we will see how to actually design any Angular project and what are the best practices to do that.

To write any angular application we can use Angular CLI (not mandatory but keeps it simple and easy :) ).

Angular CLI -

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

Install the CLI using the npm package manager:

Let’s start with a new, basic Angular project, to create, build, and serve it on a DevServer, use the following commands

Let’s see some basic CLI commands to work on the angular application directory easily. CLI will create all directories symmetrically. If we are creating the components using CLI then all components directories will have the same format of file naming and will contain the same files (component, template, style, etc).

  1. ng-add —

Adds the npm package for a published library to your workspace

example — ng add @angular/material

2. ng-build (ng-b) —

Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.

3. ng generate (ng-g) —

Generates and/or modifies files based on a schematic of the application or module. Basically used to generate components, directives, pipes, modules, services, routes, etc

uses — ng generate component basic-project-first-component this command will create a component directory of name BasicProjectFirstComponent. It will create files for component, template, style and test.

In this way, we can create

directive — ng generate directive name_of_directive

service — ng generate service name_of_service

module — ng generate module name_of_module

pipe — ng generate pipe name_of_pipe

4. ng-lint —

Runs linting tools on Angular app code in a given project folder.

5. ng-serve —

Builds and serves your app, continue rebuilding on changes.

Modular Structure of Angular Application —

Here comes a domain-driven design strategy in the picture (we can say). We can divide our application into modules according to our domains (example of shipping application — login, delivery, infra, packages, receipt). Here each module contains components related to a domain, then services, interfaces, and many more. Which will separate the business logic of the application for easy use.
Modules or components can be reusable at different places in the application.

Use of shared module —

This module can contain all frequently reusable components, directives, pipes, etc for application.

Always create a feature module named SharedModule in a shared folder, for example, app/shared/shared.module.ts defines SharedModule.

Lazy Loaded Folders —

Arranging folders or features in lazy loading is one of the best ways to achieve the best practice of Angular. It will help to structure your application.

A distinct application feature may be lazy loaded or loaded on demand not on when the application starts.

A typical lazy loaded folder contains a routing component, its child components, and their related assets and modules. The folder makes it easy to identify lazy loaded feature.

Lifecycle Hooks —

We can use Lifecycle hooks to tap into important events exposed by Angular, like ngOnInit, NgOnChanges, ngDoCheck, etc. Implementation of the lifecycle hook interfaces prescribes typed method signatures. We can use those signatures to flag spelling and syntax mistakes.

In the next story, we will look into the file and folder structure of the angular application and nomenclature in angular.

Reference —


A Bespoke Engineering Studio