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);

AngularJS Provider in TypeScript

Content

Tags

Authors

AngularJS Provider in TypeScript

Content

Tags

Authors

Related Posts

Techorama Belgium 2018 - Async Programming with JavaScript and TypeScript

Build Recap Session about Whats New in TypeScript

Resources for Learning TypeScript and Angular