AngularJS打字稿路由

发布时间：2020-12-17 17:05:36 所属栏目：安全来源：网络整理

导读：使用 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:Er

使用 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并确保我确实有一个对an??gular-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新手,所以任何帮助将不胜感激.

谢谢

潜在重复：AngularJS + TypeScript: cannot inject $routeProvider

解决方法

您需要对该模板进行一些更改才能使其生效.

Full source here

首先确保您有正确的参考.包括对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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!