Angular — A Beginner’s Guide to Design and Implementation of an Angular App
By: Bhargav Bachina
Tags: Angular, Programming, Software Development, Web Development, JavaScript

Angular — A Beginner’s Guide to Design and Implementation of an Angular App

A Step by Step guide with an example project

If you are a beginner for Angular and wonder how to start, This article is for you and we focus only on basic Angular App with one page. Once finished our app looks like below where we can add items, edit, delete items.

Home screen of the completed project

Prerequisites

Initialize the project with Angular/cli

Understand the Basic structure of the app

Understand the Starting point of the app

Design ToDoList App

Implement ToDoList App

Prerequisites

Install Nodejs

Install Angular cli

Install Typescript globally

Basic understanding of typescript/javascript

Basic knowledge about Angular

once you install nodejs and we need to install Angular cli and typescript globally with the following commands

npm install -g @angular/cli npm install -g typescript

Initialize your project with Angular/cli

Angular cli makes it easy to start the working angular project right out of the box and it follows all the best practices of the Angular.

// it will create the working project. ng new todoApp // cd to todoApp

cd todoApp // start the project and app runs on 4200

npm start

creating todoApp with angular cli

starting your project with npm command

App running on port 4200

Understand the Basic structure of the app

Once the Basic/default app is running, we can just take a moment and take a look at the project structure that Angular CLI created for us.

top-level structure

e2e: All the automation tests go into this folder.

node_modules: This folder includes all the dependencies.

src: all the app source code will be in this folder. it has all index.html, environments, unit tests, assets etc.

.editorconfig: Editor configuration

.gitignore: This contains all the info that we don’t want to check into git

angular.json: This json file contains all the info about the project like how to build, configure, environment, e2e etc..

package.json: This is the package manager which contains all the scripts and dependencies of the project.

tsconfig.json: Since angular is written in typescript, this file has all the typescript configuration.

tslint.json: This is linting file has all the rules which maintain the same standards across all the files.

Understand the Starting Point of the app

If you open the src folder and we can see a lot of files But, we need to understand these following files

main.ts

app.module.ts

app.component.ts

app.component.html

index.html

src directory

main.ts

This is the main file which bootstraps the Angular. AppModule is the first module it invokes at line 11.

main.ts

app.module.ts

Angular follows the component design pattern in which App is divided into modules and each module is divided into components. So, This is the starting Module of the App which imports other modules and we need to declare the components that we use in this module. Since we are using AppComponent and add that to declarations array.

app.module.ts

app.component.ts

In Angular, Each component has styleUrl, template, and selector. A template is the html file and styleurl is the CSS file to be applied for this component.

app.component.ts

app.component.html

If we look at the above app.component.ts file it uses this html file as the template. This is the html file that we see when app loads in the browser.

app.component.html

index.html

This is the index.html which loads in the browser first. If we look at line number 12, we are using <app-root></app-root> selector which is declared in the app.component.ts above.

Now, we have seen all the important files of the app. Since app.comonent.ts is the starting component, Let’s replace the default HTML with this line “Welcome <your name>” and then load the page.

changed app.component.html

Home screen after our changes

Design ToDoList App

Let’s design the app. We have one screen where we add items and list those items. Angular follows the component design pattern where the entire app can be divided into multiple modules and each module can be divided into reusable components. With this approach, we can lazy load the modules which can increase the app’s performance significantly and reuse the components.

Design of the App

We have header and footer for the screen, Let’s put those in the shared module. It is customary to create a shared module for any shared components across modules. So, we have two modules in App Module and a bunch of components. The benefits of creating modules are that we can lazy load those modules whenever necessary which increases app’s performance significantly.

Different Modules of the App

Implement ToDoList App

Let’s implement these modules in this particular order.

Shared Module

Items Module

Shared Module

This Shared module has two components Header and Footer component which are present across all screens.

Let’s use angular CLI to generate these modules and components and we can see those created in the screenshot.

// go to the root folder and this will created shared folder and

// shared.module.ts

ng g m shared // generate Header component under shared module

ng g c shared/header // generate Footer component under shared module

ng g c shared/footer

created header, footer component in the shared module

The one thing we need to change here is that we need to declare Header and footer components in the exports array of share module. This is because we will be using this shared module in app.module.ts and these components have to be imported for use.

export HeaderComponent and FooterComponent from shared module

Let’s import the Shared module into the App module and use those components in the App component. Notice selectors <app-header> and <app-footer> remember every component has a selector which can be used as a HTML tag.

using header and footer components in the app component

If we start and load the app and we can see header and footer appear on the page.

Notice header and footer on the home page

It’s time to add some CSS and code to these header and footer components. Let’s install bootstrap for our project.

// install ngx-bootstrap

npm install ngx-bootstrap --save // add the bootstrap css to the index.html in the head section <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Add the below code for the header component

CSS, ts and html files of Header component

Add the below code for the footer component

CSS, ts and html files of Footer component

Let’s add global styles for our project to give some padding for the body. If you add any CSS to styles.css file that would apply across the app.

styles.css

Now load the page and make sure you see below page in the browser.

App with Header and Footer Components

Items Module

Let’s create all the components for Items Module with the following commands. With these commands, all the components are updated in items.module.ts file.

// generate the items Module

ng g m items // generate the display components --flat doesn't create folder

ng g c items/display/display-list --flat

ng g c items/display/display-card --flat // generate the add-item component

ng g c items/add-item

Creation of all components in the items Module

Once we created Items Module, the first thing we need to do is include this module in app.module.ts

Import ItemsModule and add that to imports array

Since we are using components from the ItemModule in the Home screen, export all the components from the Items module and include those in the app.component.html.

export components and use those in app.component.html

if we load the page at this moment, we can see this.

add-item and display list component work!

Implement Add-item Component

Let’s add the below code in the respective files and add FormsModule and ReactiveFormsModule to ItemsModule.

add-item component files

after adding add-item component

Implement display-list Component

For this, we need to implement the following

app.service.ts: to hold the data for the entire app and provide add items and delete items array. display-card component: this is a single row in the list of items. display-list component: this component has display-card component as a child component and it holds all the items added so far communication between components: we need to establish communication between across all the components

First, we need to add service to the app in which we hold the data. Let’s create service with the ng command and add the below content in the file. In this file, We maintain the array to hold the items and add and delete methods.

// generate the service

ng g s app

app.service.ts

display-card component

This is a single row in the list which has some inputs and outputs for this component.

Display card component

display-list component

This is a list component which displays all the added items and it has display-card component as a child component and it has a modal which is shown when clicking on the edit button of each item.

display-list component

communication between components

Ok, we created all the necessary components and we should establish communication between these components. Most of the communication happens with Input and Output elements in the Angular. Since we used all these components in app.component.html, Let’s update that.

added input and output for all the components

At this moment, we can actually add an item and see the list as we add items and delete items as well

Now we can add an item, edit and delete items

Error Handling

There is no error handling for the add-item form right now. For example, if we try to add an item without filling out the form it doesn’t display any error. Let’s implement the error.

Let’s add components with ng command and will add in the shared module and add these components in the exports array.

// generate error component

ng g c shared/error // generate error-message component

ng g c shared/error/error-message --flat

You can download all error components from here

Once you add the components we need to add these components in appropriate places like below

app.component.html and add-item.component.html

There are two places that we need to add error as shown below.

when you add an item without filling the form when you delete all the items

Error messages in two places

Conclusion

This is the starting point for your angular journey. Once you are comfortable with this then you can explore other features of angular like routing, NGRX store, etc.