angularjs - AngularJS の動的ルーティング - $routeProvider を設定する前にサーバーからデータを取得できますか?

Question

上のすべてのルートを設定する前に、サーバーをヒットさせてデータを取得する方法はあります$routeProviderか? このリモートデータに基づいてルートを動的に設定できるようにしたいと考えています。私はこのようなことを試しました：

angular.module("myApp").config(["$routeProvider", "$http", function($routeProvider, $http) {
    $http.get("myData").success(function(data) {
        $routeProvider.when(data.dynamicRoute, {
            //route definition
        }
        //or
        $routeProvider.when("/known/route", {
            redirectTo: data.dynamicRoute
        }
    });
}]);

しかし、それは次のエラーになります:

Unknown provider: $http from myApp

したがって、構成機能がサービスではなくプロバイダーを注入していることを理解しています。ただし、どうにかして最終目標を達成できるかどうかを知りたいですか? でこれを行うことはできないと思いますが$httpProvider、間違っている場合は誰かが私を修正してください。これが不可能な根本的な理由がある場合は、説明してください。これについての助けは大歓迎です。

score 8 · Accepted Answer

これは 100% 有効なソリューションです。

ルートを準備します。json では次のように見えるかもしれません

{"0":{"id":1,"when":"/","controller":"MainController","template":"app/views/site/main_inner.html"},"1":{"id":2,"when":"/firm/:firmID","controller":"CompanyController","template":"app/views/site/firm.html"},"2":{"id":3,"when":"/search","controller":"SearchController","template":"app/views/site/search.html"}}

まず、RouteProvider へのグローバル参照を作成する必要があります

  var $routeProviderReference;
 var app = angular.module('myApp', []);

  app.config(['$routeProvider', function($routeProvider) {
  $routeProviderReference = $routeProvider;
  }]);

次に、メソッド run を使用して、ルートの ajax 呼び出しを行います。

   app.run(['$rootScope', '$http', '$route', function($rootScope, $http, $route) {
    //getting routes
    $http.get('routes.php').success(function (data) {

    angular.forEach(data, function (route) {
        $routeProviderReference.when( route.when, { templateUrl: route.template, controller: route.controller } );
    });
    $routeProviderReference.otherwise({ redirectTo: '/' });
    $route.reload();

});

}]);

詳細については、次の参考文献を参照してくださいhttp://blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app

score 5 · Accepted Answer

これを行う方法はありません。

プロバイダーは、構成可能なサービス作成者です。それらは、それらの作成を構成するために使用する API を提供することを可能にします。そして、構成可能性が私たちをconfigブロックに導きます。これらは、サービスの作成を構成するために、サービスが利用可能になる前に使用されます。そのため、およびサービスをそれぞれ作成するときに使用する設定を$routeProviderまたはに渡すことができます。$httpProvider$route$http

サービスはこの段階ではまだ構成中であるため、サービス自体は挿入できません。実際にはまだ存在しません。

を使用$routeProviderすると、アプリケーションの起動時に実行されている必要があるルートを構成できます。アプリケーションの実行中にランダムな時点でルーティングを開始しても意味がありません。

$httpこれはすべて、構成が完了するまで、アプリケーションの実行を開始できないことを意味します。これは、使用が意味することです。したがって、リモートデータからルートを定義する方法はありません。

とにかく、そのような動的ルートに価値があるとは思いません。それらは静的ではないデータから構築されているため、本質的に予測不可能です。これにより、ルーティングの主な目的であるブックマーク可能性が完全に失われます。

ですから、そもそもなぜこれを行う必要があると感じたのかを尋ねてから、一歩下がって、これが本当に理想的な方法であるかどうかを確認してください.

コメントを投稿して、さらなる議論を促してください。

score 4 · Accepted Answer

更新: @ dnc253 -- angular-detour の準備が整ったので、これを使用して json からロードされたルートを取得できると思います。まだ十分に文書化されておらず、テストも行われていないため、その意味では完全ではありませんが、ルーターのライブインスタンスへの json のマージはしばらくの間機能しています。

サーバー定義のルートを使用する方法をまだ探している場合は、サンプルの実行に関する説明を読んでから、 app.jsで 3 番目のサンプルのmergeJson 呼び出しを確認してください。フィードバックをいただければ幸いです。現在、実際のドキュメント/テストを開始しているので、ドキュメントがひどいものであり、テストがないことを伝える必要はありません。:) この機能がまだニーズのリストにある場合は、サンプルがきしむのに十分であることを願っています.

回答の古い部分: JSON を使用してサーバーによって定義されたルートの静的セットが必要な場合は、JQuery などを使用して、アプリを構成する前にルーティングデータを取得できます。

擬似コード:

$.ajax({
  url: "http://example.com/routes"
  }
}).done(function ( data ) {
    angular
        .module('myApp',[])
        .config(function($routeProvider) {
          //read routing instructions from data and call "when" on $routeProvider to define the routes
         });

});

これは ui-router でも機能するはずです。ただし、ルートの初期セットをフェッチすることしかできないため、データ駆動型の定義の可能性を提供しますが、アプリがクライアントによって読み込まれたときに利用可能だったデータによってのみ駆動されます。

eazel7 が指摘しているように、構成時にプロバイダーにバインドする独自のサービスを作成すると、実行時にプロバイダーにアクセスできます。ただし、やりたいことを行うには、プロセスの外に出て $http 呼び出しを行う必要があり、現在のルーター (在庫の Angular コアと ui-router) では、時間内に応答を取得できません。誰かがあなたのサイトにアクセスすると、ディープリンクの前のルーターが失敗します。さらに、これらのルーターはどちらも機能を使用してルーティング「テーブル」にデータを入力するため、最初に構成された後にルーティングを更新することはできません。

要求されたルートがルーターに認識されていない場合、フォールバックルートを呼び出すか失敗する前に、サーバーから取得しようとするなど、これらの問題に対処するために取り組んでいます。また、既知のルートへの変更のチェックもサポートします。サーバーへの AJAX/JSON インターフェイスを使用した本質的に遅延ルーティング。これは ui-router に基づいており、https://github.com/afterglowtech/angular-detourにあります。現在、ルートの編集可能性を実装していますが、怠惰/サーバー通信の部分は行っていません。それは私のリストの次です。それを監視してください、それはあなたが探していることをすることになるはずです。

score 2 · Accepted Answer

そのようなことを行う最も簡単な方法は、後でルートを解決することだと思います。たとえば、json を介してルートを尋ねることができます。$provide を介して構成段階で $routeProvider からファクトリを作成していることを確認してください。これにより、実行段階で、さらにはコントローラーでも $routeProvider オブジェクトを使用し続けることができます。

'use strict';

angular.module('myapp', []).config(function($provide, $routeProvider) {
    $provide.factory('$routeProvider', function () {
        return $routeProvider;
    });
}).run(function($routeProvider, $http) {
    $routeProvider.when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
    }).otherwise({
        redirectTo: '/'
    });

    $http.get('/dynamic-routes.json').success(function(data) {
        $routeProvider.when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        });
        // you might need to call $route.reload() if the route changed
        $route.reload();
    });
});

angularjs - AngularJS の動的ルーティング - $routeProvider を設定する前にサーバーからデータを取得できますか?

4 に答える 4

Related

Reference