Angular Web Application — Basic

Starting with Basic implementation

This post is for newbie to help them implement Angular UI code starting from very basic installations.

Prerequisites

• Angular basic
• Typescript
• Visual Studio Code

Implementation Steps

1. Set up and installations
2. Setup code base — Basic Angular Application
3. Run the Application

1. Setup and Installations

a. Install Node JS
Go to https://nodejs.org/en/
Node version 14.15.4 is used for this post.

To check node version, use below command in terminal i.e Command Prompt

>> node –version

Command Output: v14.15.4

b. Install Angular CLI
This is a utility command tools provided by Angular to facilitate developers to create angular projects, code files and many more.

Open terminal at any path and run below command to install Angular CLI globally –

>> npm install -g @angular/cli

Install Angular CLI

2. Setup code base — Basic Angular Application

a. Create Angular project using Angular CLI
We are imaging a web application that will be used in a Car Showroom.
Angular CLI facilitates developer to seamlessly create Angular project, add components, module.
To create basic Angular project, Open terminal and browse to a path, where Angular UI project needs to be created and run below Angular CLI command –

>> ng new CarShowroom

Project name used: CarShowRoom

This is an interactive command and needs to provide few inputs.

Question 1: Do you want to enforce stricter type checking…
Answer: Yes

Question 2: Would you like to add Angular routing?
Answer: Yes

Question 3: Which stylesheet format would you like to use? (this needs to use arrow key to select answer from given list)
Answer: SCSS

Angular version being used is 11.1.2

Create Project using Angular CLI command

Open the project in Visual Studio Code using below steps –
1. Open Visual Studio Code
2. Go to File menu and Click on ‘Open Folder’ option.
3. Navigate to the directory where our Angular project is created.

The created project is in runnable state and can be viewed by following 3rd Steps in this post — Run the Application

b. Modify application
We are now going to add components to our application. Each component will be viewed on click of a button on navigation bar using Angular Routing.
- Home
- Cars
- Invoice
For simplicity, the components are loaded with only simple text displaying the component name.

Add BookCar component
Run below Angular CLI command in terminal of Visual Studio Code.

>> ng g c bookcar

Add BookCar Component

A component with name ‘bookcar’ is added to project with below files in bookmark folder –
- bookcar.component.html
- bookcar.component.scss
- bookcar.component.spec.ts
- bookcar.component.ts

Project Structure with BookCar Component

Modify code from respective files, as stated in below code snippets –

Code Snippet — BookCar Component

Add cars, home, invoice components in the same way using below Angular CLI commands –

>> ng g c cars

>> ng g c home

>> ng g c invoice

Modify code from respective files, as stated in below code snippets –

Code Snippet — Cars Component

Code Snippet — Home Component

Code Snippet — Invoice Component

Add Routing module
Run below Angular CLI command in terminal of Visual Studio Code –

>> ng g m app-routing — flat

Command option “— flat” is used to add module file app-routing.module.ts without creating a folder.

Add Routing Module

We are going to add application routings in app-routing.module.ts
Modify code from respective files as stated in below code snippets –

Code Snippet — App Module & App Component

After adding components & modules, project structure will look like as shown in below screenshot –

Project Structure

3. Run the Application

a. Use below command in terminal of Visual Studio Code

>> npm start

Run Project

b. After command runs successfully, open url: http://localhost:4200 in browser as stated in the command logs.

Application Home Page

c. Application is coded to load default at home component. Other tabs: Cars and Invoice can be clicked to load respective components.

Thank you for reading. If you like this post, give a Cheer!!!
Happy Coding ❤