What's coming in Angular.JS 2.0

by ckknight

http://ckknight.github.io/angular-2-0-presentation/

Alternate Titles:

• What to fear in Angular.JS 2.0
• AtScript will doom us all
• I don't like change, therefore Angular.JS 2.0 is already a failure

What are the major changes

• Removed $scope
• HTML template syntax
• Dirty checking/Object.observe hybrid
• Removed Controllers
• Removed Directive Definition Object
• Removed angular.module
• Removed jqLite
• Focus on ECMAScript 6 (and also AtScript)
• Unified around Web Components

Motivations

• Performance
• Better Browsers
• Web Components
• Mobile
• ECMAScript 6
• Ease of Use

AtScript

• ECMAScript 6
• plus annotations
• plus parameter metadata
• plus optional runtime typechecking
• Agreed-upon syntax for types: value:Type
• Completely independent from AngularJS

AtScript examples

@Annotation
@AnotherAnnotation({ some: "data" })
class MyClass {
  methodA(name:string):int {
    var length:int = name.length;
    return length;
  }
}

import * as rtts from 'rtts';
class MyClass {
  methodA(name) {
    rtts.types(name, rtts.string);
    var length = rtts.type(name.length, rtts.int);
    return rtts.returnType(length, rtts.int);
  }
}
MyClass.annotations = [
  new Annotation(),
  new AnotherAnnotation({ some: "data" })
];
MyClass.parameters = [{is:String}];

Dependency Injection

• Built on top of standard ECMAScript 6 concepts
• Uses parameter metadata and annotations generated by AtScript (or manually)
• Doesn't use arbitrary strings as identifiers
• Allows control over lifetime of services
• Child injectors
• Promises
• Laziness

Dependency Injection Examples

// AtScript Type metadata
class Monkey {
  constructor(banana:Banana) { ... }}

// Type metadata
Monkey.parameters = [{is:Banana}];

// AtScript Metadata Annotation
@Inject(Banana)
class Monkey { ... }

// Metadata Annotation
Monkey.annotations = [new Inject(Banana)];

// By arbitrary string (not recommended)
Monkey.annotations = [new Inject('banana')];

Template changes

ng-value → [value] or bind-value

ng-click → (click) or on-click

<elm value="data"> means
elm.setAttribute('value', 'data');

<elm [value]="data"> means
elm.value = 'data';

<elm (click)="doSomething()"> means
elm.addEventHandler('click', parse("doSomething()"));

Template example

<div>
  <input type="text" [value]="newTodoTitle">
  <button (click)="addTodo()">+</button>
  <tab-container>
    <tab-pane title="Good kids">
      <div [ng-repeat|todo]="todosOf('good')">
        <input type="checkbox" [checked]="todo.done">
        {{todo.title}}
        <button (click)="deleteTodo(todo)">
          X
        </button>
      </div>
    </tab-pane>
  </tab-container>
</div>

Component example

@Component({
  selector: 'hello-app',
  template: new TemplateConfig({
    inline: "<div>${message}</div>",
  })
})
class HelloCmp {
  constructor(service: MyService) {
    this.service = service;
    this.message = service.getMessage();
  }
}

Decorator example

@Decorator({
  selector: '[cornflower-blue]'
})
class CornflowerBlue {
  constructor(element: HTMLElement) {
    element.style.color = '#6495ed';
  }
}

Service Example

class MyService {
  getMessage() {
    return "Hello!";
  }
}

Q & A