Introduction to Angular | What is Angular?

Angular is the new front-end framework and is the successor to the most popular AngularJs. Angular is open-source and helps us build dynamic & single-page applications (SPAs). In this article, we will give you a brief introduction to Angular.

What is Angular?

Angular is a development platform and framework for building single-page client applications using HTML and TypeScript. Angular is built using TypeScript

Angular has many improvements and innovations over its predecessor, AngularJS. It is easy to learn and develop enterprise-scale applications. You can build extendable, maintainable, testable, and standardized applications using Angular. 

Angular provides all the core functionality that you need to develop a client application. It comes bundled with a router module, an HTTP module, a forms API, etc. We can use it to build amazing client-side applications.

Angular is built with testing in mind. When you install Angular, it will also install the Jasmine testing framework. Hence, you can get started immediately.

Angular is an opinionated framework. It is a framework that follows a certain design pattern and forces you to follow it. This has its own benefits. Every Angular application will follow the same structure. As a result, if you switch to another project in another company as a developer, the Angular application will look similar.

Introduction to Angular

We have created a great tutorial on How to Install and get started with Angular. And find out how to Create your First Angular Application.

Features of Angular

Angular is loaded with Power-packed Features. Some of the features are listed below

Modular by design

Angular applications follow modular design concepts. The application comprises Angular modules, which are self-contained units of code. We can easily reuse them across the different parts of the application and better organize and manage our codebase.

Component-based structure

Angular components are the backbone of the Angular application. A component represents a piece of the UI. We compose complex UI elements by reusing the existing components.


Templates represent HTML. Angular enables us to use programming constructs like if conditions, loops, etc., to render and control how the HTML pages look. The component powers the templates.

Two-way data binding

Data binding is the most incredible feature of Angular. It is automatic and fast. Changes in the view or component reflect on the component class and vice versa instantly.

Dependency injection

Angular comes bundled with a dependency injection system, which promotes code reusability. It makes it easier to manage and inject dependencies. We can create Angular services and inject them into component classes.


Routing is another essential feature of Angular. It makes it easier to navigate between different views without reloading the page. The routing module helps us build single-page applications in Angular.

Angular Forms

The Angular Forms API provides rich tools for building complex forms. It includes built-in validation and support for reactive forms.

HTTP Module

The HTTP Module allows sending HTTP requests to the back-end server. It is very robust and can cover advanced client-server communication.


Angular has a built-in testing framework that makes writing and running tests for your application easy.

Active Community

Angular is supported by Google and has a very active community of supporters. It makes a lot of difference, as your queries are quickly resolved.

Key differences between AngularJs & Angular

Support for ES6

Angular is completely written in Typescript and meets the ECMAScript 6 specification. This means that it has support for ES6 Modules, Class frameworks, etc.

Components are new controllers

In AngularJS we had Controllers. AngularJs Controllers are replaced with Angular Components. The controllers and view in AngularJS are defined as follows

In Angular, we are using Components. The simple component is shown below written using Typescript.

In Angular, a component represents a UI element. You can have many such components on a single web page. Each component is independent of the other and manages a section of the page. The components can have child components and parent components.


AngularJS had a lot of directives. Some of the most used directives are ng-repeat & ng-if

Angular also has directives, but with a different syntax. It has a * before the directive name indicating it is a structural directive

The style directives like ng-style, ng-src & ng-href are all gone. These are now replaced by property binding of HTML elements to the class properties

The creation of Custom Directives is vastly simplified in angular as shown in the example below.

Data Bindings

The powerful angular data bindings stay the same,  with minor syntax changes.


Note that we used the controller alias VM to specify the controller instance in AngularJS. In Angular, the context is implied.

One way Binding
Event Binding

The AngularJS uses the ngClick directive to bind to the event. In Angular ngClick Directive is removed. You can bind directly to the DOM events

Two-way binding

$scopes are out

Angular is not using $scope anymore to glue the view and controller.

AngularJS used to run a dirty check on the scope objects to see if any changes occurred. Then it triggers the watchers. And then it used to re-running the dirty checking again.

Angular uses zone.js to detect changes. Zone.js apply patches on all the global asynchronous operations like click event, timer events, HTTP requests, etc. It then intimates the Angular, whenever the changes occur in the Angular Application. The Angular then runs the change detection for the entire application

Filters are renamed to Pipes

In AngularJS, we used Filters and as shown below

Angular uses the same syntax but names them pipes

Platform-specific Bootstrap

In AngularJS we used the ng-app directive in our HTML, then the Angular would bootstrap and attach itself the ng-app

Bootstrapping in Angular is done through code. The bootstrapping of Angular is not simple as that of AngularJS. The sample code below shows how the Angular application bootstraps the AppModule using platformBrowserDynamic Module

Bootstrap is also Platform-specific in Angular. You can have different bootstrappers for Mobile & Web applications.

You can read about Bootstrapping Angular Application


AngularJS had Services, Factories, Providers, Constants, and values, which were used to create reusable code. These are then injected into Controllers so that it can use it

The Angular all the above is merged into a Service class.

Mobile Support

AngularJS was not built with mobile support in mind. Angular is designed with mobile development in mind.


This article gives a brief Introduction of Angular to you. In the next tutorial, we will learn core concepts of Angular. Subsequently we will show you how to Install Angular and Create your first Angular Application.

1 thought on “Introduction to Angular | What is Angular?”

  1. Thanks for this great article! I definitely enjoyed every part of it. I’ll make sure to bookmark your site so that I can come back eventually.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top