Angular 2

When, what, how?

When?

What?

• Speed!
• New template syntax
• New component API
• New DI system
• New router
• New animation system
• New i18n system

Speed

• Change detection
  • Dirty-checking
  • Object.observe
  • Rx
  • Immutable objects
• Compiler optimisable expressions
• One-way binding
  • Digest phase

Template Syntax

<button ng-click="ctrl.add()">Add item</button>
<ul>
    <li ng-repeat="item in ctrl.items">
        {{item.name}}
    </li>
</ul>

Template Syntax

<button (click)="add()">Add item</button>
<ul>
    <li *foreach="#item in items"">
        {{item.name}}
    </li>
</ul>

Components

angular.module('app')
  .directive('myComponent', function () {
    return {
      template: '<li ng-if="true">{{ctrl.bigName}}</li>',
      controllerAs: 'ctrl',
      scope: {
          name: '@'
      },
      controller: function ($scope, $element, $attrs) {
          this.bigName = $scope.name;
      }
    };
});

Components

@Component({
    selector: 'my-component',
    bind: {
        name: 'name'
    }
})
@Template({
    inline: '<li [if]="true">{{bigName}}</li>',
    directives: [If]
})
class MyComponentController {
    constructor() {
        this.bigName = this.name.toUpperCase();
    }
}

Components

function MyComponentController() {
    this.bigName = this.name.toUpperCase();
}
MyComponentController.annotations = [
    new Component({
        selector: 'my-component',
        bind: { name: 'name' }
    }),
    new Template({
        inline: '<li [if]="true">{{bigName}}</li>',
        directives: [If]
    })
];

TypeScript 1.5

• @Annotations
• Run-time type information

DI

• Nested containers
• Dependencies specified in TypeScript
• Annotations

Other features

• Router
• Animation
• Internationalization

How?

• Angular 1.x
• Best practices
• Migration guide
• Migration library

Classes

Classes for everything

 

TypeScript?

Controllers

Avoid ng-controller

 

Keep 'angular-isms' out.

 

Services like $timeout & $q are OK.

bindToController

angular.module('app').directive(function () {
  return {
    scope: true, // or {}
    bindToController: {
      name: '@'
    }
  };
});

Small directives

• Event handlers
  • on-event
• Property syncing
  • bind-property
• Data
• Templating

Upcoming

e.g. angular.module('app').component()

Mix & Match

 A1

 

 

 

 

 A1

 

 

 A2

 

 

 A1

 

 

 A2

 

 

 

 

 A1

 

 

 A2

 

 

 A1

 

 

Angular.io

ng-conf