How To Write Angular 1.5 Components with injected services in TypeScript

In this article I will briefly describe how to create an AngularJS 1.5 Component in TypeScript and how to inject services into this component.

Components are a good preparation if you plan to migrate to Angular 2.

service: SampleService.ts

class IntegrationsService {
  static $inject = ['$q'];
  constructor(protected $q: ng.IQService) {}
}
angular.module('integrations').service('IntegrationsService', IntegrationsService);

Here we create the angular service and inject $q as dependency. The most important thing to note: the call to angular.module.service must be at the end of the file, because the typescript compiler transpiles the class to a variable without forward declaration. Placing the call at the top of the file will result in hard to debug error: “[ng:areq] Argument ‘fn’ is not a function, got undefined”.

Component: SampleComponent.ts

class FacebookIntegrationComponent implements ng.IComponentOptions {
  public bindings: any;
  public controller: any;
  public template: string;
  constructor() {
    this.bindings = {
      settings: '<',
    };
    this.controller = FacebookIntegrationController;
    this.template = '<div>fb integration component {{$ctrl.settings.foo}}</div>';
  }
}
class FacebookIntegrationController {
public settings: any;
  static $inject = ['IntegrationsService'];
  constructor(public integrationService: IntegrationsService) {}
}
angular.module('integrations')
  .controller('FacebookIntegrationController', FacebookIntegrationController)
  .component('facebookIntegration', new FacebookIntegrationComponent());

Here we create both the Component and ComponentController in one file. Here its also important to place the calls to angular.module at the end of the file. The bindings in the component constructor are almost equal to directive scope. For a complete list of options see https://docs.angularjs.org/guide/component . In facebook controller we inject the previously defined settings service.

Inside the template we can access the controller through the $ctrl variable.

Usage: some-other-component.html

<div>
  <facebook-integration settings="settingsObject"></facebook-integration>
</div>

Inside some other component or any html template we can use the new component like directives. Here we also pass a settingsObject.

Summary

That was my quick description how I set up an Angular 1.5 component in typescript. Its pretty simplified. Of course you need to run the typescript compiler and either concat the result or use a module loader.

I’m curious how you are creating components with angular 1.5 and typescript. Please comment if you have some suggestions.