msfrisbie

<div>
  #{{ player.number }} {{ player.name }}
</div>

msfrisbie

// JS definition
var SignupElementProto = Object.create(HTMLElement.prototype);
var SignupElement = document.registerElement('signup-page', {
  prototype: SignupElementProto
  // element property definition(s)
});

<signup-page></signup-page>

OR

msfrisbie

http://www.html5rocks.com/en/tutorials/es7/observe/
http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/
http://eisenbergeffect.bluespire.com/all-about-angular-2-0/
http://www.w3.org/wiki/WebComponents/
https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit
https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014
http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/
https://docs.google.com/document/d/1kpuR512G1b0D8egl9245OHaG0cFh0ST0ekhD_g8sxtI/edit#heading=h.xgjl2srtytjt
https://docs.google.com/presentation/d/1Gv-dvU-yy6WY7SiNJ9QRo9XayPS6N2jtgWezdRpoI04/present?slide=id.g108668b30_040
http://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475

msfrisbie

https://github.com/angular/router
https://github.com/angular/router/tree/master/examples


Will be backported to 1.3 soon!


router.configure(config => {
  config.map([
    { pattern: ['', 'intro'],   componentUrl: 'intro' },

msfrisbie

General proposed syntax (via Rob Eisenberg):

  property="{{expression}}" -- one way binding from a model to the property on the element, identified by {{}}
  on-event="{{expression}}" -- adds an event handler to the event which executes the expression, identified by the on- prefix
  ${expression}             -- string interpolation within HTML content and attributes (based on ES6 syntax)
  
  
  
This is necessitated by the following tenets:

msfrisbie

// your mileage may vary!!!!



// Component Directive

    @ComponentDirective({
        // CSS selector which is used to match this directive to
        selector:'tab-container',
        // template dependencies

msfrisbie

// AtScript
import {Component} from 'angular';  
import {Server} from './server';

@Component({selector: 'foo'})
export class MyComponent {  
  constructor(server:Server) {
      this.server = server;
  }
}