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

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', {
                url: "/",
                views: {
                    "viewA": {
                        templateUrl: "app/home/homenav.html"
                    },
                    "viewB": {
                        templateUrl: "app/home/home.html"
                    }
                }
            });
            //more states here.
    }
})();