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.

AngularJS 2.0 Jumpstart

1,610 views

Published on

Jumpstart about the upcoming version of the most important JavaScript framework

Published in: Software
  • Be the first to comment

AngularJS 2.0 Jumpstart

  1. 1. ANGULARJS 2.0 JUMPSTART
  2. 2. About me Filipe Falcão Computer Science, JavaScript, Python +FilipeFalcaoBatista @FilipeFalcaoS
  3. 3. Topics 1. Motivation 2. Old vs new concepts
  4. 4. Motivation 1. Performance “Today,Angular 2 is 5 times faster than Angular 1” –Misko Hevery
  5. 5. Motivation 2.Web standards Shadow DOM replaces transclusion ES6 Modules replaces Angular ones
  6. 6. Old vs new concepts 1. Components 2.AtScript and ES6 3. Bootstraping 4. Syntax changes and uniformity 5. Change detection
  7. 7. Before we get started… AngularJS 2.0 is currently in Alpha Preview, so things might/can/ definitely will change
  8. 8. Components @Component ({ selector: 'my-component' }) @View ({ inline: '<div>Hi from Angular 2</div>' }) export class MyComponent { constructor () { this.name = 'Filipe' } sayMyName () { console.log(‘'My name is ‘ + this.name) } }
  9. 9. AtScript Syntax sugar on top of ES6 for meta-data annotations @Component ({ selector: 'my-component' }) @View ({ inline: '<div>Hi from Angular 2</div>' })
  10. 10. ES6 Represents the “controller" export class MyComponent { constructor () { this.name = 'Filipe' } sayMyName () { console.log(‘'My name is ‘ + this.name) } }
  11. 11. Bootstraping in 1.x 1. Create module 2. Declare ng-app 3. Create controller 4. Manage $scope 5. Declare ng-controller 6. Create template
  12. 12. Bootstraping in 2.0 1. Create component 2. Create template 3. Bootstrap 4.Transpilation import bootstrap from 'angular2' bootstrap(MyComponent)
  13. 13. Syntax changes 1. Local variables <input #name type=“text”> {{ name.value }}
  14. 14. Syntax changes 2. Event handlers <input #name type=“text”> <button (click)=“addName($event, name.value)”>Add</button> <button (dbclick)=“editName($event, name.value)”>Edit</button>
  15. 15. Syntax changes 3. Property bindings <input #name type=“text”> <span [textContent]=“name.value”></span>
  16. 16. Syntax uniformity 1. (event) - for HTML DOM events 2. [property] - for HTML properties
  17. 17. Change detection 1.Tree of components 2. Reactive system 3. Directed tree 4. Detection system walks the whole tree 5. Immutable/Observable objects - O(n) to O(log n) 6. Zone.js
  18. 18. More resources 2. ng-conf and ng-vegas 1. angular.io 3. learnangular2.com 4. 2do app by David East
  19. 19. THANKS! Any questions? You can find me at: +FilipeFalcaoBatista @FilipeFalcaoS

×