Angular : A Front-end Development Framework

In this article, I’m going to cover general overview of widely used client-side framework which is Angular. This article is mainly focused on new developers and someone who know nothing about Angular framework.

Why to use framework?

Frameworks helps us to make applications in more structured way. The very basic principle of framework is, we don’t need to reinvent the wheel all the time. So, by using framework to develop an application we can save a lot of time as well as we can create sustainable and high quality code.

Every framework has their own structure to develop an application. Yes, at first you need to learn the basic structure of the framework that you want to use. But after learning that structure it will be very easy to develop any kind of application in that framework.

Before jumping on to Angular let me add some topics that I am going to cover in this article.

· Introduction to Angular

· AngularJs and Angular

· Why to choose Angular

· Pros and cons of Angular

Introduction to Angular

Angular is an application design framework and development platform for creating efficient and sophisticated single-page applications. It is developed and maintained by Google. With Angular you can make single-page applications by using the particular path provided by Angular framework.

What it means by Single Page Application?

Single page application means you won’t be directed to different page while clicking on any option, that page will open in the same page only. That means in single page application you are not moving in different pages, you are just going from one part of your application to another part.

Angular supports Typescript and Html to build applications. So, in order to learn this framework, you must have the knowledge of Html and typescript. But, if you know the basic JavaScript then it will be easy to learn Typescript. Don’t worry about that.

We know that Html is used for making structure of our website and Typescript is a scripting language which is developed and maintained by Microsoft. Whenever it runs into browser it first compiled into JavaScript by Typescript compiler (TSC). Google has launched multiple versions of angular till now. They launch new version of angular in almost every 5 months.

Angular.io is the official site of Angular. It is good to visit the site to know about initial terms of Angular.

AngularJs and Angular

May be you are here because probably you know there is a framework called Angular. And I am sure that you heard the name AngularJs. It may possible that you don’t know the difference between AngularJs and Angular. There are some people who don’t know about angular much and they often think that AngularJs and Angular are same. But they are not the same.

Google had launched their first framework in 2010 named AngularJs. That was based on JavaScript. They are continuously updating the version of AngularJs and naming it like (1.x.x).

After that they launched another framework in place of AngularJs and that was supported TypeScript in spite of JavaScript. They named it Angular2. After that they have continuously updated the versions of Angular almost in every 5 months and all the versions of Angular is based on TypeScript only.

Click here to know more about different version of Angular.

Why to choose Angular

There are lot many things that angular offers us. It supports different kinds of IDEs, tools and UI components.

· IDEs supported by Angular

IDE is a software environment used to write other programs using tools like an editor and compiler. IDEs are used for faster and effective development. The most famous useful IDE supported in angular is Visual Studio Code which is also called VS code. I always use Visual Studio Code for my projects.

Visual Studio Code is a free source-code editor made by Microsoft. It helps us to write a code very effectively and fast. The main feature of Visual Studio Code is IntelliSense which is [code completion] and debugging. Other features it provides are syntax highlighting, bracket-matching, auto-indentation, box-selection, snippets, and many more.

If you don’t want to use Visual Studio Code, then you can also use Sublime Text editor which is also popular in the market. If you want to see other IDEs that are supported by angular then you can go through that in official site of Angular. Click Here to see different IDEs that are supported by Angular.

· Tools supported by Angular

Angular provides some tools to make your application-making process as easier as possible. Here are some tools that is supported by Angular.

a) AngularCLI — to make new angular project and preview our application during development.

b) Angular Playground — to build and run Angular components in isolation.

c) Angular Universal — to generate static application pages

d) Augury — It is a most popular tool extension for debugging and profiling Angular applications inside the Google Chrome and Mozilla Firefox.

· UI component supported by Angular

By using UI Components, you can make your applications more attractive, consistent and functional. From UI component you can use the bundles of components in your project like Form Field, Input, Radio Button etc.

Here are some UI components supported by Angular.

a) Angular Material

b) Ng-bootstrap

c) Angular UI Toolkit

d) Angular-Slickgrid

Pros and cons of Angular

Pros :

a. Developed and maintained by Google

The very first advantage of using Angular is, it is developed and maintained by Google. So, we don’t need to worry about sudden expiration of this framework as it has a long term support from Google.

b. Higher Clarity

It keeps HTML and Typescript code separate. Angular have two separate files, one is for template code and another is for Typescript code. So, it increases the clarity in coding.

c. Error-free coding and Higher security

Typescript helps developers to write cleaner and error-free code. Typescript detect the error at the time of writing the code. So, we can correct it at the time of writing the code. And Typescript provides higher security as it is based on data type.

d. Higher usability, flexibility and maintainability

This framework is having higher usability because we can reuse the component as many time as we want by using service. It maintains the application by using Components.

e. Faster loading of application

The application loads faster as it uses ‘aot-ahead of time’ compiler. That means it compiles whole application in one time. So there is no chance to get stuck for our user.

f. Higher job demand

last but not the least, Angular has very high job demand.

Cons :

Every technology or tool has their own dis-advantages. Angular also has some.

a. High learning curve

The major reason why most of the developers do not want to use Angular is because of the learning curve. The learning curve of angular is high because of its complex structure.

b. Need to learn Typescript

As Angular is based on Typescript you need to learn Typescript in order to learn Angular. But, if you know basics of JavaScript then it will be very easy to learn Typescript parallel with Angular.