A Beginner’s Guide to Angular Architecture for Front-End Development

We have gone through many web applications and mobile applications which do not reload the entire page but instead reloads only the required section. These are nothing but Single Page Applications (SPA) which are developed using Angular. A good example of SPA is Gmail where we have noticed that when we click on the inbox, it only reloads and displays that email in the e-mail list sections.

Introduction to Angular:

Angular is a TypeScript-base open-source front-end platform and framework led by the Angular Team at Google used for building client-side web applications. Angular itself is written in TypeScript, which is a superset of JavaScript and used for front end development.

Installation:

In order to start with the installation, we first need to make sure that we have nodejs and npm installed with the latest version.

We can install nodejs on Ubuntu OS by running the following command on terminal:

• sudo apt-get update
• sudo apt-get install nodejs

To install npm, we run the following one-line command on terminal:

• sudo apt-get install npm

To check the versions of Node.js and npm installed, we run following command:

• nodejs –v
• npm –v

Let’s install Angular CLI by running the following command:

• npm install –g @angular/cli

IDEs for Angular:

We can use any of the IDE i.e., WebStorm, Atom, Visual Studio Code, etc. But usually, Visual Studio Code is preferred.

Architectural Blocks of Angular:

The main building blocks of an Angular application are:

• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

In this blog, we will have an overview of Angular Modules and Angular Components.

Angular Modules:

We have Angular modules or we can say NgModules which maintains the modularity of Angular apps. Every Angular app has at least one module as the root module. Conventionally, it is named as AppModule. Typically, an app contains many functional modules. In angular, any module is a class with the @NgModule decorator.

The NgModule decorator is a function that takes metadata object whose properties describe the module. The properties are as follows:

• declarations: Here, we have to declare the classes that are related to views (i.e. The components, the directives, and the pipes that belong to this NgModule).
• exports: Here, we have to mention the classes that should be accessible to the components of other modules.
• imports: Here, we have to mention the modules whose classes are needed by the component of this NgModule.
• providers: Here, we have to mention the Services present in one of the modules which are to be used in the other modules or components. Once a service is included in the providers it becomes accessible in all parts of that application
• bootstrap: Here, we have to mention the root component which is the main view of the application. This root NgModule only has this property and it indicates the component that is to be bootstrapped.

The root module (i.e. src/app/app.module.ts) by default looks like:

Image: The Root Module in Angular

Angular Components

Every Angular application has a root component i.e. AppComponent which is bootstrapped inside the main module. In angular, each component defines a class with the application data and logic and is associated with a view i.e. HTML template to be displayed in a target environment.

The root component (i.e. src/app/app.component.ts) by default looks like:

Image: The Root Component in Angular

Advantages of Angular:

• Angular is faster, lighter and easier framework which is built to create faster performance applications that are smaller in size and easier to develop.
• It provides high performance, offline, and zero-step installation. So, Angular is pretty much easy to work with.
• Angular is universal that means we can use any technology with it for serving the application like node.js, .NET, PHP, Ruby on Rails and other servers.
• Angular is productive as:
• It generates UI templates quickly with simple and powerful template syntax.
• Angular CLI with Command line tools.

Apart from front end development we use Ruby on Rails framework for back-end development. Hope this blog would be informative to understand the basic building blocks of Angular.