Angular 2 preview

Wien, 06.08.2015

Łukasz Rzeszotarski @lrzeszotarski

Marko Jurisic @jurisicmarko

Angular 2 Motivation

  • Angular 1 is aging - codebase from 2009
  • Web standards
    • shadow DOM
    • ES6
  • Performance: "Today, Angular2 is 5x faster than Angular 1"
  • Simple cognitive model

https://angular2-intro.firebaseapp.com

Angular 1.x Concepts

  • Controller

  • Factory

  • Service

  • Provider
  • Directive
  • Transclusion
  • Module
  • Scope

Angular 2

  • Complete rewrite, no backwards compatibility

Angular 2

Our goal with Angular 2 is to make the best possible set of tools for building web apps not constrained by maintaining backwards compatibility with existing APIs.

Angular blog

Goodbye

  • $scope
  • $apply(), digest loop
  • Controllers
  • Directive Definition Object
  • transclusion
  • angular.module system
  • jqLite (angular.element)
  • 2-way data binding
  • service vs. factory vs. provider vs. ...

Hello

  • classes (think controllerAs in Angular 1.2+)
  • zone.js
  • classes
  • classes + annotations
  • shadow DOM
  • ES6 modules
  • plain DOM methods
  • explicit data flow
  • di.js

Angular 2

http://slides.com/michaelbromley/angular-2-a-first-look#/4

ANGULAR 1.X

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

ANGULAR 2

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

Bootstrapping

ANGULAR 1.X

ANGULAR 2

Bootstrapping

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

// create controller
app.controller('MyCtrl', function($scope) {

  // attach items to $scope
  $scope.name = 'David';
});
import {Component, Template, bootstrap} from 'angular2/angular2';
import {TodoApp} from 'todoapp';

// create component

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

// bootstrap

bootstrap(TodoApp);
<!-- declare ng-app -->
<body ng-app="app">
  <div ng-controller="MyCtrl">
    My name is {{ name }}
  </div>
</body>

Template syntax

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

They are pretty much using the entire keyboard for all the symbols, letters and numbers you can think of. I haven't used the `@%^~ for many years, and i liked it that way

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

Uniformity

  • #element marks plain DOM element
  • (event) for events
  • [property] for properties
  • * for built-in directives  (ng-for, ng-if) 
<input #newname />
<button (click)="changeName(newname.value)"
          [disabled]="newname.value == 'David'"> Change Name
</button>
<ul>
  <li *ng-for="#error of errors; #i = index">
    Error {{i}} of {{errors.length}}: {{error.message}}
  </li>
</ul>
<some-component [prop]="someExp" (event)="someEvent()" [(two-way-prop)]="someExp"></show-title>

<--! same as: -->

<some-component bind-prop="someExp" on-event="someEvent()" bindon-two-way-prop="someExp">

ANGULAR 1.X

ANGULAR 2

Event handlers

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

Change detection

http://victorsavkin.com/post/110170125256/change-detection-in-angular-2

Every component gets a change detector responsible for checking the bindings defined in its template

Zone.js - Informs Angular when to run change detection

Local Variables

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

Migration path

https://www.airpair.com/angularjs/posts/preparing-for-the-future-of-angularjs

"It's really hard for us to build a bridge to a city that doesn't exist yet."

Brad Green, Engineering Director, Angular core team

Migration path

  1. Make Directives, not Controllers

  2. Clean up your $scopes (controllerAs)

    1. Avoid scope.$parent

    2. Avoid scope.$on (if possible)

    3. Avoid scope message passing  

    4. Prefer scope inheritance with namespaces

  3. TypeScript

     

http://paislee.io/migrating-to-angularjs-2-0/

References

Code

Angular 2 preview

By Marko Jurišić

Made with Slides.com

Angular 2 preview

  • 968

More from Marko Jurišić