AngularJS 2.0 Jumpstart
-
Upload
filipe-falcao -
Category
Software
-
view
323 -
download
0
Transcript of AngularJS 2.0 Jumpstart
ANGULARJS 2.0 JUMPSTART
About me
Filipe FalcãoComputer Science, JavaScript, Python
+FilipeFalcaoBatista@FilipeFalcaoS
Topics
1. Motivation2. Old vs new concepts
Motivation
1. Performance“Today, Angular 2 is 5 times faster than Angular 1”
–Misko Hevery
Motivation
2. Web standardsShadow DOM replaces transclusionES6 Modules replaces Angular ones
Old vs new concepts
1. Components2. AtScript and ES6
3. Bootstraping4. Syntax changes and uniformity
5. Change detection
Before we get started…
AngularJS 2.0 is currently in Alpha Preview, so things might/can/
definitely will change
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)}
}
AtScriptSyntax sugar on top of ES6 for meta-data annotations
@Component ({selector: 'my-component'
})@View ({
inline: '<div>Hi from Angular 2</div>'})
ES6Represents the “controller"
export class MyComponent {constructor () {
this.name = 'Filipe'}sayMyName () {
console.log(‘'My name is ‘ + this.name)}
}
Bootstraping in 1.x
1. Create module2. Declare ng-app
3. Create controller4. Manage $scope
5. Declare ng-controller6. Create template
Bootstraping in 2.0
1. Create component2. Create template
3. Bootstrap4. Transpilation
import bootstrap from 'angular2'bootstrap(MyComponent)
Syntax changes
1. Local variables<input #name type=“text”>{{ name.value }}
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>
Syntax changes
3. Property bindings<input #name type=“text”><span [textContent]=“name.value”></span>
Syntax uniformity
1. (event) - for HTML DOM events2. [property] - for HTML properties
Change detection1. Tree of components
2. Reactive system3. Directed tree
4. Detection system walks the whole tree5. Immutable/Observable objects - O(n) to
O(log n)6. Zone.js
More resources
2. ng-conf and ng-vegas1. angular.io
3. learnangular2.com4. 2do app by David East
THANKS!
Any questions?
You can find me at:+FilipeFalcaoBatista
@FilipeFalcaoS