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

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

我同意使用课程没有优势。但是，您可以使用TypeScript作为配置并具有类型定义（intellisense +编译时检查），也不需要直接使用javascript。

我在同一个文件app.config.ts

中有应用配置和ui-router配置

((): 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.
    }
})();

Answer 3

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

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

3 个答案: