Products from the future
UI Engineer at ForgeRock
Next generation framework
(back to 2009)
Transclusion
Angular Modules
Controllers, Scopes, Directives
Shadow DOM
ES2015 Modules
[Web]Components
Today, Angular2 is 5x faster than Angular 1
Miško Hevery, 2/10/15
Your app is a tree of self-describing components
App
Feedback
Place
Place
Place
Guide
Places
We tell Angular that ES2015 class is a component by attaching metadata to it.
import {Component} from '@angular/core';
@Component({
selector: 'guide',
template: `
<h1>Hello {{city}}!</h1>
`,
})
export class GuideComponent {
constructor() {
this.city = 'London'
}
}
Allows you to depend on interfaces, not concrete types, this results in more decoupled code and improves testability.
import { PlacesService } from './places.service';
@Component({
providers: [PlacesService],
...
})
constructor(private _placesService: PlacesService) { ... }
(eventBinding)
[propertyBinding]
#localTemplateVariable
{{interpolation}}
[(ngModel)]
<h1 *ngIf="city">
Hello {{'dear ' + city}}!
</h1>
<input [(ngModel)]="city" #cityName>
<button (click)="cityName.style.color='red'" [disabled]="!city">
Color me
</button>
*ngIf
HTML Syntax Spec: Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, """, "'", ">", "/", "=", the control characters, and any characters that are not defined by Unicode.
+ Fallback to canonical prefix- syntax exists
Input properties usually receive data values. Output properties expose event producers, such as EventEmitter objects.
Place
Place
Place
Places
@Input() name: string;
@Output() visit: EventEmitter<any> = new EventEmitter();
<place [name]="place.name" (visit)="logVisited($event.name)"></place>
Super simple, codeless
Validation logic can not be unit tested
Promotes mutability
<form #templateDrivenForm="ngForm">
We can unit test the form validation logic
We can build reactive UIs
?
<form [formGroup]="modelDrivenForm">
github.com/angular/quickstart
Maxim Salnikov