CSC360: Lecture 2 (Angular2 and Typescript basics)

• Complete the Learning Path given in the Angular2 Guide

• Pick an editor. Here are some recommendations

  • Free: Visual Studio Code
  • Free: Atom
  • Trial: Sublime Text
  • Trial: Webstorm

• Assignment 2: Complete the Tour of Heroes in Angular2

  Once you are done, create a copy of your folder, delete the node_modules subfolder, and zip up the rest. Hand it in.

  NEVER HAND IN THE node_modules FOLDER: it's huge! You should follow this process for all future assignments.

  You can also use the exclude parameters of zip from the commandline:

  zip -vr handin.zip * -x "node_modules/*" "typings/*" "*/*.js" "*/*.js.map"
    adding: CHANGELOG.md	(in=371) (out=178) (deflated 52%)
    adding: Dockerfile	(in=525) (out=271) (deflated 48%)
    adding: LICENSE	(in=1078) (out=637) (deflated 41%)
    adding: README.md	(in=2319) (out=1085) (deflated 53%)
    adding: app/	(in=0) (out=0) (stored 0%)
    adding: app/app.component.ts	(in=582) (out=322) (deflated 45%)
    adding: app/main.ts	(in=128) (out=93) (deflated 27%)
    adding: index.html	(in=1200) (out=503) (deflated 58%)
    adding: package.json	(in=787) (out=361) (deflated 54%)
    adding: styles.css	(in=2305) (out=679) (deflated 71%)
    adding: tsconfig.json	(in=342) (out=189) (deflated 45%)
    adding: typings.json	(in=275) (out=138) (deflated 50%)
  total bytes=9912, compressed=4456 -> 55% savings
  

  Here's a nice article on why angular2 is great: Why Java Developers Will Embrace Angular 2 and TypeScript

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 ();
  }
}

Messing around javascript using Javascript visualizer

Messing around with angular using the angular2-quickstart code.

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)

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

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