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, Etc
  • Link, 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

https://github.com/rtucker88/Angular2IntroTalk

Where Can I Learn More?

Questions?

Twitter: @RCTucker88

GitHub: rtucker88

Angular 2: An Introduction

By Ryan Tucker

Made with Slides.com

Angular 2: An Introduction

  • 2,260

More from Ryan Tucker