CSC436: Lecture 2 (Angular2 and Typescript basics)

Contents [0/5]

Tooling [1/5]
Angular2 resources [2/5]
Mixing angular and other thigs [3/5]
Homework 2 [4/5]
button and Keyboard input in angular2 [5/5]

Tooling [1/5]

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 [2/5]

Angular2 resources

Textbook for this class

Official Docs

AngularClass

Egghead courses

Mixing angular and other thigs [3/5]

Mixing angular and other thigs

Material Design

Charts

Google maps

D3

Sortable.js

(See also here)

Ag Grid

Angular2 Grid

Homework 2 [4/5]

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

button and Keyboard input in angular2 [5/5]

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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