CSC436: Lecture 2 (Angular2 and Typescript basics)

Get VSCode or Webstorm. Here are some code snippets for VSCode. My User settings for VSCode are:

{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "**/*.js.map": {"when": "$(basename)"},
        "**/*.js": {"when": "$(basename).ts"}
    },
    "editor.tabSize": 2,
    "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

Get chrome canary

Get node

Do this:

npm -g install typescript@next
npm -g install typings
npm -g install angular-cli

Angular2 resources

Textbook for this class

Official Docs

AngularClass

Egghead courses

Mixing angular and other thigs

Material Design

Charts

Google maps

D3

Sortable.js (See also here)

Ag Grid

Angular2 Grid

Assignment 2: Repeat the calculator assignment, but do it in angular.

Here is a starter component with a button and keyboard input:

import {Component} from 'angular2/core';

@Component({
  host: { '(window:keypress)': 'keyHandler($event)' },
  selector: 'my-app',
  template: `
      <h2>{{title}} : {{x}}</h2>
      <button (click)="f()">press me</button>
      
    `,
})
export class AppComponent {
  title = "hello";
  x = 41;
  f() { this.x = this.x + 1; return this.x; }
  keyHandler(event) {
    switch (event.keyCode) {
      case 43:
        this.x = 4000;
        break;
      default:
        this.x = event.keyCode;
        break;
    }
    console.log(event, event.keyCode, event.keyIdentifier);
  }
}

(source for keyboard input)

Revised: 2008/03/17 13:01