The ui-router solution could be like in this plunker, I've created to show the ui-router way. There is no need to use some view rendering directives ala ng-if, ng-show... which in fact moves the logic from business into the view.
The example shows a comprehensive design, with redirections for unauthorized users, as well to grant the public accesss to anybody, supporting log on/off in one view, etc.
Better solution is to profit from built-in features of the ui-router, e.g.:
TemplateUrl
... templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT injected.
TemplateProvider
Or you can use a template provider function which can be injected, has access to locals, and must return template HTML...
So, what we can see in our example. Firstly there is a root state with two views, one of them is standard anchor, for all main child unnamed views ui-view=""
$stateProvider
.state('root', {
abstract: true,
views: {
'': {templateUrl: 'tpl.root.html', },
'loginfo@root': {
templateProvider: templateSelector,
controller: 'LoginCtrl',
}
}
})
where the templateSelector would be like this:
var templateSelector = function($http, UserService)
{
var templateName = UserService.isLogged
? "tpl.loggedin.html"
: "tpl.loggedoff.html"
;
return $http
.get(templateName)
.then(function(tpl){
return tpl.data;
});
};
Relying on simple setting in this example:
.factory('UserService', function() {
return {
isLogged: false,
};
})
And that's it, we do have two templates:
- "tpl.loggedin.html"
- "tpl.loggedoff.html"
The remaining stuff is pretty expectable, state definitions, some redirection on unauthorized access... please observe the example.
which are interchanged based on the fact if user is logged on or off
Check the solution in this working plunker
