Overview Of Angular - Part One

Introduction

In this article, we are going to discuss an overview of Angular. This article is for those beginners who are planning to learn and implement Angular. Are you an Angular Expert?

Then please feel free to provide your suggestions to improve the content. In the first part, we will see what  Angular is, why you should place so much importance on it, and what other things it contains to build a wonderful web application.

Let's get started!

What is Angular?

Angular is a client side framework which helps to build client side (web) applications using HTML, JavaScript or TypeScript. In other words, we can say that Angular is a binding framework which sits between the HTML UI & JavaScript objects to bind the HTML Views and JavaScript objects. When the user makes a request in HTML UI, the binder(Angular) binds the user input with JavaScript object. When any changes are made in the JavaScript object, the binder (Angular) updates the changes with the HTML UI.

Figure 1.0 About Angular

This framework consists of several libraries which help Angular to launch web application content in a browser and respond to user input. Module and Component are the essential elements for building an Angular application. Let's have a quick look at these topics...

Angular Essentials

Module

The module is a mechanism to group components to form an application. In other words, Module is a group of components and services that can be combined with other modules to create an application. For Example, look at the below website; you can see that I have highlighted 3 areas which are none other than the modules.These modules are combined together to create an application. Each module, Sales, Visitor or Projects can have one or two components. How many components are under each module? And what are all those components? Let's discuss this in the next section.


Figure 1.1 Modules in Website

Modules are built using many components. So create as many as components as you need and declare it inside the Module. There are two types of modules in Angular, root modules and feature modules.Angular needs to know which one is root module and which one is a feature module. I am not going to detail it here, probably in my next article I will provide you with a source code example.

Component

The component is a class which works with a view of the application and logic on the page. The component has the required information of how to render itself and fetches the required data from services. So Component mainly works with UI or views to render the page. Components are typically grouped under a module. As we do in C#, Java we can also trigger a property which returns an array of objects that it requires from the service. Basically, a component is something which is visible to the end user and which can be reused many times within the web application. Look at the below Website, a visitor module has 2 components named UserActivity & Returned users. Component 1 is mainly responsible for displaying the UserActivity(Component 1) UI content, whereas Component 2 is responsible for displaying the ReturnedUsers(Component 2) UI content. Likewise you can check the modules like Sales, Projects also have their own components SalesListWise, SalesMapWise and ProjectsListWise. If you want to utilize the components in other modules, you can reuse it.


Figure 1.2 Modules & Components in Website

A Component consists of the following

• Template
• Metadata

Let’s discuss this in detail in the next section.

Template

The template is none other than an HTML form content which tells Angular how to render the component. I have already mentioned that Component is something that works with UI/view. The component deals with UI by using a template which helps angular to render the page. The template also includes binding and directives.

Metadata

Metadata - Data about data.

Metadata is a decorator which provides extra information about the class to Angular. What is that information? What will Angular do with that information?

Let’s have a look on this source-code.


Figure 1.3 Component Declaration

@Component is a decorator which is used to create the EmployeeComponent and its view. Selector tells angular to create an instance of EmployeeComponent and inserts the instance of the component into the <Employee-ui> tag in parent HTML. If the application contains <Employee-ui></Employee-ui> tag anywhere, Angular inserts the instance of the EmployeeComponent between those tags. TemplateURL or template tells Angular how to display the component. In other words, templateUrl contains the address of the component's HTML template. It is important to add metadata ( @Component ) in your source-code, otherwise angular will treat it as a class, not as a component. @Component metadata tells angular that EmployeeComponent is a Component.

Summary

Modules, Components, Metadata, Directives, Template, Databinding, DependencyInjection and Services are the building blocks of an Angular application.

• Module - It's a mechanism of a group of components to build an Angular application.
• Component - It mainly deals with UI / web page of an application. Component contains selector to create the component and load it in a web page. 
• Metadata - It's a way to process the class.