An Introduction
Ryan Tucker
Web Components
Framework Specific
ES2015+
import { bootstrap, Component, View } from 'angular2/angular2';
angular.module('app', ['dependency1', 'dependency2']);
Angular 2
Angular 1
class MyApp {}
Angular 2
Similar to a directive's controller in Angular 1
@Component({
selector: 'my-app'
})
class MyApp {}
Angular 2
Similar to a directive with a template and a controller in Angular 1
@Component({ selector: 'my-app' })
@View({
template: `<h1>Hello {{name}}</h1>`
})
class MyApp {}
bootstrap(MyApp);
Angular 2
Angular 1
<my-app></my-app>
angular.module('app', ['dependency']);
<body ng-app="my-app"></body>
@Component({ selector: 'my-app' })
@View({
template: `<h1>Hello {{name}}</h1>`
})
class MyApp {
constructor() {
this.name = 'Nova Angular';
}
}
bootstrap(MyApp);
Angular 2
Much like a controller in Angular 1
export class Flickr {
searchPhotos(query: string) {
return fetch(`https://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=${API_KEY}&text=${query}&format=json&nojsoncallback=1`)
.then(function (response) {
return response.json().then(function(jsonResponse) {
return jsonResponse.photos.photo;
});
});
}
createPhotoUrl(photo) {
var farm = photo.farm;
var server = photo.server;
var id = photo.id;
var secret = photo.secret;
return `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}.jpg`;
}
}
Angular 2
Much like your singletons (Service, Factory, Controller, Directive) in Angular 1
@Component({
selector: 'photo-view',
appInjector: [Flickr]
})
@View({ ... })
export class PhotoView {
constructor(flickr: Flickr) {
this.flickr = flickr;
}
}
Angular 2
Angular 1
function PhotoViewCtrl($http) {
}
<input #search>
The #<variable_name> syntax creates a local variable much like ng-init in Angular 1.
<input #search>
<p>{{search.value}}</p>
The handlebars syntax is still with us from Angular 1!
<input #search (keydown)="searchPhotos($event, search.value)">
<p>{{search.value}}</p>
ng-keydown=($event, search) from Angular 1
<ul>
<li [style.background-color]="search.value">
{{search.value}}
</li>
</ul>
In Angular 1 we could control things like style with ng-style="{'background-color': search}"
import { bootstrap, Component, View, For } from 'angular2/angular2';
@View({
templateUrl: 'myTemplate.html',
directives: [For]
})
class MyForExample {
constructor() {
this.samples = ['first', 'second', 'third'];
}
}
<ul *for="#sample of samples">
<li>
<p>{{sample}}</p>
</li>
</ul>
Much like ng-repeat from Angular 1.
ng-repeat="sample in samples"
<ul *for="#sample of samples; var i = index;">
<li>
<p>{{i}}. {{sample}}</p>
</li>
</ul>
Much like ng-repeat from Angular 1.
ng-repeat="sample in samples track by $index"
import { bootstrap, Component, View, For, If } from 'angular2/angular2';
@View({
templateUrl: 'myTemplate.html',
directives: [For, If]
})
class MyForExample {
constructor() {
this.samples = ['first', 'second', 'third'];
}
}
<ul *for="#sample of samples; var i = index;">
<li>
<p>{{i}}. {{sample}}</p>
<form *if="isEdit(i)">
<p (dblclick)="doneEditing(sample)">Edit</p>
</form>
</li>
</ul>
In Angular 1, we can use ng-if="currentIndex === $index"
Twitter: @RCTucker88
GitHub: rtucker88