Angular Renaissance: Part 1 - Getting Started

Angular has a steep learning curve. This statement is true, no doubt, but valid for other JS framework as well, if we are considering the whole some approach to learn something. In other framework/libraries like React the learning curve is not very short either, to build a full-scale app the requirement is similar so do the learning curve. It's just that how much content from the framework/library covers by its own.

Angular in particular is a framework carrying lots of features within in its own scope for which you don't have to hunt for any third-party NPM packages. This inclusiveness makes the learning curve steeper as compared to its counter parts, plus the TypeScript is cherry on cake. Angular is one stop shop for most of your UI framework needs.

Enough of justifications if someone wants to learn Angular, they will do so. So, with that let us begin our journey to explore the Angular framework.

We will head in this direction:

• Introduction
• Prerequisites
• Initialize Project
• Write - Hello World
• Add Dependencies
• Design UI Skeleton
• Design Form Component
• Design Item and Empty Component
• Design List Component
• Project Structure

Let us get started!

Introduction

Angular carrying the flag of SPA since very beginning. It's a versatile and mature framework to rely upon for any demanding and enterprise scale apps. I personally never face situation struggling to match up with most harsh app requirements, Angular can handle the pressure by providing many ways to handle situations, ranging from forms, routing, state management, unit testing etc. For further read checkout Angular Official Website.

Prerequisites

So, before you start your Angular journey you must be equipped with below arsenal:

• HTML and CSS
• JavaScript (ES6+)
• TypeScript
• SASS
• NPM for dependencies
• Text Editor or IDE (VS Code)
• Version Control (Git)

Initialize Project

Angular is has its own CLI tool to live with. This tool has many potential and capabilities, one can create a new app, build it, run test and serve the app as well. Checkout more from Angular CLI page.

Take a fresh working directory to setup your project and run below command:

ng new ng-notesy-app

Here, we are using the "new" command of Angular CLI to create a new project named ng-notesy-app.

This will ask some questions, provide below options:

? Which stylesheet format would you like to use? Sass (SCSS)
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? no
? Do you want to create a 'zoneless' application without zone.js? No
? Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai None

Once options are provided, your project will be created, but with "node_modules" folder.

Your project structure will look something like this:

ng-notesy-app
|-- .angular
|-- node_modules
|-- public
| |-- favicon.ico
|-- src
| |-- app
| | |-- app.component.html|ts|scss|spec.ts
| | |-- app.config.ts
| | |-- app.routes.ts
| |-- index.html
| |-- main.ts
| |-- styles.scss
|-- .editorconfig
|-- .gitignore
|-- angular.json
|-- package-lock.json
|-- package.json
|-- README.md
|-- tsconfig.app.json
|-- tsconfig.json
|-- tsconfig.spec.json

When you create a new project post Angular v20, then you won't get the type suffix in the end of the file names (e.g. component, services, etc.), the earlier versions of Angular use to have it. To have the type suffix added when we create any files using Angular CLI commands, will add below schematic properties to "angular.json" file:

{
  "projects": {
    "ng-notesy-app": {
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "type": "component"
        },
        "@schematics/angular:directive": { "type": "directive" },
        "@schematics/angular:service": { "type": "service" },
        "@schematics/angular:guard": { "typeSeparator": "." },
        "@schematics/angular:interceptor": { "typeSeparator": "." },
        "@schematics/angular:module": { "typeSeparator": "." },
        "@schematics/angular:pipe": { "typeSeparator": "." },
        "@schematics/angular:resolver": { "typeSeparator": "." }
      },
    }
  }
}

Write - Hello World

Let us clear the initial boiler plate code and make our app empty. Remove everything from app.component .html, .ts, .scss and style.scss files. Just add one h1 tag with "Hello World" written inside it to the app.component.html file.

<h1>Hello World</h1>

Now, if you run your app using "npm start" command you only able to see "Hello World" printed on the screen on "localhost:4200".

Add Dependencies

We will add Bootstrap for UI capabilities and Bootswatch theme on top of Bootstrap just to keep it funky. We will also use Bootstrap Icons for keeping our app rich in UX. For this add below dependencies:

npm i bootstrap
npm i bootswatch
npm i bootstrap-icons

For setting up Bootstrap and use Bootswatch theme, go to "style.scss" file and add below line:

@import '../node_modules/bootswatch/dist/litera/bootstrap.min.css';
@import '../node_modules/bootstrap-icons/font/bootstrap-icons.min.css';

Now, go to "angular.json" file go to the script property "projects > architect > build > options > scripts" and add Bootstrap bundled JS file:

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]

Design UI Skeleton

Let us open the "app.component.html" file and start painting our imaginations. Right now, our "app.component.html" looks like this:

<h1>Hello World</h1>

Will add the base of Bootstrap, that is container:

<div class="container my-5">
  <div class="row">
    <div class="col">
        <h1>Hello World</h1>
    </div>
  </div>
</div>

Adding now the header and footer component. Create a folder called "components" in which will have header.component and footer.component. Will use Angular CLI command to create the component, there are many commands of Angular CLI you can check them out from here Angular CLI Commands:

ng generate component header
ng generate component footer

// or

ng g c header
ng g c footer

Starting with "header.component" first:

<h1 class="text-center mt-5 display-1 fw-bolder text-dark-emphasis">
  <i class="bi bi-snow2 text-success"></i> notesy
</h1>

Then, "footer.component" component:

<div class="text-center p-5 bg-light">
  All rights reserved &copy; 2024
</div>

Here, will make the year dynamic, add the current year variable in the footer TS file:

import { Component } from '@angular/core';

@Component(...)
export class FooterComponent {
  year = new Date().getFullYear();
}

Use this variable inside the footer HTML file using interpolation {{}}:

<div class="text-center p-5 bg-light">
  All rights reserved &copy; {{year}}
</div>

Now, let us add it to app component:

<app-header></app-header>

<div class="container my-5">
  <div class="row">
    <div class="col">
        <h1>Hello World</h1>
    </div>
  </div>
</div>

<app-footer></app-footer>

When ever we do so, we must need to add the used components (child) in the imports array of the component (parent) which is using these added components within their template.

In our case we need to add the header and footer components to the imports array of the app component as shown below:

import { Component } from '@angular/core';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';

@Component({
  selector: 'app-root',
  imports: [HeaderComponent, FooterComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class App {}

We must ensure to add the child components to imports array of the parent, hence forth.

Design Form Component

Create a form for entering new note, this form will be dead simple, with only input text field and an add button.

<form>
  <div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="Write some notes..." />
    <button class="btn btn-success" type="submit" title="add">
      <i class="bi bi-plus-lg fs-5 fw-bolder"></i>
    </button>
  </div>
</form>

Here, we have created HTML form with input and a button.

Add these components to app component as shown below:

<app-header></app-header>

<div class="container my-5">
  <div class="row">
    <div class="col">
        <app-form></app-form>
    </div>
  </div>
</div>

<app-footer></app-footer>

Design Item and Empty Component

Before we jump to design our list component to show a list of cards for individual note, it's important to create an item component that shows a note in a card format.

<div class="card bg-body-secondary border-0 mb-2">
  <div class="card-body">
    <p class="card-text">
      <span class="d-flex justify-content-between align-items-center">
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, debitis?</span>
        <button type="button" class="btn btn-light ms-3">
          <i class="bi bi-trash-fill text-danger fs-6"></i>
        </button>
      </span>
    </p>
  </div>
</div>

Here, we have added static content within the span tag as a placeholder, later will see actual values.

Create an empty component with beautiful message to convey that there are not notes present to show. This will be visible when there are no items in the list.

<div class="text-center p-3 text-muted">
  <h1 class="display-4 text-secondary">
    <i class="bi bi-egg me-2"></i>
  </h1>
  No notes found
</div>

Either, the item component or empty component will be visible in the list component at a time based on the data.

Design List Component

Finally, let us build the parent List component which will have an array of notes, and these notes will be looped to show the note content using Item component. For now we will skip the array and loop part and focus to place item components. Let us see what we are talking about:

<app-item></app-item>
<app-item></app-item>
<app-item></app-item>

Here, we have just added the 3 item components to show list of cards appearing.

Not to forget, we will also add the Empty component, after the placeholder item components. Will not display for now, in case for checking how it appears on the UI, we can remove the CSS class and verify, since this part will be controlled from code logic later, for now will keep it hidden:

<app-item></app-item>
<app-item></app-item>
<app-item></app-item>

<app-empty class="d-none"></app-empty>

Add the list component to app component so that we can be able to see the notes on the screen:

<app-header></app-header>

<div class="container my-5">
  <div class="row">
    <div class="col">
        <app-form></app-form>
        <app-list></app-list>
    </div>
  </div>
</div>

<app-footer></app-footer>

Project Structure

Finally let us have a look how our entire app is looking now:

Looks pretty decent; and this is how our project structure is looking now:

ng-notesy-app
|-- .angular
|-- .vscode
|-- node_modules
|-- public
| |-- favicon.ico
|-- src
| |-- app
| | |-- components
| | | |-- empty
| | | | |-- empty.component.html|ts|scss|spec.ts
| | | |-- footer
| | | | |-- footer.component.html|ts|scss|spec.ts
| | | |-- form
| | | | |-- form.component.html|ts|scss|spec.ts
| | | |-- header
| | | | |-- header.component.html|ts|scss|spec.ts
| | | |-- item
| | | | |-- item.component.html|ts|scss|spec.ts
| | | |-- list
| | |   |-- list.component.html|ts|scss|spec.ts
| | |-- app.component.html|ts|scss|spec.ts
| | |-- app.config.ts
| | |-- app.routes.ts
| |-- index.html
| |-- main.ts
| |-- styles.scss
|-- .editorconfig
|-- .gitignore
|-- angular.json
|-- package-lock.json
|-- package.json
|-- README.md
|-- tsconfig.app.json
|-- tsconfig.json
|-- tsconfig.spec.json

In the GitHub repository, you can find project for this article in the directory called "ng-1-init", the other folders are for the further milestone.