33

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

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)。

4

2 に答える 2

47

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

さて、実際には、アプリケーションのライフサイクルのどの時点でもルートを追加/削除するのは非常に簡単であることがわかりました! $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.routesnull
于 2012-11-01T08:47:11.953 に答える
6

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

コードを確認したところ、場所の照合に $route.routes のキーが使用されなくなり、代わりに $route.route[key].RegExp が使用されていることがわかりました。オリジン 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'
  });
于 2014-03-19T04:43:22.927 に答える