angular 2.0

Angular 2.0Presented By:

Nitin Giri

Angular 1.X

Fixed MVW architecture

Modules

Scope

Routing

Controllers

Directives

Two way Data Binding

Issues with Angular 1.X

No support For Mobile

Watchers

Dirty Checking

No server side Support

No support for AMD

Tricky SEO

Why use Angular 2?

Simpler - but more powerful

Dynamic module loading

Server side pre rendering

New Dependency Injection

View encapsulation

Why use Angular 2 cont ...

Mobile first

Better performance

“Angular 2 is 5 times faster than Angular 1”

No Dirty Checking (Ultra fast

change detection)

New routing

Angular + Standards = ng 2

Angular 1 has-

Services

Directives

Controllers

Directive Definition Object

Angular 2 has-

Components

Angular 2 vs. Angular 1: Key Differences

Component-based

controllers and $scope no longer usedangular 2 have annotations - addsmetadata to a class

Angular 2 vs. Angular 1: Key Differences cont ...

Directive

RIP DDO

no global registryinputs (annotations) instead ofisolated scope


Change Detection


Dependency Injection

Problems in Angular 1.X

Namespace collision

Different API’s for factories, services, constants, values and providers.

The new Dependency Injection framework used in Angular 2 solves all the problems faced in Angular 1.


View Encapsulation

* Shadow DOM - part of the Web Components standard and enables html and style encapsulation

template associated with a component has a shadow DOM

emulates shadow DOM in case browser does not support it

no collision in cases where other components have same style


Routing

Component based routing

RouteConfig section ties

component to a specific url

Browser support& Size

Browser support

IE9+ and latest versions of chrome, firefox and safari

android 4.1+ and iOS 7.1+

Size

116 Kb expected to drop before the final release as compared to 54 Kb for Angular 1.4

Migration from Angular 1.X

Big Bang - Start a spike in Angular 2 and replace entire app once done

Incremental - Upgrade existing app once service or component at a time

(using module ngUpgrade)

use the new router (available

for Angular 1.4)

Thank you :)

Questions?

angular 2.0

Technology