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 {{$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());

Usage: some-other-component.html

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

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.

--

--

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