robwormald

const helloWorld = (props) => ngHtml`<h1>Hello ${props.name}</h1>`

const TodoItemTemplate = props => ngHtml`<li>${props.$index} - ${props.name}</li>`

function TodoAppComponent(){
  const todoService = inject(TodoService);
  
  return ngHtml`
     <h3>Todos</h3>
     <ul>${ngRepeat(todoService.todos, TodoItemTemplate)}</ul>`

robwormald

(function() {
  console.log('innit.start')

  

  env = (function() {
  var flags = {}, ua = navigator.userAgent, el = document.createElement('div'), video = document.createElement('video'), audio = document.createElement('audio'), root = document.documentElement, i
  function flag(names) {
    names = names.split(' ')
    for (i = 0; i < names.length; i++)

robwormald

@Component({
  selector: 'wt-greeting',
  template: (ctx: WtGreeting) => ngHtml`<h1>Hello ${uppercase(ctx.name)}</h1>`
})
class WtGreeting {
  @Input() name: string;
}


@Component({

robwormald

customElements.define('app-shell', class extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <h1>App</h1>
      <slot></slot>
    `
  }
});

robwormald

import node from 'rollup-plugin-node-resolve'
import buildOptimizer from '@angular-devkit/build-optimizer/src/build-optimizer/rollup-plugin'
import terser from 'rollup-plugin-terser'

export default {
	input: {
		app: './lib/app.js'
	},
	output: {
		dir: 'public'

robwormald

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved. 
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0  
 
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 
MERCHANTABLITY OR NON-INFRINGEMENT. 

robwormald

Angular2 + JSPM cheat sheet

First time setup

• install jspm beta: npm install -g jspm@beta
• set up your project: jspm init
• install dependencies: jspm install angular2 reflect-metadata zone.js es6-shim

This will create a jspm_packages folder, and a config.js file.

Open the config.js file - this file manages options for the System.js loader - tweak it as appropriate

robwormald

/**
 * AuthController
 *
 * @module		:: Controller
 * @description	:: Contains logic for handling auth requests.
 */

var passport = require('passport');
var GoogleStrategy = require('passport-google').Strategy;

robwormald

If you're using SystemJS in the browser, you'll want to update your System config to point at the bundles, if you're not already.

System.config({
  //use typescript for simple compilation (no typechecking)
  //transpiler: 'typescript',
  //typescript compiler options
  //typescriptOptions: {
    //emitDecoratorMetadata: true
  //},

robwormald

Thinking about tagged template literals and HTML templating.

(Disclaimer: I work on the Angular team, but this isn't something the Angular team is considering (yet). This is simply me capturing some thoughts...)

ES2015 added Template Literals to JavaScript (Template Literals is the current term, they were known as "Template Strings" in the first edition)

They're useful for all kinds of things, the most obvious of which is interpolating values in a much more concise way than concatting strings together: