您需要对该模板进行一些更改才能使其正常工作。
完整源码在这里 https://gist.github.com/scottmcarthur/9051681
首先确保您有正确的参考资料。包括参考angular-route.d.ts
/// <reference path="./typings/angularjs/angular.d.ts" />
/// <reference path="./typings/angularjs/angular-route.d.ts" />
'use strict';
// Create and register modules
var modules = ['app.controllers','app.directives', 'app.filters', 'app.services'];
modules.forEach((module) => angular.module(module, []));
要使用$routeProvider你必须包括ngRoutemodule 在你的模块中，但是因为我们不想用 Angular 注册它，因为它已经存在在那里，所以我们需要像这样之后推送模块：
// *** Push ngRoute or $routeProvider won't work ***
modules.push("ngRoute");
angular.module('app', modules);
然后你需要修复类型$routeProvider from ng.IRouteProvider to ng.route.IRouteProvider因为这个定义是错误的。
// Url routing
angular.module('app').config(['$routeProvider',
function routes($routeProvider: ng.route.IRouteProvider) { // *** $routeProvider is typed with ng.route.IRouteProvider ***
$routeProvider
.when('/', {
templateUrl: 'views/MyView.html',
controller: 'app.controllers.MyController'
})
.otherwise({
redirectTo: '/'
});
}
]);
Next TypeScript 不接受空模块。所以有export module controllers {}等等是没有意义的，因为 TSC 不会包含它们，并且它们将是未定义的并给出错误。除非您要在应用程序中定义至少一个控制器、指令、过滤器和服务。但这可以通过简单地包括来解决null;
module app {
export module controllers { null; }
export module directives { null; }
export module filters { null; }
export module services { null; }
export interface IController {}
export interface IDirective {
restrict: string;
link($scope: ng.IScope, element: JQuery, attrs: ng.IAttributes): any;
}
export interface IFilter {
filter (input: any, ...args: any[]): any;
}
export interface IService {}
/**
* Register new controller.
*
* @param className
* @param services
*/
export function registerController (className: string, services = []) {
var controller = 'app.controllers.' + className;
services.push(app.controllers[className]);
angular.module('app.controllers').controller(controller, services);
}
/**
* Register new filter.
*
* @param className
* @param services
*/
export function registerFilter (className: string, services = []) {
var filter = className.toLowerCase();
services.push(() => (new app.filters[className]()).filter);
angular.module('app.filters').filter(filter, services);
}
/**
* Register new directive.
*
* @param className
* @param services
*/
export function registerDirective (className: string, services = []) {
var directive = className[0].toLowerCase() + className.slice(1);
services.push(() => new app.directives[className]());
angular.module('app.directives').directive(directive, services);
}
/**
* Register new service.
*
* @param className
* @param services
*/
export function registerService (className: string, services = []) {
var service = className[0].toLowerCase() + className.slice(1);
services.push(() => new app.services[className]());
angular.module('app.services').factory(service, services);
}
}
现在应该可以工作了，您可以注册您的控制器、过滤器、服务和指令。例如：
module app.controllers
{
export class testCtrl implements IController
{
constructor()
{
console.log("Test Controller");
}
}
}
app.registerController('testCtrl');
当引用控制器或服务时要使用全名。 IE：
<div ng-controller="app.controllers.testCtrl"></div>
记住在你的html中引用angular-route.js after angular.js. i.e:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
