TypeScript TypeScript with AngularJS Component
Example
For an easier transition to Angular 2, it's recommended to use Component, available since Angular 1.5.8
myModule.ts
import { MyModuleComponent } from "./components/myModuleComponent";
import { MyModuleService } from "./services/MyModuleService";
angular
.module("myModule", [])
.component("myModuleComponent", new MyModuleComponent())
.service("myModuleService", MyModuleService);
components/myModuleComponent.ts
import IComponentOptions = angular.IComponentOptions;
import IControllerConstructor = angular.IControllerConstructor;
import Injectable = angular.Injectable;
import { MyModuleController } from "../controller/MyModuleController";
export class MyModuleComponent implements IComponentOptions {
public templateUrl: string = "./app/myModule/templates/myComponentTemplate.html";
public controller: Injectable<IControllerConstructor> = MyModuleController;
public bindings: {[boundProperty: string]: string} = {};
}
templates/myModuleComponent.html
<div class="my-module-component">
{{$ctrl.someContent}}
</div>
controller/MyModuleController.ts
import IController = angular.IController;
import { MyModuleService } from "../services/MyModuleService";
export class MyModuleController implements IController {
public static readonly $inject: string[] = ["$element", "myModuleService"];
public someContent: string = "Hello World";
constructor($element: JQuery, private myModuleService: MyModuleService) {
console.log("element", $element);
}
public doSomething(): void {
// implementation..
}
}
services/MyModuleService.ts
export class MyModuleService {
public static readonly $inject: string[] = [];
constructor() {
}
public doSomething(): void {
// do something
}
}
somewhere.html
<my-module-component></my-module-component>
