Introduction to Angular

Angular 2 is now known as Angular is the new front end framework and is the successor to the most popular AngularJs. The Angular is an 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 UI framework for building mobile and desktop web applications. It is built using JavaScript. You can use it to build amazing client-side applications using HTML, CSS, and JavaScript.

Angular has many improvements over AngularJS. It has lots of innovations, which makes it easy to learn and develop enterprise-scale applications. You can build extendable, Maintainable, Testable and Standardized Applications using Angular.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Getting Started with 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

  • Two-Way Data Binding
    This is the coolest feature of the Angular. Data binding is automatic and fast. changes made in the View is automatically updated in the component class and vice versa
  • Powerful Routing Support
    The Angular Powerful routing engine loads the page asynchronously on the same page enabling us to create a Single Page Applications.
  • Expressive HTML
    Angular enables us to use programming constructs like if conditions, for loops, etc to render and control how the HTML pages.
  • Modular by Design
    Angular follows the modular design. You can create Angular modules to better organize and manage our codebase
  • Built-in Back End Support
    Angular has built-in support to communicate with the back-end servers and execute any business logic or retrieve data
  • Active Community
    Angular is Supported by google and has a very good active community of supporters. This makes a lot of difference as your queries are quickly resolved.

Angular has changed massively from the AngularJS. Angular completely redesigned from scratch. There are many concepts of angularJS that have changed in Angular.

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.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Components are new controllers

In AngularJS we had Controllers. In Angular Controllers are replaced with Angular Components. The controllers and view in AngularJS is 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 each other and manages a section of the page. The components can have child components and parent components.

Directives

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

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

The style directives like ng-style, ng-src & ng-href are all gone. These are now replaced by property binding 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.

Interpolation

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

One way Binding

The Angular can bind to any property of the HTML element.

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 view and controller.

AngularJS used to run a dirty checking 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.

The Angular is using 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 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 as 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

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

The Bootstrap is also Platform-specific in Angular. You can have different bootstrapper for mobile & Web application.

You can read about Bootstrapping Angular Application

Services

The AngularJS had Services, Factories, Providers, Constants and values, which 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 designed with mobile development in mind.

Conclusion

The Angular is changed drastically from AngularJS in many aspects and it has become a lot easier and faster. The list above is a brief list and not a complete one. In the next tutorial, we will find out things you should have & know before beginning the building application with Angular. You can then move to read how to Create your First Angular Application

Leave a Comment

Your email address will not be published.

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

Scroll to Top