Angular 2.0 is a major upgrade from Angular 1.X that introduces components instead of controllers, improves performance with more efficient change detection and dependency injection, and adds support for mobile, server-side rendering and standards-based web components. Some key differences between Angular 1 and 2 include a shift to a component-based architecture, removal of scopes and watches, updated directives and dependency injection, and new routing and view encapsulation features. The migration path involves either rewriting the entire application using Angular 2 or upgrading services and components incrementally.

1. Angular 2.0
Presented By:
Nitin Giri

2. Angular 1.X
Fixed MVW architecture
Modules
Scope
Routing
Controllers

3. Issues with Angular 1.X
No support For Mobile
Watchers
Dirty Checking
No server side Support
No support for AMD

4. Why use Angular 2?
Simpler - but more powerful
Dynamic module loading
Server side pre rendering
New Dependency Injection
View encapsulation

5. 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

6. Angular + Standards = ng 2
Angular 1 has-
Services
Directives
Controllers
Directive Definition Object
Angular 2 has-
Components

7. Angular 2 vs. Angular 1: Key Differences
Component-based
controllers and $scope no longer used
angular 2 have annotations - adds
metadata to a class

8. Angular 2 vs. Angular 1: Key Differences cont ...
Directive
RIP DDO
no global registry
inputs (annotations) instead of
isolated scope

9. Angular 2 vs. Angular 1: Key Differences cont ...
Change Detection

10. 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.

11. 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

12. Angular 2 vs. Angular 1: Key Differences cont ...
Routing
Component based routing
RouteConfig section ties
component to a specific url

13. 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

14. 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)

15. Thank you :)
Questions?