Building Single Page Application Using Angular 11 — FrontEnd

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

Series Links

Building an ASP.NET Core WebAPI using Clean Architecture

Building an Angular 11 Application integrated with WebAPI

Overview

Setting up Angular 11 for Local Development

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

Creating an Angular App

ng new myapp

Run the App

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 ngbootstrap 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

Project code is available on Github

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:

Creating Components

  • 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

Services

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

Interceptors

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.

Read More about HttpClient in Angular documentation.

Global Error Handler

AuthGuard

Running the Application in Visual Studio Code

Angular Application and WebAPI are running in URL's below

WebAPI: http://localhost:5001

AngularWeb: http://localhost:5003

Test User to Login

  • Username: system
  • Password: admin@123

Conclusion

Architect and Full Stack Developer in Dotnet Core, C#, WebApi’s, Integrations and Learner on Angular and React FrontEnd

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store