Change is Good

Collaboration & Sharing

React

• Package Manager
• Tools

Ember

• Router
• Ember-cli

TypeScript

• @Annotations
• ES6, ES7

Web Standards

Split in Two:

Application
Layer

View
Layer

Resulting Awesomeness: Web Workers | Server Rendering | Native Apps | Better Change Detection | Easier Testing

ng2 Setup

ES6 Modules

        import {bootstrap, Component, View} from 'angular2/angular2';
      

angular.module('app', ['Dependency'])

ES6 Classes

        class TodoApp {}
      

Directive Controller

@Component

        @Component({
          selector: 'todo-app’
        })
        class TodoApp {}
      

Directive with template + Controller

@View

        @Component({ ... })
        @View({
          template: `<h1>{{title}}</h1>` // or:
          //templateUrl: 'todos.html'
        })
        class TodoApp { ... }
      

Directive Template/TemplateUrl

bootstrap(class)

        @Component({ selector: 'todo-app’ })
        @View({ template: `<h1>{{title}}</h1>` })
        class TodoApp {}

        bootstrap(TodoApp);
      

        <todo-app></todo-app>
      

Class Constructor

        @Component({ selector: 'todo-app’ })
        class TodoApp {
          // initial values
          constructor() {
            this.todos = ['First thing', 'Second thing', 'Third thing'];
          }
        }
      

Controller

Class Methods

        export class TodoStorage {
          // initial values
          constructor () {
            this.STORAGE_ID = 'todos-angular2';
          }

          // methods
          get() {
            return JSON.parse(localStorage.getItem(this.STORAGE_ID) || '[]');
          }
          put(todos) {
            localStorage.setItem(this.STORAGE_ID, JSON.stringify(todos));
          }
        }
      

Singletons: Controller, Service, Factory, Directive

Inject Services

        import {TodoStorage} from 'todoStorageService';

        @Component({
          selector: 'todo-app',
          injectables: [ TodoStorage ]
        })
        class TodoApp {
          constructor(storage: TodoStorage) {
            this.todos = storage.get() || [];
          }
        }
      

function TodoCtrl(TodoStorageService) {}

#Local Variables

         <input #new-todo>
       

ng-init

{{ binding }}

        <input #new-todo />
        <p>{{newTodo.value}}</p>
      

(event)="statement"

        <input #new-todo (keydown)>
      

        <input #new-todo (keydown)=“addTodo($event, newTodo.value)”>
      

ng-keydown=($event, newTodo)

ng-* => (event)

• ng-click => (click)
• ng-dblclick => (dblclick)
• ng-keydown => (keydown)
• ng-keyup => (keyup)
• ng-mouseover => (mouseover)
• ng-mouseenter => (mouseenter)
• ng-mouseleave => (mouseleave)

[property]="expression"

        <ul>
          <li [style.background-color]=“newTodo.value”>
            {{newTodo.value}}
          </li>
        </ul>
      

ng-style="{'background-color':newTodo}">

ng-* => [property]

• ng-src => [src]
• ng-href => [href]
• ng-show => [visible]
• ng-hide => [hidden]
• ng-style="color: red" => [style.color]="red"
• ng-class="name" => [class.name]
• ng-class={'name': condition} => [class.name]="condition"

For

        import {bootstrap, Component, View, For} from 'angular2/angular2';

        @View({
          templateUrl: 'todos.html’,
          directives: [For]
        })
        class TodoApp{
          constructor() {
            this.todos = [‘first thing’, ‘second thing’, ‘third thing’];
          }
        }
      

*for="#item of items"

        <ul *for=“#todo of todos”>
          <li>
            <p>{{todo}}</p>
          </li>
        </ul>
      

ng-repeat="todo in vm.todos"

index

      <ul *for=“#todo of todos; var i = index;”>
        <li>
          <p>{{i}}. {{todo}}</p>
        </li>
      </ul>
    

ng-repeat="todo in vm.todos track by $index">

If

        import {bootstrap, Component, View, For, If} from 'angular2/angular2';

        @View({
          templateUrl: 'todos.html’,
          directives: [For, If]
        })
        Class TodoApp{}
      

*if="condition"

        <ul *for=“#todo of todos; var i = index;”>
          <li>
            <p>{{index}}. {{todo.title}}</p>
          </li>
          <form *if="isEdit(i)">
            <p (dblclick)="doneEditing(todo)">Edit me!</p>
          </form>
        </ul>
      

ng-if="vm.currentIndex === $index">

Control

        import {Control, FormDirectives, ControlDirective} from 'angular2/forms';

        @Component({ ... })
        @View({ ...
          directives: [For, If, FormDirectives]
        })
        class TodoApp {
          constructor( ...) {
          ...
            this.newTodo = new Control('');
          }
        }
      

Control

        <input [control]="newTodo" (keydown)="addTodo($event)">
      

ng-model

Validators

        import {CustomValidators} from 'validators';

        @Component({
          injectables: [TodoStorage, CustomValidators]
        })
        class TodoApp{
          constructor(storage: TodoStorage, custom: CustomValidators) {
            this.newTodo = new Control('', custom.badLanguage);
          }
        }
      

Custom Validators

        export class CustomValidators{
          // c: Control
          badLanguage(c) {
            // 18dogbaby = bad language in Korean
            if(c.value.match(/18dogbaby/)) {
              return {
                badLanguage: true
              };
            }
          // return null = valid
          return null;
          }
        }
      

Validators

        <form id="todo-form" [class.invalid]="!newTodo.valid">
      

Valid, Pristine, Dirty

Complex Forms:

ControlGroup | FormBuilder

Resources

• ES6

  Learn ES6 - the Game

  Angular 1.x + ES6

  ES6, Angular 1.x & JSPM

• @timjacobi | Angular2-Education

• #Angular2 | Repo | Preview Docs

Learn More

• Angular New Router
• TypeScript
• Module Loaders
• HTML Imports, <template>, Shadow DOM
• Component Based Architecture
• Unidirectional Data Flow
• Immutable Data & Observables in Angular 2
• ES6 Generators

Credits

• ng2Playground & ng2 Plunker

  @pkozlowski_os | Plunkers were based on these.

• Plunker

  Built in Angular!

• Flowtime.js

  @marcolago | Fantastic HTML Presentation Framework

• Prism.js

  Code Syntax highlighting