web-dev-qa-db-ja.com

Angular.jsでルート定義を延期する方法は？

ログインする前にすべてのユーザーが利用できるいくつかの基本的なルートを構成しました。

App.config(function ($routeProvider) {
    $routeProvider.
        when('/login', { templateUrl: 'views/login.html', controller: PageStartCtrl.Controller }).
        otherwise({ redirectTo: '/login' });
});

したがって、ユーザーが実行できるのはログインすることだけです。ユーザーがログインした後、次のような追加のルートを登録したいと思います。

$http
  .post('api/Users/Login', {   User: userName, Password: userPassword })
  .success(function (response : any) {
    App.config(function ($routeProvider) {
      $routeProvider
        .when('/dashboard', 
              { templateUrl: 'part/dashboard.html', 
              controller: DashboardCtrl.Controller });
  });

ただし、$ routeProviderは/ loginルートについて何も知らない新しいインスタンスであるため、.configメソッドを1回だけ呼び出す必要があると思います。さらにデバッグすると、ビューの変更を解決するときに$ resourceProviderの最初のインスタンスが使用されることがわかりました。

Q：後でルートを登録する方法はありますか？

ルートとテンプレートを$ routeProviderに動的に追加する からの解決策は機能するかもしれませんが、かなり醜いです（グローバル変数nastyGlobalReferenceToRouteProviderが含まれます）。

dynamicconfigurationurl-routingangularjsdeferred
33
stej

ルートはプロバイダーレベルで定義されるため、通常、新しいルートは構成ブロックでのみ定義できます。問題は、構成ブロックですべての重要なサービスがまだ定義されていないことです（特に$http）。したがって、表面的には、wはルートを動的に定義できないように見えます。

さて、実際には、アプリケーションのライフサイクルの任意の時点でルートを追加/削除するのは非常に簡単であることがわかりました！$routeを見てください- ソースコード すべてのルート定義が$route.routesハッシュに保持されていることがわかります。これは、次のようにいつでも変更できます（簡略化された例）。

myApp.controller('MyCtrl', function($scope, $route) {    
    $scope.defineRoute = function() {
        $route.routes['/dynamic'] = {templateUrl: 'dynamic.tpl.html'};
    };
});

これが実際にこれを示すjsFiddleです： http://jsfiddle.net/4zwdf/6/

実際には、AngularJSが実行していることに近づきたい場合は、AngularJSが最後に/を含むルートを正しく処理するようにリダイレクトルートも定義しているため、ルート定義ロジックはもう少し複雑になるはずです（事実上オプションにします）。

したがって、上記の手法は機能しますが、次の点に注意する必要があります。

  • この手法は内部実装に依存し、AngularJSチームがルートの定義/照合方法を変更することを決定した場合に機能しなくなる可能性があります。
  • デフォルトルートはotherwiseキーの下の同じハッシュに保存されるため、$route.routesを使用してnullルートを定義することもできます。
47
pkozlowski.opensource

@ pkozlowski.opensourceによる回答はangularjs1.0.1でのみ機能することがわかりました。ただし、angular-route.jsが後のバージョンで独立したファイルになった後は、$ routeを直接設定しても機能しません。

コードを確認したところ、$ route.routesのキーは場所の照合に使用されなくなりましたが、代わりに$ route.route [key] .RegExpが使用されています。 Origin whenとpathRegExp関数をコピーすると、ルートが機能します。 jsfiddleを参照してください： http://jsfiddle.net/5FUQa/1/

  function addRoute(path, route) {
     //slightly modified 'when' function in angular-route.js
  }
  addRoute('/dynamic', {
    templateUrl: 'dynamic.tpl.html'
  });
6
SetupX