Conditionally include sidebar and header in Angular App

Question

On certain views I want a sidebar and header, and some I do not. Using AngularJS, what is the best approach to achieve this.

My current solution in mind is to use ng-if on the sidebar and header DIV, and in my Controllers, set a $scope variable to be set to true or false depending on the views I want the sidebar and header to appear.

A concrete example would be Youtube.com. On Youtube's homepage, notice there is a sidebar and a sub-header with the filters: "What to Watch" and "Music" in it. However, on any video page, the sidebar and sub-header doesn't exist. I want to achieve that in AngularJS.

index.html

    <html ng-app="demoApp">

    <body ng-controller="demoAppMainController">

        <header>
            <ng-include src="'./partials/mainHeader.html'"></ng-include>
            <ng-include ng-if="showSubHeader" src="'./partials/mainSubHeader.html'"></ng-include>
        </header>

        <main>
            <ng-view></ng-view>
        </main>


    </body>
    </html>

discussionBoard.html

    <div class="discussionBoard" ng-controller="DiscussionBoardController">
         <h2>DiscussionBoard</h2>
    </div>

controllers.js

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

    demoAppControllers.controller('demoAppMainController', ['$scope', function($scope) {
            $scope.showSubHeader = true;
    }]);

    opinionLensControllers.controller('DiscussionBoardController', ['$scope', function($scope) {
            $scope.showSubHeader = false;
    }]);

What you have tried? Post whatever you did we are here to help you in that, — Satyam Koyani
– Satyam Koyani, Commented Apr 20, 2015 at 5:16
I added my code. My first idea was to add ng-if="showSubHeader" to the ng-include directive, and in the DiscussionBoardController set $scope.showSubHeader = false — Rashad
– Rashad, Commented Apr 20, 2015 at 5:33

Rashad · Accepted Answer · 2015-04-20 07:13:19Z

7

Instead of doing it in controller level, I would configure that in route level. And will listen to the $routeChangeSuccess event and update the $rootScope.

demoAppControllers.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController',
        showHeader : true
    }).
    when('/about', {
        templateUrl: 'discuss.html',
        controller: 'DiscussionBoardController',
        showHeader : false
    }).
    otherwise({
        redirectTo: '/home'
    });
}).
run(['$rootScope', function($rootScope) {
    $rootScope.$on("$routeChangeSuccess", function(event, next, current) {
        $rootScope.showHeader = next.$$route.showHeader;
    });
}]);

In your templates, you can just use ng-if="showHeader". It will be easily maintainable I feel.

edited Apr 20, 2015 at 7:13

Rashad

2456 silver badges15 bronze badges

answered Apr 20, 2015 at 5:31

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

6 Comments

Rashad Over a year ago

This throws a $injector:unpr error. I included $ngRoute: var demoApp = angular.module('demoApp', ['ngRoute', 'demoAppControllers']);

mohamedrias Over a year ago

It means that there is error injecting the dependencies. Make sure you include all necessary dependencies

Rashad Over a year ago

$rootScope.showHeader is undefined. Angular must no recognize showHeaer as a key in routesProvider object.

mohamedrias Over a year ago

Cool. Hope it's because of differences in angular version. but glad it worked for you :)

TechCare99 Over a year ago

Thank you for the solution. You saved my lot of time.

|

Arepalli Praveenkumar · Accepted Answer · 2015-04-20 05:33:58Z

1

ng-if="showHeader == true" use like this

 <ng-include ng-if="showHeader == true" src="'./partials/mainSubHeader.html'"></ng-include>

answered Apr 20, 2015 at 5:33

Arepalli Praveenkumar

1,3161 gold badge13 silver badges29 bronze badges

1 Comment

mohamedrias Over a year ago

It's not required. ng-if will evaluate the expression for truthy value. So no need to do it explicitly

Collectives™ on Stack Overflow

Conditionally include sidebar and header in Angular App

2 Answers 2

6 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Related