How To Write Angular 1.5 Components with injected services in TypeScript

service: SampleService.ts

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

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 {{$}}</div>';
}class FacebookIntegrationController {public settings: any;
static $inject = ['IntegrationsService'];
constructor(public integrationService: IntegrationsService) {}
.controller('FacebookIntegrationController', FacebookIntegrationController)
.component('facebookIntegration', new FacebookIntegrationComponent());

Usage: some-other-component.html

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


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.



Freelance Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store