3

Typescript ベースの Angular アプリケーションにルーティングを適用しようとしています。アプリは、次のようなコードが挿入された $routeProvider を取得する必要があります。

var app = angular.module("MyApp", ["ui.bootstrap"]);
// app.service's and controller's here...

app.config(["$routeProvider",
    function ($routeProvider: ng.IRouteProvider) {
        $routeProvider
            .when("/", {
                controller: MyApp.Controllers.ItemsController,
                templateUrl: "/Items.html"
            })
            // ... other routes ...
            .otherwise({
                redirectTo: "/"
            });
}]);

とにかく、アプリケーションを起動すると、 angular から$routeProviderProviderという名前のプロバイダーが見つからないという例外が発生します。

Error: Unknown provider: $routeProviderProvider <- $routeProvider at Error (<anonymous>)
    at http://.../Scripts/angular.js:2734:15
    at Object.getService [as get] (http://.../Scripts/angular.js:2862:39)
    at http://.../Scripts/angular.js:2739:45
    at getService (http://.../Scripts/angular.js:2862:39)
    at invoke (http://.../Scripts/angular.js:2880:13)
    at Object.instantiate (http://.../Scripts/angular.js:2914:23)
    at $get (http://.../Scripts/angular.js:4805:24)
    at $get.i (http://.../Scripts/angular.js:4384:17)
    at forEach (http://.../Scripts/angular.js:137:20) undefined angular.js:5754

angular ソース (1.0.7) を覗いてみると、これは、instanceInjectorが作成される 2737 行で、値が "Provider" であるproviderSuffixという名前の変数を要求されたプロバイダー名 (ここでは「$routeProvider」)。したがって、これは例外になります。ただし、正しい名前は「$routeProvider」である必要があります。コードで単に「$route」に変更すると、ビルド名が「$routeProvider」になったため、このエラーは期待どおりに消えます。しかし、サービス「$route」が定義されていないことを示す別の例外が発生します。それで、これを解決するにはどうすればいいですか？

4

1 に答える 1

2

更新された回答： 以下のコメントで述べたように

たとえば、コントローラでは無効です。参考までに、「ProviderProvider」について話しているセクションは、ログを記録するためだけのものであり、内部で依存関係を検索する方法ではありません

そして、あなたのコードで見つかりました:

export class MainController {
    static $inject = ["$scope", "$routeProvider"];

    constructor(private $scope: IMainScope,
        private $routeProvider: ng.IRouteProvider) {
    }
}

コントローラーに routeProvider を含めることはできません。app.config はエラーの原因ではありません。コントローラーを次のように変更すると、エラーはなくなります。

export class MainController {
    static $inject = ["$scope"];

    constructor(private $scope: IMainScope) {
    }
}

さらに、コントローラーを使用する場合は、独自のスコープを実装しないことをお勧めします。理由は次のとおりです: http://www.youtube.com/watch?v=WdtVn_8K17E&feature=youtu.be&t=5m36s

私と同じように angular + typescript を楽しんでいただければ幸いです :)

于 2013-08-07T16:34:34.807 に答える