Angular 2
– a short introduction
Mateusz Kocz @mateuszkocz
We talk about JavaScript. Each month in Warsaw, Poland.
Mateusz Kocz @mateuszkocz
Currently in the alpha state. Tested internally by Google.
Not ready for production.
<!-- Template -->
<app>
Hello {{ user.name }}!
<profile-picture
#urerpic
title="My picture"
[url]="user.picture"><profile-picture>
<remove-picture (click)="removePicture(userpic)"></remove-picture>
</app>
// Component
import {Component, View} from 'angular2/angular2'
@Component({
selector: 'profile-picture',
properties: ['url']
})
@View({
inline: '<img [src]="{{ url }}" [alt]="info">
})
export class ProfilePicture{ /* ... */ }
@Component (/* ... */)
@View (/* ... */)
// Class
export class ProfilePicture {
constructor(getSize:PicturesSizing) {
this.info = 'User picutre';
this.size = getSize('user-pic');
}
}
import {FormBuilder, Validators, FormDirectives,
ControlGroups} from 'angular2/forms'
// @Component & @View
export class ComponentWithForms {
constructor(form:FormBuilder) {
this.inputs = form.group({
name: ["initial value", Validators.required]
})
}
}
export class Component extends Directive
@Directive({
selector: '[add-action-to-element]'
})
export class ActionAdder {
constructor(element:Element) {
// Do something with the element
}
}
Angular will no longer provide any frame for services. Instead, they will be plain old JavaScript [place your type here].
// A service's example
export SomeBusinessLogic {
addTwoNumbers(number1:number, number2:number):number {
return number1 + number2;
}
}