How to apply conditional ui-views in angular js

Question

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.

Stateprovider:

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

$stateProvider
.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

Html:

<div id="wrapper">

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

</div>

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

Mike Feltman · Accepted Answer · 2016-05-19 15:59:22Z

1

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

<div ui-view="header" ng-if="$state.current.name!='home'">

edited May 19, 2016 at 15:59

answered May 19, 2016 at 15:31

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kittu Over a year ago

I don't want to apply header, footer and sidebar on home page but rest other pages can have it

Mike Feltman Over a year ago

Sorry. I changed it to not equal. You get the idea? It should be pretty straightforward.

Mike Feltman Over a year ago

I'm not sure if you're putting in exactly what I posted or using it as a guideline, but if you did it exactly, change it to ng-if="$state.current.name!='Home'" since that's how your state is defined. You could also just create a variable in your controller and check that with ng-if.

Collectives™ on Stack Overflow

How to apply conditional ui-views in angular js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related