Components vs. Controllers/$scope

CONTROLLERS AND $SCOPE ARE GONE!

Components

• Angular 2 is following other frameworks (React, Polymer) with components
• Components are directives with templates
• Focus is on building component in your app's single javascript file

Code difference:

Angular 1.x

ng-controller="myController"

Angular 2.0

<my-component></my-component>

Dependency Injection

Things to Fix From Angular 1.x DI

• Allow for easier minification of DI
• Create lifetime/scope control
• Allow child injectors

TypeScript vs. Javascript

Typescript is basically Javascript with:

• Classes
• Static Types
• Annotations
• Decorations
• ES6

Bootstrapping

Example Bootstrap:

document.addEventListener('DOMContentLoaded', function() {
	ng.bootstrap(Component);
});

Other Changes

• Event Emitters
• Models - {{modelTest}} - [(ng-model)]="modelTest"
• Form/validation
• (click) instead of 'ng-click'. No more 'ng-'

Zone.js

- Jeremy Likness

Why is this useful?

How does Zone.js apply to real time?

• watches 'this' for changes
• eliminates the need to '$scope.$apply()'

What is real time web?

- Ars Technica

Services

• Syncano
• Firebase
• Parse

Real Time with Syncano

Channels

Syncano uses Channels to poll for real time updates

Data Object Changes

• Create
• Update
• Delete
• Error

app.js - Component

var Cmp = ng.
  Component({
    selector: 'cmp',
    template:
      '<ul style="width:15em">' +
      '<li *ng-for="#item of list" id="{{item.id}}">' +
      '{{ item.name }} <button (click)="removeItem(item)" style="float:right;">X</button>' +
      '</li>' +
      '</ul>' +
      '<input id="textEntry" #textbox (keyup)="doneTyping($event)">' +
      '<button id="submitButton" (click)="addItem(textbox.value)">Add Item</button>',
    directives: [ng.NgModel, ng.FORM_DIRECTIVES, ng.NgFor]
  })

app.js - Class

.Class({
  constructor: [function Cmp() {
	var self = this; // ES5
	this.list = []; // list of items
	...
  }]
});

app.js - Bootstrap

document.addEventListener('DOMContentLoaded', function() {
  ng.bootstrap(Cmp);
});

Syncano Setup

Syncano Variables

// Syncano variables
var sync = new Syncano({accountKey:myAccountKey}); // for creating obj
var instance = new Syncano({apiKey:myApiKey, instance:myInstance}); // for real time
var realtime = instance.channel(myChannel).watch(); // real time instance variable

Generate Initial List

// Initial List from Syncano
sync.instance(myInstance).class(myClass).dataobject().list()
  .then(function(res){
    for(i=0;i<res.objects.length;i++){
      self.list.push({ // push to array
        name: res.objects[i].name,
        id: res.objects[i].id
      });
    }
  })
  .catch(function(err){
    console.log(err);
  });

Real Time Event Listeners

// Realtime Event Listeners - (scroll down)
realtime.on('create', function(data) {
  self.list.push({ // push new item to array with Syncano data
    name: data.name,
    id: data.id
  });
});

realtime.on('delete', function(data) {
  for(var i = self.list.length - 1; i >= 0; i--) {
    if(self.list[i].id === data.id) {
      self.list.splice(i, 1); // remove from array
    }
  }
});

realtime.on('error', function(data) {
  console.log(data);
});

Class Functions

Add Item

this.addItem = function(item) { // add item to Syncano
  var newItem = {
    "name":item,
    "channel":"itemlist"
  };
  sync.instance(myInstance).class(myClass).dataobject().add(newItem)
    .then(function(res){
      console.log(res);
    })
    .catch(function(err){
      console.log(err);
    })
};

Remove Item

this.removeItem = function(item){ // remove item from Syncano
  sync.instance(myInstance).class(myClass).dataobject(item.id).delete()
    .then(function(res){
      console.log("Item: [" + item.name + "] was deleted");
    })
    .catch(function(err){
      console.log(err);
    });
};

When User is Done Typing..

this.doneTyping = function($event) { // watches for keys when done typing
  if($event.which === 13) { // 'enter' key
    this.addItem($event.target.value);
    $event.target.value = null;
  }
};