Angular 2
Key concepts and getting started
Maxim Salnikov
@webmaxru
-
Google Developer Expert in Angular
-
AngularJS Oslo Meetup Organizer
Products from the future
UI Engineer at ForgeRock
State of the web front-end
Angular 1
Next generation framework
(back to 2009)
47K
Under active development
Following standards
Transclusion
Angular Modules
Controllers, Scopes, Directives
Shadow DOM
ES2015 Modules
[Web]Components
performance
Today, Angular2 is 5x faster than Angular 1
Miško Hevery, 2/10/15
Change detection
Web workers
Server-side rendering
Views caching
Flexibility
Cross platform
Key concepts
Components
Dependency injection
Template syntax
Data flow
Forms
ROUTING
Components
Your app is a tree of self-describing components
App
Feedback
Place
Place
Place
Guide
Places
Component code
We tell Angular that ES2015 class is a component by attaching metadata to it.
import {Component} from 'angular2/core';
@Component({
selector: 'guide',
template: `
<h1>Hello {{city}}!</h1>
`,
})
export class GuideComponent {
constructor() {
this.city = 'Riga'
}
}
Dependency injection
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) { ... }
Template syntax
(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
Is it valid HTML?
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.
YES!
+ Fallback to canonical prefix- syntax exists
Data flow
Input properties usually receive data values. Output properties expose event producers, such as EventEmitter objects.
Place
Place
Place
Places
EXPOSE Events
receive data
@Input() name: string;
@Output() visit: EventEmitter<any> = new EventEmitter();
<place [name]="place.name" (visit)="logVisited($event.name)"></place>
Forms
Template-driven
- Using [(ngModel)] heavily
- Angular1-like
- Validation logic is declared in the template
Super simple, codeless
Validation logic can not be unit tested
Promotes mutability
<form #templateDrivenForm="ngForm">
Forms
Model-driven
- Using Control, ControlGroup, FormBuilder classes
- Validation logic is declared in the class
We can unit test the form validation logic
We can build reactive UIs
?
<form [ngFormModel]="modelDrivenForm">
Links
Coding fun
tack så mycket!
Maxim Salnikov
@webmaxru
Angular 2: Key concepts and getting started - Stockholm
By Maxim Salnikov
Angular 2: Key concepts and getting started - Stockholm
- 1,985