如何使用Typescript将ui-router stateProvider配置添加到我的应用程序？

Question

在不使用Typescript之前,我正在添加我的ui-router状态信息,如下所示:

app.config([
    '$httpProvider',
    '$locationProvider',
    '$sceProvider',
    '$stateProvider',
    appConfig
]);

function appConfig(
    $httpProvider, 
    $locationProvider,
    $sceProvider,
    $stateProvider
    ) {

    $locationProvider.html5Mode(true);
    $sceProvider.enabled(false);

    var admin = {
        name: 'admin',
        url: '/admin',
        views: {
...
        }
    };

现在我正在使用Typescript我假设我应该把它编码成一个类.但是如何将该类添加到我的应用程序中？我已经有了这个代码,我添加了一个控制器:

var app = angular.module('app',
    [
    ])
    .controller('appController', AppController);

我试图将状态信息添加为.config但似乎只接受函数作为参数.

有人能告诉我如何将ui-router的状态信息添加到我的应用程序中吗？

Answer 1

这是我ui-router在typescript中定义状态的方式(因为其他部分在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 2

在这里使用类不会获得优势，因为您不需要this在函数中使用类或向其添加属性config。只需使用像 JavaScript 这样的函数（TypeScript 不会抱怨）。