angularjs - AngularJS $routeProvider 模块的 TypeScript 示例

Question

我目前正在开发一个使用 AngularJS 并决定使用 TypeScript 的简单 couchapp

我基于 AngularJS angular-phonecat 教程。我已将大部分应用程序转换为惯用的 TypeScript。我基于 pwalat/Piotr.Productlist 位 1 ，但是它们仅涵盖 Controller 和模型。

我正在努力弄清楚如何为 Angular 路由器创建正确的 TypeScript 等效项 $routeProvider

    //app/js/app.js[2]

    angular.module('phonecat', []).
      config(['$routeProvider', function($routeProvider) {
      $routeProvider.
          when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
          when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
          otherwise({redirectTo: '/phones'});
    }]);

我知道它需要是某种模块{}？

Answer 1

angular-vs 团队有一些非常值得一看的东西:

https://github.com/kriasoft/angular-vs/blob/master/App/Scripts/App.ts

...在这种情况下，他们对传递给配置的任何数组中的初始字符串进行了某种类型的转换，避免了 Typescript 似乎已经弄清楚要使用哪个版本的配置的麻烦(.配置(<任何>'$routeProvider'...)。

例子:

angular
.module('phonecat', [])
.config([
    <any>'$routeProvider', 
    ($routeProvider: angular.RouteProvider) {
        $routeProvider
            .when('/phones', { templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl })
            .when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl })
            .otherwise({ redirectTo: '/phones' });
    }
]);

...我应该提一下，我从这里安装了 AngularJS TypeScript declations 源:

http://nuget.org/packages/Schmulik.AngularTS

..然后在我的路由文件的顶部引用它们:

/// <reference path="../AngularTS/angular.d.ts" />
/// <reference path="../AngularTS/ng/route.d.ts" />