How can I add ui-router stateProvider configuration to my application with Typescript?

Question

Before when not using Typescript I was adding my ui-router state information like this:

app.config([
    \'$httpProvider\',
    \'$locationProvider\',
    \'$sce         


        

Answer 1

You wouldn't gain an advantage from using a class here because you don't need to use this or add properties to it in the config function. Just use a function like its JavaScript (TypeScript won't complain).

Answer 2

This is the way I am defining the ui-router states .. in typescript (as other parts are in TS...):

module MyModule
{
    export class MyConfig
    {
        constructor(private $stateProvider: ng.ui.IStateProvider
            , private $urlRouterProvider: ng.ui.IUrlRouterProvider   
            ... // other dependencies)
        {
            this.init();
        }
        private init(): void
        {
            this.$stateProvider.state("App", <ng.ui.IState>
            {
                abstract: true,
                .... // more settings
            });

            // more states
        }
    }
}

angular.module('MyModule')
  .config(
    ["$stateProvider", "$urlRouterProvider", // more dependencies
        ($stateProvider, $urlRouterProvider) =>
        {
            return new MyModule.MyConfig($stateProvider, $urlRouterProvider);
        }
    ]);

Answer 3

I agree there is no advantage by using a class. However you can use TypeScript for the config and have type definitions (intellisense + compile time checking), no need to use javascript directly either.

I have the app configuration and the ui-router configuration in the same file app.config.ts

((): void => {
    'use scripts';

    angular
        .module('app')
        .config(config);

    config.$inject = [
        '$locationProvider',
        '$stateProvider',
        '$urlRouterProvider'
    ];

    function config($locationProvider: ng.ILocationProvider,
        $stateProvider: angular.ui.IStateProvider,
        $urlRouterProvider: angular.ui.IUrlRouterProvider) {

        //html5 removes the need for # in URL
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });

        $urlRouterProvider.otherwise('/');

        //angular-ui-router for multiple views
        $stateProvider
            .state('index', <ng.ui.IState>{
                url: "/",
                views: {
                    "viewA": {
                        templateUrl: "app/home/homenav.html"
                    },
                    "viewB": {
                        templateUrl: "app/home/home.html"
                    }
                }
            });
            //more states here.
    }
})();