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?

You may also want to take a look at this AngularJS starter kit project for Visual Studio: github.com/kriasoft/angular-vs — Grief Coder
– Grief Coder, Commented Dec 17, 2012 at 23:53

fordareh · Accepted Answer · 2012-12-18 19:50:47Z

4

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

edited Dec 18, 2012 at 19:50

answered Dec 18, 2012 at 19:42

fordareh

2,9752 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Grant Steinfeld Over a year ago

should this not be in the typescript form? Like module { } etc?

user3493917 · Accepted Answer · 2015-07-08 14:56:03Z

1

You can also use ng.route.IRouteProvide

answered Jul 8, 2015 at 14:56

user3493917

211 bronze badge

1 Comment

pablito91 Over a year ago

That's exactly what worked for me. Simply couldn't find angular.RouteProvider namespace in my typings

Dan Morris · Accepted Answer · 2018-10-11 18:33:55Z

1

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

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

}

answered Oct 11, 2018 at 18:33

Dan Morris

111 bronze badge

Comments

Fenton · Accepted Answer · 2012-11-15 14:27:44Z

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...

The Angular definition describes the functions you can expect to call on an instance of an Angular class.
The RouteProvider definition describes the functions you can expect to call on an instance of a RouteProvider class
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]);

Hi Steve, I was looking for a more TypeScript approach, something like <code> module phonecat { export class RouteProvider {}}</code>

Collectives™ on Stack Overflow

TypeScript example of AngularJS $routeProvider module

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related