Intro to Angular2

David East / @_davideast

Full-time Firebase. Part-time Angular.

Disclaimer

Angular2 is a work in progress.

Things might/will change.

Outline

Motivation

Concepts

Code

Angular 1 is aging

The code base for Angular dates back to 2009

Web Standards

Shadow DOM replaces Transclusion

ES6 Modules replaces Angular Modules

Peformance

"Today, Angular2 is 5x faster than Angular 1"

- Misko, 2/10/15

Deep Tree Benchmark 2015-02-09

Simple Cognitive Model

Angular 1.x has many concepts

Concepts have a learning curve

Angular 1.x Concepts

Controller

Factory

Service

Provider

Directive

Transclusion

Module

Scope

Motivation

Web Standards

Performance

Simple Cognitive Model

Your not-so first look...

Angular2

					@Component({
  selector: 'todo-app',
  template: new TemplateConfig({
    url: '/todos.html'
  })
})
class TodoApp {
  todos;
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

AtScript

Provides syntax sugar for meta-data annotations

						@Component({
  selector: 'foo',
  template: new TemplateConfig({
    url: '/foo.html'
  })
})
class Foo {

}

AtScript

AtScript is NOT a language to replace JavaScript

AtScript is merely syntactical sugar on top of ES6

Working with TypeScript, V8, and others on proposals for TC39 standards committe.

AtScript

Compiles to ES5

Not required for Angular2

Types are optional

Components

						@Component({
  selector: 'todo-app',
  template: new TemplateConfig({
    url: '/todos.html'
  })
})
class TodoApp {
  todos;
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

Component Annotation

						@Component({
  selector: 'todo-app',
  template: new TemplateConfig({
    url: '/todos.html'
  })
})

Component Controller

						class TodoApp {
  todos;
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

Components

						@Component({
  selector: 'todo-app',
  template: new TemplateConfig({
    url: '/todos.html'
  })
})
class TodoApp {
  todos;
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

Bootstrapping

Angular 1.x

						var app = angular.module('app', []);

						<body ng-app="app">

</body>

						app.controller('MyCtrl', function($scope) {
  $scope.name = 'David';
});

						<body ng-app="app">

  <div ng-controller="MyCtrl">
    My name is {{ name }}
  </div>

</body>

Angular 1.x

Create Module Declare ng-app Create controller Attach items to $scope Declare Controller Create Template

Angular2 Bootstrapping

Create Component

						@Component({
  selector: 'todo-app',
  template: new TemplateConfig({
    url: '/todos.html'
  })
})
export class TodoApp {
  todos;
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

bootstrap

						import {bootstrap} from 'angular';
import {TodoApp} from 'todoapp';
bootstrap(TodoApp);

ES6/AtScript compilation

Use Traceur (experimental options for AtScript)

In Browser or CLI

Working on key-turn tooling solution

Angular2

Create Component Create Template bootstrap Transpilation

Template Syntax

						@Component({
  selector: 'name-change',
  template: new TemplateConfig({ url: 'name-change.html' })
})
class NameChange {
  name;
  constructor() {
    this.name = '';
  }
  changeName(newName) {
    this.name = newName;
  }
}

						<div> My name is {{ name }} </div>
<div>
  <input #newname type="text">
  <button (click)="changeName(newname.value)"
          [disabled]="newname.value == 'David'"> Change Name
  </button>
</div>

Local Variables

						<div>
  <input #newname type="text">
  {{ newname.value }}
</div>

Event Handlers

						<div>
  <input #newname type="text">
  <button (click)="changeName($event, newname.value)">
</div>

Property Bindings

						<div>
  <input #newname type="text">
  <span [textContent]="newname.value"></span>
</div>

						@Component({
  selector: 'name-change',
  template: new TemplateConfig({ url: 'name-change.html' })
})
class NameChange {
  name;
  constructor() {
    this.name = '';
  }
  changeName(newName) {
    this.name = newName;
  }
}

						<div> My name is {{ name }} </div>
<div>
  <input #newname type="text">
  <button (click)="changeName(newname.value)"
          [disabled]="newname.value == 'David'"> Change Name
  </button>
</div>

Uniformity

(event) - for events

[property] - for properties

Flexibility

Angular 1.x

						<div> My name is {{ name }} </div>
<div>
  <input type="text" ng-model="name">
  <button ng-name-change="changeName(name)">Change Name</button>
</div>

Angular2

						<div> My name is {{ name }} </div>
<div>
  <input #newname type="text">
  <button (namechange)="changeName(newname.value)">Change Name</button>
</div>

Change Detection

An Angular2 application is a tree of components Victor Savkin's Blog Post

Zone.js

Informs Angular when to run change detection

No more $timeout!

						app.controller('UserCtrl', function($scope, $timeout) {
  var ref = new Firebase('https://<my-firebase>.firebaseio.com/user/1');

  ref.on('value', function(snap) {

    $timeout(function() {
      $scope.user = snap.val();
    });

  });
});

Code!

Summary

No Documentation, yet...

https://github.com/davideast/ng2do

Much more to be said at ng-conf

intro-to-angular2

davideast

intro-to-angular2

5 1