Building Single Page Application Using Angular 11 — FrontEnd
Tags: angular
Published: 2020-11-23 07:23:57

In this post, we will focus on building the Angular frontend integrating with WebApi

**Overview**

Building Angular Single Page Application integrating with backend ASP.NET WebAPI.

**Setting up Angular 11 for Local Development**

To install angular the following pre-requisites installations is required
- NodeJs active LTS
- NPM package Manager
**Installing the Angular CLI**
> The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.

`npm install -g @angular/cli`

Verify the version of angular using the below command
`ng — version`
Angular Version installed in my local development environment
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x584r5qzgtdgd5ie82m6.png)

**Creating an Angular App**

Run the CLI command ng and provide the name of the app as shown below
`ng new myapp`

**Run the App**

To run the application navigate to the app folder created and run the below command
`cd myapp
npm install
ng serve — open`

The `ng serve` command launches the server watches your files and rebuilds the app as you make changes to those files.

In this application, we are going to use the ng bootstrap CSS. To install run the below command in the terminal

`npm install — save @ng-bootstrap/ng-bootstrap`

**Angular App Structure**

Using visual studio code editor for building the application. Below is the application structure
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ricudwkpz7ptixoqglh.png)

Project code is available on Github
{% github https://github.com/sunilkumarmedium/CleanArchitectureApp 
 %}

Creating project folders
Inside the “app” folder, let’s create the folders “_models”, “_components”, “_shared” “_services”.
In the “_models” folder we will place our entities, like User:

{% gist https://gist.github.com/sunilkumarmedium/7b2e421c285eb2abeab23d90b6a78dcf %}


**Creating Components**

Components are the main building block for Angular applications. Each component consists of:
- An HTML template that declares what renders on the page
- A Typescript class that defines the behavior
- A CSS selector that defines how the component is used in a template Optionally, CSS styles applied to the template

Sample Login Component
{% gist https://gist.github.com/sunilkumarmedium/d026233a2ec9b8e5a60a410379f56a4a %}

{% gist https://gist.github.com/sunilkumarmedium/84e1d6ae40ce0399694d5710cba66b19 %}


**Services**
Services can be used to have business logic in one place and can be injected into components when required.

**Dependency Injection in Angular**

> Dependency injection (DI), is an important application design pattern. Angular has its own DI framework, which is typically used in the design of Angular applications to increase their efficiency and modularity.

To create a service, run the below command in the terminal window
`ng generate service _services/authentication`

Below is the sample Service
{% gist https://gist.github.com/sunilkumarmedium/02dd5e872cd6ed055d6a95350d58746d %}

**Interceptors**

Intercepting requests and responses, With interception, you declare interceptors that inspect and transform HTTP requests from your application to a server. The same interceptors can also inspect and transform a server’s responses on their way back to the application. Multiple interceptors form a forward-and-backward chain of request/response handlers.

In our application, We have created JwtInteceptor to add the JWT token to every request that hits to web API. Below is the code implementation.
{% gist https://gist.github.com/sunilkumarmedium/35ab325fd0ed4a770fc600ab92f1c509 %}

**Global Error Handler**

Handling exceptions in common service that implements ErrorHandler.
{% gist https://gist.github.com/sunilkumarmedium/f0aa6b2a6ed52e63f00de9ffbd540f74 %}

**AuthGuard**

AuthGuard can be used to restrict the user from viewing unauthorized pages or Components. Below is the AuthGuard Implementation.
{% gist https://gist.github.com/sunilkumarmedium/b570cbf414abac97b41180e7c803a48d %}

**Running the Application in Visual Studio Code**
Open the project folder in the visual studio code and click on the run tab and select the projects to run as shown in the below screenshot
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r3sivv2r4aqz9pmov9s3.png)

Angular Application and WebAPI are running in URL's below
- WebAPI: http://localhost:5001
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qazrl8py9i8shhqixa3n.png)
- AngularWeb: http://localhost:5003
Test User to Login
- Username: system
- Password: admin@123
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6qw9chzahezk63g5823s.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tsucgoo5saaoqv1up2a4.png)

**Conclusion**
Hope you enjoyed the post and please feel free to play around with code

Happy Coding!

**Series Links**
**Building an ASP.NET Core WebAPI using Clean Architecture**
{% medium https://sunil-kumar-60226.medium.com/building-clean-architecture-application-using-asp-net-core-web-api-and-angular-11-backend-81b57c315dfa %}
**Building an Angular 11 Application integrated with WebAPI**
{% medium https://sunil-kumar-60226.medium.com/building-single-page-application-using-angular-11-frontend-7170ae9f8aec %}