AngularJS 2.0 Jumpstart
4 likes1,813 views
Filipe Falcão presents an overview of AngularJS 2.0 compared to AngularJS 1.x. Some key differences include components replacing directives, using TypeScript for annotations instead of AngularJS, and bootstrapping components instead of controllers. AngularJS 2.0 also standardizes syntax, improves performance with zones and immutable objects, and uses a reactive system for change detection across the component tree. While still in alpha, AngularJS 2.0 shifts to web standards, improves speed, and simplifies the architecture with a focus on components.
![Syntax changes
3. Property bindings
<input #name type=“text”>
<span [textContent]=“name.value”></span>](https://image.slidesharecdn.com/angularjs2-150314185805-conversion-gate01/85/AngularJS-2-0-Jumpstart-15-320.jpg)
![Syntax uniformity
1. (event) - for HTML DOM events
2. [property] - for HTML properties](https://image.slidesharecdn.com/angularjs2-150314185805-conversion-gate01/85/AngularJS-2-0-Jumpstart-16-320.jpg)
AngularJS 2.0 Jumpstart
- 2. About me Filipe Falcão Computer Science, JavaScript, Python +FilipeFalcaoBatista @FilipeFalcaoS
- 3. Topics 1. Motivation 2. Old vs new concepts
- 4. Motivation 1. Performance “Today,Angular 2 is 5 times faster than Angular 1” –Misko Hevery
- 5. Motivation 2.Web standards Shadow DOM replaces transclusion ES6 Modules replaces Angular ones
- 6. Old vs new concepts 1. Components 2.AtScript and ES6 3. Bootstraping 4. Syntax changes and uniformity 5. Change detection
- 7. Before we get started… AngularJS 2.0 is currently in Alpha Preview, so things might/can/ definitely will change
- 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. AtScript Syntax sugar on top of ES6 for meta-data annotations @Component ({ selector: 'my-component' }) @View ({ inline: '<div>Hi from Angular 2</div>' })
- 10. ES6 Represents the “controller" export class MyComponent { constructor () { this.name = 'Filipe' } sayMyName () { console.log(‘'My name is ‘ + this.name) } }
- 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. Bootstraping in 2.0 1. Create component 2. Create template 3. Bootstrap 4.Transpilation import bootstrap from 'angular2' bootstrap(MyComponent)
- 13. Syntax changes 1. Local variables <input #name type=“text”> {{ name.value }}
- 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. Syntax changes 3. Property bindings <input #name type=“text”> <span [textContent]=“name.value”></span>
- 16. Syntax uniformity 1. (event) - for HTML DOM events 2. [property] - for HTML properties
- 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. More resources 2. ng-conf and ng-vegas 1. angular.io 3. learnangular2.com 4. 2do app by David East
- 19. THANKS! Any questions? You can find me at: +FilipeFalcaoBatista @FilipeFalcaoS