Angular 2
An Introduction
Ryan Tucker
Angular 1 History
- Released in 2009
- Currently Version 1.4
Angular 1 Problems
- Performance Issues
- Framework Specific Code
- Built on ES5 JavaScript
What's New in Angular 2?
Web Components
Framework Specific
ES2015+
- HTML Imports
- <Template>
- Shadow DOM
- Imports
- Classes
- Observables
- More
Factory, Service, Constant, EtcLink, Compile, Controller$Scope, NG-Whatever
Split into Two Distinct Layers
Application
View
- Easier Testing
- Better Change Detection
- Server Side Rendering
It's All Just a Tree
So I Have to Relearn Everything?
Let's learn how this all works
ES6 Modules
import { bootstrap, Component, View } from 'angular2/angular2';
angular.module('app', ['dependency1', 'dependency2']);
Angular 2
Angular 1
ES6 Classes
class MyApp {}
Angular 2
Similar to a directive's controller in Angular 1
@Component
@Component({
selector: 'my-app'
})
class MyApp {}
Angular 2
Similar to a directive with a template and a controller in Angular 1
Bootstrapping
@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>
Class Constructor
@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
Class Methods
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
Service Injection
@Component({
selector: 'photo-view',
appInjector: [Flickr]
})
@View({ ... })
export class PhotoView {
constructor(flickr: Flickr) {
this.flickr = flickr;
}
}
Angular 2
Angular 1
function PhotoViewCtrl($http) {
}
Template Syntax
#Local_Variable
<input #search>
The #<variable_name> syntax creates a local variable much like ng-init in Angular 1.
{{ Binding }}
<input #search>
<p>{{search.value}}</p>
The handlebars syntax is still with us from Angular 1!
(Event)="Statement"
<input #search (keydown)="searchPhotos($event, search.value)">
<p>{{search.value}}</p>
ng-keydown=($event, search) from Angular 1
Where Did All My NG Directives Go?
They're All Events Now
- ng-click => (click)
- ng-dblclick => (dblclick)
- ng-keydown => (keydown)
- ng-keyup => (keyup)
- ng-mouseover => (mouseover)
- ng-mouseenter => (mouseenter)
- ng-mouseleave => (mouseleave)
[Property]=
"Expression"
<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}"
What about my NG-* Properties?
- ng-src => [src]
- ng-href => [href]
- ng-show => [visible]
- ng-hide => [hidden]
- ng-style="color: red" => [style.color]="red"
- ng-class="name" => [class.name]
- ng-class={'name': condition} => [class.name]="condition"
Built-In Directives
For
import { bootstrap, Component, View, For } from 'angular2/angular2';
@View({
templateUrl: 'myTemplate.html',
directives: [For]
})
class MyForExample {
constructor() {
this.samples = ['first', 'second', 'third'];
}
}
*For="#item of items"
<ul *for="#sample of samples">
<li>
<p>{{sample}}</p>
</li>
</ul>
Much like ng-repeat from Angular 1.
ng-repeat="sample in samples"
Tracking the Index
<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"
If
import { bootstrap, Component, View, For, If } from 'angular2/angular2';
@View({
templateUrl: 'myTemplate.html',
directives: [For, If]
})
class MyForExample {
constructor() {
this.samples = ['first', 'second', 'third'];
}
}
*If="Condition"
<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"
Let's Look at a Quick App
Where Can I Learn More?
Questions?
Twitter: @RCTucker88
GitHub: rtucker88
Angular 2: An Introduction
By Ryan Tucker
Angular 2: An Introduction
- 2,261