{"id":12308,"date":"2016-11-07T12:43:00","date_gmt":"2016-11-07T12:43:00","guid":{"rendered":"https:\/\/viewmyprojects.com\/winwirewp\/?p=12308"},"modified":"2025-01-29T11:01:18","modified_gmt":"2025-01-29T11:01:18","slug":"angular-js-2-0-2","status":"publish","type":"post","link":"https:\/\/viewmyprojects.com\/winwirewp\/blog\/angular-js-2-0-2\/","title":{"rendered":"What\u2019s new in Angular JS 2.0?"},"content":{"rendered":"\n

In our previous blog on \u2018Angular JS 2.0 \u2013 The New Wave of Application Development<\/a>\u2019, we provided you with a brief overview of Angular JS 2.0 and why should you be upgrading to Angular JS 2.0.<\/em> Moving further, in this blog we are highlighting what is new in Angular JS 2.0, which makes Angular JS 2.0 so popular.<\/em><\/p>\n\n\n\n

What\u2019s new in Angular JS 2.x?<\/strong><\/p>\n\n\n\n

AngularJS has become one of the most popular open source JavaScript frameworks in the world of web application development.<\/p>\n\n\n\n

Angular 2.0 is five times faster as compared to Angular 1.x. Angular 2.0 written entirely in Typescript and meets the ES6 specification. And it\u2019s not an update for Angular 1.x. As it\u2019s rewritten and includes breaking changes. So the best way to learn is to compare with Angular 1.x and find out what\u2019s new in Angular 2.0<\/p>\n\n\n\n

Angular 2.x is mobile oriented & better in performance<\/strong><\/p>\n\n\n\n

Angular 1.x was not built with mobile support, whereas Angular 2.0 is mobile oriented.
Angular 2.0 is using Hierarchical Dependency Injection system which is major performance booster.
Angular 2.0 implements unidirectional tree based change detection which again increases performance
@component ({
selector: \u201ctextbox\u201d
templateUrl: \u201ctextbox.html\u201d
});<\/p>\n\n\n\n

<switch>
<input type=\u201dtextbox\u201d><\/p>\n\n\n\n

Angular 2.0 provides more choice for languages
<\/strong>
Angular 2.0 provides more choice for languages. You can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2.0 code. Where, Angular 1.x has ES5, ES6, and Dart.<\/p>\n\n\n\n

Angular 2.0 implements web standards like components<\/strong><\/p>\n\n\n\n

Angular 1.x controllers and $scope are no more. We can say that controllers are replaced with Components in Angular 2.0.
Angular 1.x Controller
var myApp = angular
.module(\u201cmyModule\u201d, [])
.controller(\u201cdataController\u201d, function($scope) {
var prods = { name: \u201cData1\u201d, quantity: 1 };
$scope.products = prods;
});<\/p>\n\n\n\n

Angular 2.0 Components using TypeScript<\/strong><\/p>\n\n\n\n

import { Component } from \u2018angular2\/core\u2019;
@Component({
selector: \u2018prodsdata\u2019,
template: `
<h3>{{prods.name}}<\/h3> `
})
export class ProductComponent {
prods = { name: \u2018Prod1\u2019, quantity: 1 };
}<\/p>\n\n\n\n

Different ways to define local variables<\/strong><\/p>\n\n\n\n

In Angular 2.0, local variables are defined using Hash(#) prefix
<div *ngFor=\u201d#technicalSkill of technicalSkills\u201d><\/p>\n\n\n\n

Structural directives syntax is changed<\/strong><\/p>\n\n\n\n

In Angular 2.0, Structural directives syntax is changed. ng-repeat is replaced with *ngFor.<\/p>\n\n\n\n

Angular 2.0 uses camelCase syntax for built-in directives
<\/strong>
Angular 2.0 uses camelCase syntax for built-in directives.
For example, ng-class is now ngClass and ng-model is now ngModel.<\/p>\n\n\n\n

Angular 2.0 directly uses the valid HTML DOM element properties and events.
One of the major change in Angular 2.0 is that it directly uses the valid HTML DOM element properties and events.
Due to this, many of the available built-in directives in Angular 1.x are now no longer required.<\/p>\n\n\n\n

Like ng-href, ng-src, ng-show and ng-hide. Angular 2.0 uses href, src and hidden properties to get the same output. And same goes with event based directives like ng-click and ng-blur.
<button ng-click=\u201dclickMe()\u201d>
And in Angular 2.0, take the HTML event and wrap it with parentheses.
<button (click)=\u201dclickMe()\u201d><\/p>\n\n\n\n

One-way data binding directive replaced with [property]<\/strong><\/p>\n\n\n\n

In Angular 1.x, ng-bind is used for one-way data binding, but with Angular 2.0 it is replaced with [property], where \u2018property\u2019 is valid HTML DOM element property.
Angular 1.x, one-way data binding
<input ng-bind=\u201dtechnology.skill\u201d><\/input><\/p>\n\n\n\n

Angular 2.0, one-way data binding is achieved via wrapping the properties with square brackets.
<button (click)=\u201dclickMe()\u201d><\/p>\n\n\n\n

Two-way data binding: ng-model replaced with [(ngModel)]
<\/strong>
In Angular 1.x, ng-model is used for two-way data binding, but with Angular 2.0 it is replaced with [(ngModel)].
Angular 1.x, two-way data binding,
<input ng-model=\u201dtechnology.skill\u201d><\/input>
In Angular 2.0,
<input [(ngModel)]=\u201dtechnology.skill\u201d><\/input><\/p>\n\n\n\n

Way of Bootstrapping Angular Application is changed
<\/strong>
Angular 1.x has 2 ways to bootstrap angular. One using ng-app attribute and other via code.
In Angular 2.0, say goodbye to ng-app. The only way to bootstrap angular is via code<\/p>\n\n\n\n

Ways of Dependency Injection is Changed- syntax changed
<\/strong>
One of the advantages of Angular is Dependency Injection. With Angular 2.0 Dependency Injection is there but now there is a different way to inject dependencies. As everything is \u2018class\u2019 in Angular, so Dependency Injection is achieving via constructors.<\/p>\n\n\n\n

Way of routing is Changed- syntax changed
<\/strong>
In Angular 1.x, we use $routeProvider.when() to configuring routing. Where in Angular 2.0, @RouteConfig{(\u2026}) is used. ng-view present in Angular 1.x is replaced with <router-outlet><\/p>\n\n\n\n

In a nutshell, Angular JS 2.0 is a big step forward. And it certainly requires some efforts to migrate from Angular JS 1.x to Angular JS 2.0. But it is in the right direction. Things are looking better and more in line with HTML. Angular JS 1.x is fine and here to stay but Angular JS 2.0 is better. Angular 1.x was not built with mobile support in mind; however, Angular JS 2.0 is designed to be exceptional and ready for anything coming its way that is mobile oriented.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

In our previous blog on \u2018Angular JS 2.0 \u2013 The New Wave of Application Development\u2019, we provided you with a brief overview of Angular JS 2.0 and why should you be upgrading to Angular JS 2.0. Moving further, in this blog we are highlighting what is new in Angular JS 2.0, which makes Angular JS 2.0… Continue reading What\u2019s new in Angular JS 2.0?<\/span><\/a><\/p>\n","protected":false},"author":74,"featured_media":16653,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-12308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","entry"],"acf":[],"featured_image_src":"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic.webp","author_info":{"display_name":"Manik","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/manik\/"},"views":3634,"uagb_featured_image_src":{"full":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic.webp",800,440,false],"thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic-150x150.webp",150,150,true],"medium":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic-300x165.webp",300,165,true],"medium_large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic-768x422.webp",750,412,true],"large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic.webp",750,413,false],"1536x1536":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic.webp",800,440,false],"2048x2048":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic.webp",800,440,false],"post-thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Whats-new-in-Angular-JS-2-graphic.webp",800,440,false]},"uagb_author_info":{"display_name":"Manik","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/manik\/"},"uagb_comment_info":0,"uagb_excerpt":"In our previous blog on \u2018Angular JS 2.0 \u2013 The New Wave of Application Development\u2019, we provided you with a brief overview of Angular JS 2.0 and why should you be upgrading to Angular JS 2.0. Moving further, in this blog we are highlighting what is new in Angular JS 2.0, which makes Angular JS 2.0……","_links":{"self":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/comments?post=12308"}],"version-history":[{"count":2,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12308\/revisions"}],"predecessor-version":[{"id":22612,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12308\/revisions\/22612"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media\/16653"}],"wp:attachment":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media?parent=12308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/categories?post=12308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/tags?post=12308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}