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

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

"In a nutshell, Zone provides what you might consider a 'thread execution' context for JavaScript."

- 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?

"...a Web that is as close to instant as you can get."

- Ars Technica

Services

• Syncano
• Firebase
• Parse

Real Time with Syncano

Channels

Syncano uses Channels to poll for real time updates

Channels are a way of providing realtime communication functionality in Syncano. Users can subscribe to Channels in order to get notifications about changes that happen to Data Objects connected to those Channels.

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;
  }
};