AngularJS Provider in TypeScript

24 October 2014 - TypeScript

AngularJS samples written in TypeScript are not that common on the internet. I get frequently asked how to write an AngularJS provider in TypeScript. Here is a "Hello World" sample.

// Interface describing the members that the provider's service offers
interface IGreetingService {
getGreeting(): string;
}

// The following class represents the provider
class GreetingService implements ng.IServiceProvider {
private greeting = "Hello World!";

// Configuration function
public setGreeting(greeting: string) {
this.greeting = greeting;
}

// Provider's factory function
public $get() : IGreetingService {
return {
getGreeting: () => { return this.greeting; }
};
}
}

// Define a controller depending our provider
class ControllerNeedingProvider {
constructor($scope, GreetingService: IGreetingService) {
$scope.Greeting = GreetingService.getGreeting();
}
}

angular.module("ProviderApp", [])
// Define provider
.provider("GreetingService", GreetingService)
// Configure provider (note the suffix "Provider" here)
.config((GreetingServiceProvider: GreetingService) => {
GreetingServiceProvider.setGreeting("Hello Provider");
})
.controller("ControllerNeedingProvider", ControllerNeedingProvider);