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>