Angular2 Preview

Created by Victor Mejia

about me

Software Engineer @ CoStar Group

Tweeting @_victormejia

Coding @victormejia

Disclaimer

Angular2 is a work in progress.

Things might/will change.

I'm not an Angular 2 expert...yet :)

What We Will Cover

  • Core Concepts
  • New Syntax
  • New Template Syntax
  • Directives & Components
  • (Simple) Dependency Injection
  • Writing future proof code

What We Won't Cover

  • Router (just got ported)
  • Testing and Mocking
  • E2E Testing
  • Forms
  • Core Services (XHR etc.)
  • Number crunching

Angular 1 is aging

The code base for Angular dates back to 2009

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

3 Main Web Standards Behind Angular 2

Object.observe()

ES6

Web Components

The Future is Now

ES6

ES6 Brings Many Cool New Features

Classes

Modules

Arrow Functions

ES6 Classes


  class User {
    constructor(email) {
      this.email = email;
    }
    savePassword(pwd) {
      this.password = pwd;
    }
  }

  var User = new User('hithere@email.com');
  user.savePassword('easyPassword');

ES5 Class


  function User(email) {
    this.email = email;
  }

  User.prototype.savePassword = function (pwd) {
    this.password = pwd;
  }

  var User = new User('hithere@email.com');
  user.savePassword('easyPassword');

ES6 Modules


// 'services/TodoService.js'
export class TodoService {
  constructor() {
    this.todos = [];
  }
  add(todo) {
    this.todos.push(todo);
  }
}

ES6 Modules


  import {TodoService} from 'services/TodoService';

Your not-so first look...

Angular2


@Component({
  selector: 'todo-app',
})
@View({
  templateUrl: 'todo.html',
})
class TodoApp {
  todos;
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

Annotations

Provides syntax sugar for meta-data annotations 


@Component({
  selector: 'foo',
})
@View({
  templateUrl: 'foo.html'
})
class Foo {

}

TypeScript

Superset of JavaScript

It's a transpiler + develoment experience

Providing annotation support in the latest alpha

Angular team working with TypeScript team on proposals for TC39 standards committe.

Kangax Compatibility Table

TypeScript

Compiles to ES5

Not required for Angular2

Types are optional

Components


@Component({
  selector: 'todo-app',
})
@View({
  templateUrl: 'todos.html'
})
class TodoApp {
  todos;
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

Component Annotation


@Component({
  selector: 'todo-app',
})
@View({
  templateUrl: 'todos.html'
})

Component Controller


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

Components


@Component({
  selector: 'todo-app',
})
@View({
  templateUrl: '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 = 'Victor';
});

          

<body ng-app="app">

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

</body>

Angular 1.x

  1. Create Module
  2. Declare ng-app
  3. Create controller
  4. Attach items to $scope
  5. Declare Controller
  6. Create Template

Angular2 Bootstrapping

Create Component


@Component({
  selector: 'todo-app'
})
@View({
  templateUrl: 'todos.html'
})
class TodoApp {
  todos;
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

bootstrap


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

ES6/TypeScript compilation

Use TypeScript Transpiler

In Browser or CLI

Working on key-turn tooling solution

Angular2

  1. Create Component
  2. Create Template
  3. bootstrap
  4. Transpilation

Template Syntax 


@Component({
  selector: 'name-change'
})
@View({
  templateUrl: '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 - DOM Reference 


<div>
  <input #newname type="text" (keyup)="updateName($event, newname)">
  {{ name }}
</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>

All Together


@Component({
  selector: 'name-change'
})
@View({
  templateUrl: 'name-change.html'
})
class NameChange {
  name;
  constructor() {
    this.name = '';
  }
  changeName(newName) {
    this.name = newName;
  }
}

All Together


<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

#view-reference

Flexibility

Angular 1.x 


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

Angular2 


<div> My name is {{ name }} </div>
<div>
  <input #newname type="text">
  <button (click)="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();
    });

  });
});

Show me the code!

<>

Some Thoughts

Still very experimental, things changing a lot

Router not fully ported/documented yet

Forms module has not matured

Preparing for Angular 2

Thanks!