Let's Develop an Angular Application - Basic Architecture of an Angular Application

Introduction

In this article, I am trying to give an idea about the angular basic architecture and installation steps.

This is an introductory article for my article series ‘Let’s develop an Angular application’.

Before entering into the angular world, let’s understand some basics of Angular.

As we all know, angular is a Javascript framework and is used to create single-page applications (SPA). This means that our application has a single page to display all information (Index.html). Once the page is loaded, Angular changes the content of the page dynamically. This way, the end-user will think that we have multiple pages. Angular is one of the most used front end technologies that help developers create awesome applications.

Angular applications have the following features:

Well-structured
Easy to maintain
Code reusability
Separation of concern
Responsive

Angular applications are built using TypeScript language.

TypeScript is the superset of JavaScript. So, TypeScript has all capabilities of JavaScript and some additional capabilities. TypeScript supports strong typing. Unlike JavaScript, we can specify the data types for our TypeScript variables. This will help us to provide more security to our application and help us to identify and eliminate errors early on when we are writing the code or debugging.

On compiling the TypeScript code, it will be converted to JavaScript. This process is called ‘Transpilation’.

The anatomy of the Angular application

An Angular application consists of components and services.

Please refer to the diagram below.

Services

The services are used to provide functionalities across components. The best way is to implement the business logic as services and keep the component class as light by using it to execute UI related logic.

This will not only helps us to keep our component class as light but also enable us to share the business logic with other components

Components

Each component has its own class file which contains the values and logic for the component. The CSS file is also associated with each component. The styles defined inside one component's CSS file will be applicable for that component only.

Modules

Angular modules keep our components together. This will help us to organize our application into cohesive blocks of functionality.

We can create any number of angular modules for application if required.

The important point is that all angular application should have at least one module – app module.

The app module is the default module provided by angular while creating the angular project.

Setting up the Environment

To set up the angular environment to develop an Angular application, we have to install 2 utilities.

Node.js
Angular CLI

First, we need to install Node.js

By installing the Node, npm(Node Package Manager) will be available for use.

Npm is the command-line utility that can interact with the repositories of open-source projects.

Npm can be used to install the libraries, packages, applications along with the dependencies.

The transpilation process is also the responsibility of npm.

To get Node.js, go to nodejs.org.

Next, we need to install the Angular CLI.

This is also a command-line utility, which is responsible for the creation of boilerplate files for setting up the angular application. Angular CLI can be used to create the project, generate application codes, perform the various development tasks such as testing, build, deployment, etc.

We can install the Angular CLI using the npm command.

For this:

Open terminal or console window
Execute the below npm command

npm install -g @angular/cli

We can check the angular version by executing the below command:

ng - -version

We will get the result as below:

Once the npm and Angular CLI have installed successfully, we can create the Angular project by executing the below command:

ng new our-project-name

This will take a couple of minutes to create the project.

Once the project is created, we can execute the project and see the result by executing the below command.

Note

Please change the current directory to the project folder using the cd command

ng serve --open

Need more read? , click >> Here

Conclusion

In this article, I have tried to give an introductory idea about an Angular application. Next, we should understand how does the angular application executes and launch the components, which I have explained in my next article.

To read my next article, click >> #2- Angular Bootstrapping Process

Happy Learning