AngularJS with TypeScript

https://www.notion.so/AngularJS-with-TypeScript-80e90b81b7114807aac19e569982e7ca

Components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
class HerosComponentController implements ng.IComponentController {
  public static $inject = ['$log', '$scope', '$document', '$element'];
  public title: string;
  public heros: IHero[];
  public onItemSelect: any;

  constructor(
    private $log: ng.ILogService,
    private $scope: ng.IScope,
    private $document: ng.IDocumentService,
    private $element: ng.IRootElementService,
  ) { }

  public $onInit () { }
  
  public $onChanges(changes: angular.IOnChangesObject): void { }
  
  public selectItem(item: IHero, event: any) {
    if (this.onItemSelect && typeof this.onItemSelect === 'function') {
      this.onItemSelect({
        data: item,
      });
    }
  }
}

class HerosComponent implements ng.IComponentOptions {

  public controller: ng.Injectable<ng.IControllerConstructor>;
  public controllerAs: string;
  public template: string;
  public bindings: any;

  constructor() {
    this.controller = HerosComponentController;
    this.controllerAs = "$ctrl";
    this.template = `
      <ul>
        <li></li>
        <li ng-click="$ctrl.selectItem(hero, $event)" ng-repeat="hero in $ctrl.heros"></li>
      </ul>
    `;
    this.bindins = {
      title: '@',
      heros: '<',
      onItemSelect: '&',
    };
  }
}

angular
  .module("mySuperAwesomeApp", [])
  .component("heros", new HerosComponent());

angular.element(document).ready(function() {
  angular.bootstrap(document, ["mySuperAwesomeApp"]);
});
1
<heros title="Title" heros="$ctrl.heros" on-item-select="$ctrl.select(data)"></heros>
This post is licensed under CC BY 4.0 by the author.