TypeScript example of AngularJS $routeProvider module

Question

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?

Answer 1

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" />

Answer 2

You can also use ng.route.IRouteProvide

Answer 3

I found the answer here: http://morrisdev.com/2016/01/angular-controllers-with-typescript/

interface IRouteParams extends ng.route.IRouteParamsService {
userId: number;

}