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

【问题标题】：How can I add ui-router stateProvider configuration to my application with Typescript?如何使用 Typescript 将 ui-router stateProvider 配置添加到我的应用程序？
【发布时间】：2014-09-24 06:02:49
【问题描述】：

在不使用 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 的状态信息添加到我的应用程序中？

【问题讨论】：

标签： angularjs typescript

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是我在打字稿中定义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);
        }
    ]);

【讨论】：

【解决方案3】：

我同意使用类没有任何优势。但是您可以使用 TypeScript 进行配置并具有类型定义（智能感知 + 编译时检查），也无需直接使用 javascript。

我在同一个文件app.config.ts有app配置和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.
    }
})();

【讨论】：