Wien, 06.08.2015
Łukasz Rzeszotarski @lrzeszotarski
Marko Jurisic @jurisicmarko
https://angular2-intro.firebaseapp.com
Controller
Factory
Service
Our goal with Angular 2 is to make the best possible set of tools for building web apps not constrained by maintaining backwards compatibility with existing APIs.
Angular blog
http://slides.com/michaelbromley/angular-2-a-first-look#/4
// create module
var app = angular.module('app', []);
// create controller
app.controller('MyCtrl', function($scope) {
// attach items to $scope
$scope.name = 'David';
});
import {Component, Template, bootstrap} from 'angular2/angular2';
import {TodoApp} from 'todoapp';
// create component
@Component({
selector: 'todo-app',
})
@Template({ url: 'todos.html' })
export class TodoApp {
todos;
constructor() {
this.todos = ['Item1', 'Item2'];
}
}
// bootstrap
bootstrap(TodoApp);
<!-- declare ng-app -->
<body ng-app="app">
<div ng-controller="MyCtrl">
My name is {{ name }}
</div>
</body>
<div> My name is {{ name }} </div>
<div>
<input #newname type="text">
<button (click)="changeName(newname.value)"
[disabled]="newname.value == 'David'"> Change Name
</button>
</div>
They are pretty much using the entire keyboard for all the symbols, letters and numbers you can think of. I haven't used the `@%^~ for many years, and i liked it that way
@Template({
url: 'name-change.html'
})
@Component({
selector: 'name-change',
})
class NameChange {
constructor() {
this.name = '';
}
changeName(newName) {
this.name = newName;
}
}
<input #newname />
<button (click)="changeName(newname.value)"
[disabled]="newname.value == 'David'"> Change Name
</button>
<ul>
<li *ng-for="#error of errors; #i = index">
Error {{i}} of {{errors.length}}: {{error.message}}
</li>
</ul>
<some-component [prop]="someExp" (event)="someEvent()" [(two-way-prop)]="someExp"></show-title>
<--! same as: -->
<some-component bind-prop="someExp" on-event="someEvent()" bindon-two-way-prop="someExp">
<div>
<input ng-model="name" type="text">
<button ng-click="changeName()">
</div>
<div>
<input #newname type="text">
<button (click)="changeName($event, newname.value)">
</div>
http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
Every component gets a change detector responsible for checking the bindings defined in its template
Zone.js - Informs Angular when to run change detection
<div>
<input #newname type="text">
{{ newname.value }}
</div>
https://www.airpair.com/angularjs/posts/preparing-for-the-future-of-angularjs
"It's really hard for us to build a bridge to a city that doesn't exist yet."
Brad Green, Engineering Director, Angular core team
Clean up your $scopes (controllerAs)
Avoid scope.$parent
Avoid scope.$on (if possible)
Avoid scope message passing
Prefer scope inheritance with namespaces
TypeScript
http://paislee.io/migrating-to-angularjs-2-0/