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’.
 
img-transpilation process
 

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


Similar Articles