TypeScript example of AngularJS $routeProvider module

I am currently working up a simple couchapp that uses AngularJS and have decided to use TypeScript

I am basing it off of the AngularJS angular-phonecat tutorial. I have most of the application converted to idiomatic TypeScript. I have based this off of the pwalat / Piotr.Productlist bits1, however they only cover Controllers and Models.

I am struggling to figure out how to create the correct TypeScript equivalent for the angular router $routeProvider

    //app/js/app.js[2]

    angular.module('phonecat', []).
      config(['$routeProvider', function($routeProvider) {
      $routeProvider.
          when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
          when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
          otherwise({redirectTo: '/phones'});
    }]);

I know it needs to be a module {} of some sort?

The angular-vs team has some stuff that is really worth looking at:

https://github.com/kriasoft/angular-vs/blob/master/App/Scripts/App.ts

...in this case, they do a sort of a cast on the initial string in the any array passed to config that avoid the trouble that Typescript seems to have figuring out which version of config to use (.config(<any>'$routeProvider'...).

Example:

angular
.module('phonecat', [])
.config([
    <any>'$routeProvider', 
    ($routeProvider: angular.RouteProvider) {
        $routeProvider
            .when('/phones', { templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl })
            .when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl })
            .otherwise({ redirectTo: '/phones' });
    }
]);

...I should mention, that I installed the AngularJS TypeScript declations source from here:

http://nuget.org/packages/Schmulik.AngularTS

..and then reference them at the top of my routing file:

/// <reference path="../AngularTS/angular.d.ts" />
/// <reference path="../AngularTS/ng/route.d.ts" />

I haven't looked up AngularJS to find out all the details, but hopefully this will help you with the process of declaring an existing library, which is more useful than just giving you an AngularJS definition.

I have created these definitions based on your usage. The important bits are...

  1. The Angular definition describes the functions you can expect to call on an instance of an Angular class.

  2. The RouteProvider definition describes the functions you can expect to call on an instance of a RouteProvider class

  3. I then declare angular and $routeProvider and tell the compiler they are instances of the classes defined in the previous steps.

Disclaimer: because I don't know what the arguments in your example represent I have used names like param1 but these should be updated to reflect what is actually expected, for example filePath: string - or whatever it actually is.

Here is the example:

// I don't know what the param names should be, so they
// need to be changed to sensible names
declare class Angular {
    module (param1: string, param2: any[]) : Angular;
    config(param1: any[]) : Angular;
}

declare class RouteProvider {
    when(param1: string, param2: any) : RouteProvider;
    otherwise(param1: any) : RouteProvider;
}

declare var angular: Angular;
declare var $routeProvider: RouteProvider;

// These are just because I don't know where you define them...
declare var PhoneDetailCtrl: any;
declare var PhoneListCtrl: any;

function myFunction ($routeProvider: RouteProvider) {
    $routeProvider.
    when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
    when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
    otherwise({redirectTo: '/phones' });
}

angular
    .module('phonecat', [])
    .config(['$routeProvider', myFunction]);

You can also use ng.route.IRouteProvide