Download - 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
Angular 2 vs. Angular 1: Key Differences cont ...
Change Detection
Angular 2 vs. Angular 1: Key Differences cont ...
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.
Angular 2 vs. Angular 1: Key Differences cont ...
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
Angular 2 vs. Angular 1: Key Differences cont ...
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?