オプションでテンプレートをngRouteにロード

Question

a.htmlとb.htmlという2つのテンプレートがあります。今すぐa.htmlはログインしたユーザー用で、b.htmlはそうでない人用です。認証は別のサブドメインで実行されているapiを介して行われます。今私は人が範囲で認証されているかどうかを指示する呼び出しを持っています。

オプションで、それに基づいてテンプレートを読み込むことができます。 1つの方法は私がb.htmlをロードし、条件付きで認証されたユーザーをリダイレクトすることですが、それは私が探しているものではありません。 はここに私のngRouteコード

var app = angular.module('app',['ngRoute']); 

app.config(function ($routeProvider,$locationProvider) { 
    $locationProvider.html5Mode(true); 
    $routeProvider 
    .when('/',{ 
      templateUrl : '/templates/b.html', 
      controller : 'mainController' 
     }) 
    .otherwise({ 
     templateUrl : 'templates/404.html', 
     controller : 'mainController' 
    }); 
}); 

app.controller('mainController', function($scope) { 

}); 

Answer 1

で次のコードは、何らかの形であなたの要件を満たすことができますが、実際に私が使用したので、少しトリッキーです直接templateUrlを設定するのではなく、NG-含まれています。

キーはresolve param in $routeProviderを使用することです。 $ promiseをメンバーに渡すと、ルータはそれらがすべて解決されるのを待つでしょう。

app.controller('MainController', ['$scope','loadedTemplate',function ($scope,loadedTemplate) { 
    //inject the template from the resolve function 
    $scope.loadedTemplate = loadedTemplate; 
}]); 

//Service to keep loginStatus 
app.factory("loginService",function(){ 
    return { 
     isLogin:false, 
     loginStatusFetched:false, 
    } 
}) 

app.config(['$routeProvider',function ($routeProvider) { 

    $routeProvider. 
    when('/', { 
     template: "<div ng-include='loadedTemplate'></div>", 
     controller: 'MainController', 
     resolve:{ 
      loadedTemplate:function($q, $http,$route,loginService) { 
       console.log("fetching login status"); 
       if(loginService.loginStatusFeteched){ 
        if(loginService.isLogin){ 
          return "a.html" 
        } 
        else{ 
          return "b.html" 
        } 
       } 
       console.log("fetching remote authentication"); 
       var deferred = $q.defer(); 
       $http({method: 'GET', url: 'http://jsonplaceholder.typicode.com/posts/1'}) 
        .success(function(data) { 

         //update the login status here 
         loginService.loginStatusFeteched = true; 
         loginService.isLogin = true; 
         if(loginService.isLogin){ 
         deferred.resolve("a.html"); 
         } 
         else{ 
         deferred.resolve("b.html"); 
         } 
        }) 
        .error(function(data){ 
        //error 
         deferred.resolve("b.html"); 
        }); 

       return deferred.promise; 
      } 
     } 
    }) 
}]); 

私はuが関数にtemplateUrlを設定することにより、必要なものを達成しようとしましたが、それだけでrouteParamsをとり、resolveの$約束が解決を取得する場合、この機能は、すでに実行されたとする方法はありません現在ロードされているテンプレートを変更します。

お試しできる選択肢はまだあります。状態変更を処理するのに、ng-routeの代わりにangular-ui-routerを使用することができます。ここでは、子の状態を設定し、条件付きで同じURLを提示することができます。

しかし、あなたが望むものを達成するためのより良い方法があると思います。誰かがもっと良い解決策を持っているなら、私に知らせてください。