Satyadev Satyadev - 5 months ago 40x
AngularJS Question

How to apply conditional ui-views in angular js

By default, I want to load a Home page with signup/login option where there is no header or footer in this page. Once the user logged-in successfully, I am redirecting user to loggedIn.html page where the page has a fixed header, sidebar and footer.

The problem is how to prevent the header, sidebar and footer getting applied when I load Home page.


var sidebar = {
templateUrl: 'views/SideBar.html',
controller: function ($scope) {

.state('Home', {
url: "/Home",
views: {
sidebar: sidebar, //Commented this line out but didn't work
content: {
templateUrl: 'views/Home.html',
controller: function ($scope) {

If you see in the above code, I commented out the line for sidebar view but it is still taking up place for side bar on to Home page


<div id="wrapper">

<div ui-view="header"></div>
<div ui-view="sidebar"></div>
<div ui-view="content"></div>


<div ui-view="footer"></div>


Use an ng-if based on $ so your header div tag would look something like this:

<div ui-view="header" ng-if="$!='home'">