CSC360: Lecture 2 (Angular2 and Typescript basics)

Contents [0/7]

Homework 2 [1/7]
Homework 3 [2/7]
Demos! [3/7]
Demos! [4/7]
button and Keyboard input in angular2 [5/7]
Services [6/7]
Routing [7/7]

Homework 2 [1/7]

Homework 3 [2/7]

Assignment 3: A Simple Calculator in Angular2

Here is a controller for a simple calculator, written in Java.

Copy and paste this onto your home machine and run it.

To watch it work, you should run it and type in one character per line on the console, like this (output in red):

1
val:1 old:0 op:= isClean:false
1
val:11 old:0 op:= isClean:false
*
val:11 old:11 op:* isClean:true
2
val:2 old:11 op:* isClean:false
=
val:22 old:2 op:= isClean:true
+
val:22 old:2 op:+ isClean:true
3
val:3 old:22 op:+ isClean:false
3
val:33 old:22 op:+ isClean:false
=
val:55 old:33 op:= isClean:true

The val is what is displayed on the face of the calculator.

Your third homework is to write version in Angular2 that works like this by adapting this code to javascript and providing a view.

Your app should allow input by tapping the buttons, or by pressing the keys on a keyboard.

If you are interested in adding parentheses, see here

import java.util.Scanner;
public class ZSimpleCalculator {
  int val = 0;            // the current value
  int old = 0;            // the old value 
  char op = '=';          // the previous operation
  boolean isClean = true; // is the new value clean?
  
  public String toString () {
    return String.format ("val:%d old:%d op:%c isClean:%b", this.val, this.old, this.op, this.isClean);
  }
  public void process (char c) {
    if (isClear (c)) {

      this.val = 0;
      this.old = 0;
      this.op = '=';
      this.isClean = true;
      
    } else if (isDigit (c)) {
      
      int d = evalDigit (c);
      if (this.isClean) {
        // start a new value
        this.old = this.val;  
        this.val = d;
      } else {
        // add to the existing value
        this.val = (this.val * 10) + d;
      }
      this.isClean = false;
      
    } else if (isOp (c)) {
      
      int v = evalOp (this.op, this.old, this.val);
      if (! this.isClean) {
        // start a new value
        this.old = this.val;  
      }
      this.val = v;
      this.op = c;
      this.isClean = true;
      
    }
  }

  public static boolean isOp (char c) {
    switch (c) {
    case '=' : return true;
    case '+' : return true;
    case '-' : return true;
    case '*' : return true;
    }
    return false;
  }
  public static int evalOp (char c, int m, int n) {
    switch (c) {
    case '=' : return n; // m is the old value, n is the new value
    case '+' : return m + n;
    case '-' : return m - n;
    case '*' : return m * n;
    }
    throw new Error ();
  }
  public static boolean isDigit (char c) {    
    return c >= '0'  && c <= '9';
  }
  public static int evalDigit (char c) {    
    return c - '0';
  }
  public static boolean isClear (char c) {    
    return c == 'c';
  }
  public static void main (String[] args) {
    ZSimpleCalculator eval = new ZSimpleCalculator ();
    Scanner in = new Scanner (System.in);
    while (in.hasNext ()) {
      String s = in.nextLine ();
      for (int i = 0; i < s.length(); i++){
          char c = s.charAt(i);  
          eval.process (c);
          System.err.println (eval.toString ());
      }
    }
    in.close ();
  }
}

Demos! [3/7]

Messing around javascript using Javascript visualizer

Demos! [4/7]

Messing around with angular using the angular2-quickstart code.

button and Keyboard input in angular2 [5/7]

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)

Services [6/7]

Looking at first few sections of the angular tutorial. Interesting things are services, routing, promises. Services and Routing today.

Don't use global variables!

Use services instead

Routing [7/7]

Routes help you get around in an app.

Routing also replaces some glpbal variables, keeping track of the current state.


Revised: 2008/03/17 13:01