Introduction to optimized Angular codebase setup

An introduction to the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

If characters from “Joy Baba Felunath” became parts of an Angular application
Frame courtesy —জয় বাবা ফেলুনাথ / The Elephant God (1979)

TL;DR

  1. Bootstrap CSS library grid and utilities for structuring the user interface design.
  2. Angular Material for leveraging available Material Design styled elements. For designing the rest of the application elements, Material guidelines are to be followed.
  3. SCSS for writing the CSS styles because it makes writing styles a lot easier.
  4. Codebase structured according to separation of concerns and certain conventions detailed in this guide.

Prerequisites

We will get Node and Angular CLI installed as per the official Angular guide. After installation, ng --version should give us the details of the Node, npm and Angular versions.

Sample Application Outline

Let us consider that the application has two sections — one non-secure section having only the login page and the other, the secured section, which has a common header-footer and module-specific side navigation bars. There can be an optional dashboard page for keeping a provision for pages in the secured section that do not belong to any particular module.

Page structure
Sitemap for secured section

Naming Conventions

We will be following the below naming conventions for our application (s)—

Next Steps

With the initial setup ready, we can now proceed with the following tasks chronologically —

Working Example

You can visit https://angular.owrrpon.dev/ for the working sample Angular application that follows the optimized codebase setup outlined in the above guide.

Front-end developer. Code commentator. Inventor of Modhyobitto Application Design (M.A.D.) principles.