打字稿角度1.x ui.router答案

【问题标题】：Typescript angular 1.x ui.router打字稿角度1.x ui.router
【发布时间】：2015-09-29 01:25:42
【问题描述】：

第一次尝试在 typescript 中编写 ui.router。截至目前，我的代码如下所示：

class Configuration {
    constructor(private $stateProvider: ng.ui.IStateProvider, 
                private $urlRouterProvider: ng.ui.IUrlRouterProvider) {
        this.init();
    }

    private init(): void {
        this.$stateProvider.state("main", Configuration.defaultState());
        this.$stateProvider.state("login", Configuration.login());
        this.$urlRouterProvider.otherwise('/main');
    }

    private static defaultState(): ng.ui.IState {
        return {
            url: "/main"
            , template: "<h1>hello</h1>"
        }
    }

    private static login(): ng.ui.IState {
        return {
            url: "/login"
            , template: "login"
        }
    }
}

angular.module('smm')
    .config(($stateProvider: ng.ui.IStateProvider, 
             $urlRouterProvider: ng.ui.IUrlRouterProvider) => {
        return new Configuration($stateProvider, $urlRouterProvider)
    });

尽管编译代码看起来没问题，但路由器似乎无法正常工作，我在控制台中没有错误，也没有执行任何路由。我想这个问题很愚蠢，但我似乎无法找到它。有什么想法吗？

【问题讨论】：

标签： angularjs typescript angular-ui-router

【解决方案1】：

对我来说，您的代码按原样工作。 a working plunker 与您的代码一样。

这是 index.html

<html ng-app="smm" >

  <head>
    <title>my app</title>
    <style>ul { padding-left: 0; } li { list-style: none; }</style>
    <script data-require="angular.js@*"
            src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
    ></script>
    <script data-require="ui-router@*" 
            src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"
    ></script>
    <script src="script.js"></script>
    <script src="Config.js"></script>
  </head> 

  <body>
    <ul>
      <li><a href="#/login">/login</a>
      <li><a href="#/main">/main</a>
    </ul>

    <div ui-view=""></div>
  </body> 
</html>

这是 script.js：

var app = angular
  .module('smm', [
    'ui.router' 
  ])

Config.js 的内容可以是found here

检查工作示例here

注意，用

<html ng-app="smm" ng-strict-di>
...

我们需要：

angular.module('smm')
    .config(['$stateProvider', '$urlRouterProvider',
    ($stateProvider, $urlRouterProvider) => {
        return new Configuration($stateProvider, $urlRouterProvider)
    }]);

检查forked version here 和playground snippets here

【讨论】：

太棒了，谢谢......我认为这是一个愚蠢的错误，索引上缺少ui-view......对不起......再次感谢
如果有帮助，太好了！享受惊人的组合 - Angular、Typescript 和 UI-Router ;)