Angular2

User Rating: 0 / 5

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Introduction

Angular2 is the leading JavaScript framework that allow us to easily create heavy client-side applications using HTML, CSS and JavaScript.

Often, it is used for developing Single Page Applications (SPA). What is Single Page Application (SPA)? Well, in a standard web application, when user clicks on a link the entire page is reloaded. In SPA, instead of reloading the entire page, only the view in the content area is replaced with another view which simply means application is constantly updating the DOM via Ajax and user will get the response without taking the entire page to server. It also helps in handling the States of the Page i.e. at the time of updating the particular content area, it will save the previous state of that content area in order to handle the data in efficient manner. One of the best example of SPA is Gmail.

Key Features

• Angular 2 is the successor of Angular 1. It is an upgrade to previous version of framework.

• Angular2 is built on modern JavaScript which uses ES6 and Typescript.

• It mainly focuses on speed and performance i.e. it is 3 to 5 times faster than Angular1.

• Compatible with mobiles devices and also supports cross platforms like Linux, Windows and Mac

Why Angular2?

1. Angular2 makes HTML more expressive by using “if- condition”, “for-loop” and local variables.

2. It has a powerful data binding methodology.

3. Supports modularity by design which simply means Angular2 applications are very modular with lots of modules that hold different part of our application.

4. It has a powerful built-in support for communication with back-end services. This makes it easy for web-application to integrate with back-end service to execute server side business logic.

5. Angular2 is built for speed which means it has faster loading of web pages, faster change detection and improved rendering time.

 

How Angular2 is different from Angular1?

1. In Angular2, everything revolves around components.

2. Components is similar to custom directives in Angular1. They allow the user to create functionality around custom tags. Therefore, instead of adding “ng-app” directive to a section of code, users can simply invent their own tags and then program their functionality for these tags. 

3. Components are much simpler to create than Angular1 custom directive

4. Since most of the things are handled by components, there is no more need of “controllers” like in Angular1

5. In Angular2, there is no “scope” concept and that is big adjustment since scope is how a user can handle communication between templates and controllers. 

6. In Angular2, the templating system is also richer which means it is now more complex and powerful.

7. It is very easy to setup Angular1 as it requires few library references to be imported but with Angular2, developer needs to setup a development environment first before starting, as Angular2 has dependency on other libraries like node.js, gulp.js, npm, system.js etc.

8. In Angular2, syntax for structural directives has changed. In Angular1, “ng-repeat” is used to iterate through elements but in Angular2, instead of ng-repeat *ngFor is used. Note that Asterisk (*) is prefixed with structural directives.

9. Developers can define local variables in Angular2 by prefix hash (#) with variable name. 

10. Angular2 follows camel Case syntax for their inbuilt directives like ng-model and ng-class which are replaced by ngModel and ngClass. In order to handle 2-way data binding in Angular2, [(ngModel)] is used instead of ng-model as in Angular1. 

11. Angular2 directly uses the properties and events of DOM elements hence event-directives in Angular1 like “ng-click” are no longer used. Instead, Angular2 wraps the HTML events with parentheses ()

12. Angular2 uses [property] which is a property of HTML DOM element, for 1-way data binding instead of Angular1 ng-bind.

 

Tags: angular2, angularjs