AngularJS打字稿路由 [英] AngularJS Typescript Routing

问题描述

现在用的是下面的模板配置AngularJS /打字稿Web App和收到以下错误。

Am using the following template to configure a AngularJS/Typescript web app and receiving the following error.

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.

我已签<一个href=\"http://stackoverflow.com/questions/18481863/failed-to-instantiate-module-injectorunpr-unknown-provider-routeprovider\">this螺纹并确保我确实有角route.js参考

I have checked this thread and ensured that I do indeed have a reference to angular-route.js

app.ts - 版本更容易查看+的index.html

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 /角新手，因此任何帮助将不胜AP preciated。

Am a bit of a TS/Angular newbie so any help would be greatly appreciated.

感谢

潜在的重复：<一href=\"http://stackoverflow.com/questions/18100971/angularjs-typescript-cannot-inject-routeprovider\">AngularJS +打字稿：不能注入$ routeProvider

推荐答案

您需要做出该模板进行一些更改，以得到它的工作。

You need to make a few changes to that template to get it to work.

首先确保您有正确的引用。包括参照角route.d.ts

First ensure you have the correct references. Including a reference to 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 您必须包含在模块中的 ngRoute 模块，而是因为我们不'不想用角来注册它，因为它已经存在那里，我们需要推后的模块是这样的：

To use the $routeProvider you must have included the ngRoute module in your modules, but because we don't want to register it with angular, because it already exists there, we need to push the module afterwards like this:

// *** Push ngRoute or $routeProvider won't work ***
modules.push("ngRoute");

angular.module('app', modules);

然后，你需要从 ng.IRouteProvider 修复 $ routeProvider 的类型 ng.route.IRouteProvider 为这个定义是错误的。

Then you need to fix the type of $routeProvider from ng.IRouteProvider to ng.route.IRouteProvider as that definition is wrong.

// 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: '/'
            });
    }
]);

接下来打字稿将不接受空模块。因此，有输出模块控制器{} 等是没有意义的，因为TSC将不包括他们，他们将不确定给人错误。除非你在你的应用程序来定义至少一个控制器，指令，过滤器和服务。但是，这是简单地解决了包括空;

Next TypeScript won't accept empty modules. So having export module controllers {} etc is pointless, because TSC won't include them, and they will be undefined giving errors. Unless you were to define at least one controller, directive, filter and service in your app. But this is solved by simply including 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);
    }
}

这是现在应该工作，您可以注册控制器，过滤器，服务和指令。如：

That should now work and you can register your controllers, filters, services and directives. Such as:

module app.controllers
{
    export class testCtrl implements IController
    {
        constructor()
        {
            console.log("Test Controller");
        }
    }
}

app.registerController('testCtrl');

在引用控制器或服务使用的全名。即：

When referencing a controller, or service to use the full name. i.e:

<div ng-controller="app.controllers.testCtrl"></div>

在HTML记住要引用角route.js 在 angular.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>

这篇关于AngularJS打字稿路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！