使用
following template配置AngularJS / Typescript Web应用程序并收到以下错误.
The following error is appearing when I run the application: 0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
我检查了this thread并确保我确实有一个对angular-route.js的引用
app.ts – Easier version to view + index.html
/// <reference path="./typings/angularjs/angular.d.ts" />
'use strict';
// Create and register modules
var modules = ['app.controllers','app.directives','app.filters','app.services'];
modules.forEach((module) => angular.module(module,[]));
angular.module('app',modules);
// Url routing
angular.module('app').config(['$routeProvider',function routes($routeProvider: ng.IRouteProvider) {
$routeProvider
.when('/',{
templateUrl: 'views/MyView.html',controller: 'app.controllers.MyController'
})
.otherwise({
redirectTo: '/'
});
}
]);
module app {
export module controllers {}
export module directives {}
export module filters {}
export module services {}
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);
}
}
我是一个TS / Angular新手,所以任何帮助将不胜感激.
谢谢
解决方法
您需要对该模板进行一些更改才能使其生效.
首先确保您有正确的参考.包括对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',[]));
要使用$routeProvider,你必须在模块中包含ngRoute模块,但是因为我们不想用angular注册它,因为它已经存在,所以我们需要按照这样推送模块：
// *** Push ngRoute or $routeProvider won't work ***
modules.push("ngRoute");
angular.module('app',modules);
然后你需要将$routeProvider的类型从ng.IRouteProvider修复为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('/',controller: 'app.controllers.MyController'
})
.otherwise({
redirectTo: '/'
});
}
]);
下一个TypeScript不接受空模块.因此,拥有导出模块控制器{}等是没有意义的,因为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,services);
}
}
现在应该可以使用,您可以注册您的控制器,过滤器,服务和指令.如：
module app.controllers
{
export class testCtrl implements IController
{
constructor()
{
console.log("Test Controller");
}
}
}
app.registerController('testCtrl');
引用控制器或服务时使用全名.即：
<div ng-controller="app.controllers.testCtrl"></div>
请记住在你的html中引用angular.js之后的angular-route.js.即：
<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>
