What is best practice to create an AngularJS 1.5 component in Typescript?

Question

I am experimenting with the .component() syntax in Angular 1.5.

It seems that the latest fashion is to code the controller in-line in the component rather that in a separate file, and I can see the advantage of that given that the component boilerplate is minimal.

The problem is that I having been coding my controllers as typescript classes and would like to continue doing so because that seems to be consistent with Angular2.

My best effort is something like this:

export let myComponent = {   template: ($element, $attrs) => {     return [       `<my-html>Bla</my-html>`     ].join('')   },   controller: MyController }; class MyController {  } 

It works, but it's not elegant. Is there a better way?

Answer 1

If you wanted to completely adopt an Angular 2 approach, you could use:

module.ts

import { MyComponent } from './MyComponent';  angular.module('myModule', [])   .component('myComponent', MyComponent); 

MyComponent.ts

import { Component } from './decorators';  @Component({   bindings: {     prop: '<'   },   template: '<p>{{$ctrl.prop}}</p>' }) export class MyComponent {     prop: string;     constructor(private $q: ng.IQService) {}     $onInit() {      // do something with this.prop or this.$q upon initialization    } } 

decorators.ts

/// <reference path="../typings/angularjs/angular.d.ts" />  export const Component = (options: ng.IComponentOptions) => {   return controller => angular.extend(options, { controller }); }; 

Answer 2

I am using a simple Typescript decorator to create the component

function Component(moduleOrName: string | ng.IModule, selector: string, options: {   controllerAs?: string,   template?: string,   templateUrl?: string }) {   return (controller: Function) => {     var module = typeof moduleOrName === "string"       ? angular.module(moduleOrName)       : moduleOrName;     module.component(selector, angular.extend(options, { controller: controller }));   } } 

so I can use it like this

@Component(app, 'testComponent', {   controllerAs: 'ct',   template: `     <pre>{{ct}}</pre>     <div>       <input type="text" ng-model="ct.count">       <button type="button" ng-click="ct.decrement();">-</button>       <button type="button" ng-click="ct.increment();">+</button>     </div>   ` }) class CounterTest {   count = 0;   increment() {     this.count++;   }   decrement() {     this.count--;   } } 

You can try a working jsbin here http://jsbin.com/jipacoxeki/edit?html,js,output