lesson9.md

#Go over

1. deferred promise pattern
2. Factory, Service
3. Directives
4. Filters

#New

1. Events

   1. DOM event http://www.w3schools.com/jsref/dom_obj_event.asp

       document.addEventListener('myevent', function() {
       	console.log('received 1');
       });
      
       document.addEventListener('myevent', function() {
       	console.log('received 2');
       });
       
       document.dispatchEvent(new Event('myevent'));
      

   2. AngularJS event https://docs.angularjs.org/guide/scope

       angular.module('eventExample', [])
       .controller('EventController', ['$scope', function($scope) {
         $scope.count = 0;
         $scope.$on('MyEvent', function() {
           $scope.count++;
         });
         
         //$emit('MyEvent');
         //$broadcast('MyEvent');
       }]);
      

   3. ExtJS event

      1. Ext.util.Observable
      2. enableBubble
      3. addListener, addManagedListener, on, mon
      4. fireEvent

2. Typescript

   1. compile to javascript languages
      1. CoffeeScript
      2. GWT
      3. Dart
      4. Many others
   2. Advantages
      1. Backed by Microsoft
      2. Developed by Anders Hejlsberg
      3. Superset of Javascript (use existing librarys)
      4. ECMAScript 6 standard (forward compatiblity)
      5. Relation with AngularJS
      6. Debugging

3. Install

   1. Node.js
   2. npm install -g typescript

4. Features

   1. types: number, string, boolean, Array, Enum, Void, function, any

       var num: number = 1;
       var str: string = 'string';
       var bool: boolean = false;
       var arr: Array<string> = ['abc', 'ddd'];
       var arrNum: number[] = [1,2,3];
       enum Day {SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY};
       var day: Day = Day.MONDAY;
       var any: any = 3;
       any = 'foo';
       var func: (a:number, b:number)=>number;
       function add(left: number, right: number): number {
       	return left + right;
       }
       func = add;
      

   2. Function

      1. Optional parameters

          	function foo(param1: number, param2?: number) {
          		// ...
          	}
         

      2. Default parameters values

          	function foo(param1: number, param2 = 0) {
          		// ...
          	}
         

   3. Declaration files

   4. Interface

      1. Properties don't have to be in order

      2. Properties must be present and match the types

      3. Optional properties prop?: string

          interface IFormController {
         
              /**
               * Indexer which should return ng.INgModelController for most properties but cannot because of "All named properties must be assignable to string indexer type" constraint - see https://github.com/Microsoft/TypeScript/issues/272
               */
              [name: string]: any;
         
              $pristine: boolean;
              $dirty: boolean;
              $valid: boolean;
              $invalid: boolean;
              $submitted: boolean;
              $error: any;
              $addControl(control: INgModelController): void;
              $removeControl(control: INgModelController): void;
              $setValidity(validationErrorKey: string, isValid: boolean, control: INgModelController): void;
              $setDirty(): void;
              $setPristine(): void;
              $commitViewValue(): void;
              $rollbackViewValue(): void;
              $setSubmitted(): void;
              $setUntouched(): void;
          }
         

   5. Class

      1. Members are public by default

      2. Private members are only at compilation stage

          class Animal {
          	private foo: boolean;
              name:string; // public by default
              constructor(theName: string) { this.name = theName; }
              move(meters: number = 0) {
                  alert(this.name + " moved " + meters + "m.");
              }
          }
         
          class Snake extends Animal {
              constructor(name: string) { super(name); }
              move(meters = 5) {
                  alert("Slithering...");
                  super.move(meters);
              }
          }
         
          class Horse extends Animal {
              constructor(name: string) { super(name); }
              move(meters = 45) {
                  alert("Galloping...");
                  super.move(meters);
              }
          }
         
          var sam = new Snake("Sammy the Python");
          var tom: Animal = new Horse("Tommy the Palomino");
         
          sam.move();
          tom.move(34);
         

      3. Lambda and this

          	return ()=> {
          	//return function() {
          		console.log(this);
          	}
         

   6. Module

      1. namespace, package
      2. export