Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular2

1,441 views

Published on

Slides of SMG Internal Presentations

Published in: Technology
  • Be the first to comment

Angular2

  1. 1. 19.08.2016 Yusuf Koraman - Software Architecture ANGULAR2
  2. 2. Content  Angular2  What?, When ? Why?  Concept.  Difference between AngularJs & Angular2  Angular2 Change Detections  Break Time (10 min)  Demo (Task Manager)  Upgrading From Angular 1.x  Angular2 Performance Benchmark  QUESTIONS?
  3. 3. Angular2 What? Why? When? • It is written entirely in Typescript. • Not an update for Angular 1.x. • Announced @ March 2014 • Simpler than Angular 1 and has far fewer concepts, making it easier to understand • Angular2 is designed from the ground-up for mobile and optimized for memory efficiency and less CPU cycles. • Angular2 is a «design pattern». • Not Released Yet. @BETA
  4. 4. Mobile Support IONIC2 - @Beta NativeScript with Angular2
  5. 5. Concepts
  6. 6. Concepts - Components
  7. 7. Component - Lifecycle
  8. 8. Concepts – DI
  9. 9. Differences between AngularJs & Angular2 • Angular 1.x was not built with mobile support, Angular2 is mobile oriented. • Angular 1.x is easy to setup. Angular2 is dependent of other libraries • Angular 1.x’s controllers and $scope are gone
  10. 10. Differences between AngularJs & Angular2
  11. 11. Differences between AngularJs & Angular2 • Say goodbye to ng-app. The only way to bootstrap angular is via code.
  12. 12. Differences between AngularJs & Angular2
  13. 13. Differences between AngularJs & Angular2 • ng-repeat is replaced with *ngFor. • Angular2 uses camelCase syntax – Ex: ng-class  ngClass – ng-mode  ngModel. • Angular2 directly uses the valid HTML DOM element properties and events (major change)
  14. 14. Differences between AngularJs & Angular2 In Angular 1.x, ng-model is used for two way data binding, but with Angular2 it is replaced with [(ngModel)].
  15. 15. Differences between AngularJs & Angular2 • In Angular 1.x, we can define a services via different ways.(Factory,Service,etc.) • In Angular 2, class is the only way to define a service. • Routing • ng-href => [routerLink] • Performance
  16. 16. Angular2 Change Detections
  17. 17. Angular2 Change Detections
  18. 18. Angular2 Change Detections • Basically application state change can be caused by three things • Events - click, submit, … • XHR - Fetching data from a remote server • Timers - setTimeout(), setInterval() • They are all asynchronous.
  19. 19. Angular2 Change Detections
  20. 20. Angular2 Change Detections • Who notifies Angular? * Zones * Each component has its own change detector
  21. 21. Angular2 Change Detections
  22. 22. Angular2 Change Detections
  23. 23. Angular2 Change Detections Immutable Objects • We’ll always get a new reference with that change, as the original object is immutable.
  24. 24. Angular2 Change Detections
  25. 25. Angular2 Change Detections Observables • They don’t give us new references when a change is made. Instead, they fire events we can subscribe to in order to react to them.
  26. 26. Angular2 Change Detections What’s the problem?
  27. 27. Angular2 Change Detections
  28. 28. Angular2 Change Detections
  29. 29. Angular2 Change Detections
  30. 30. Break Time – 10 min.
  31. 31. DEMO (Task Manager)
  32. 32. Upgrading From Angular 1.x • Creating a new Angular2 project. • Upgrading with The Upgrade Adapter • https://angular.io/docs/ts/latest/guide/upgra de.html
  33. 33. Angular 2 Performance Benchmark http://stefankrause.net/js-frameworks-benchmark/
  34. 34. Questions

×