Optionally loading template in ngRoute - angularjs

Question

I have two templates as a.html and b.html. Now a.html is for logged in users and b.html for people who are not. Authentication is through an api running on a separate sub-domain. Now i have a call that tells whether a person is authenticated in scope.
How can i optionally load templates based on that. One method is i load b.html and conditionally redirect authenticated users but that is not something i am looking for.
Here is my ngRoute codes
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

The following code could somehow satisfy your requirements but it is in fact a bit tricky since i used ng-include instead of directly setting the templateUrl.
The key is to use the resolve param in $routeProvider. when u pass a $promise as a member in it, the router will wait for them all to be resolved.
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;
}
}
})
}]);
I attempted to achieve what u required by setting the templateUrl to a function, but it only takes routeParams, and when the $promise in resolve get resolved, this function has already been executed and there is no way to change the current loaded template.
There is still other choices that you can try. You may use angular-ui-router instead of ng-route to handle state changes, in which u may set child states and present them with the same url conditionally.
But I believe there might be better ways to achieve what you want. If anyone has any better solution, please let me know.