CODEWITHSUNDEEP
javascripthtmlangularjsexpressmean-stack
alter away
alter away

Reputation: 11

How to show or hide the header in angular app for certain pages?

I'm sorry for how general this question is. One of my classes is being very... lightly taught and so I partially don't even understand what I'm trying to ask.

The app I am working on was started by following an in-class guide. Essentially I installed ruby, node, sass, bower, grunt, yo, and generator-meanjs which I believe is this: https://github.com/meanjs/generator-meanjs. Then I was told to run yo meanjs and like magic a working MEAN stack app appeared.

One of the core components of this app is a header which is inserted through this line in a file titled layout.server.view.html:

<header ng-hide="{{hideHeader}}" ng-include="'/modules/core/client/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-inverse"></header>

The ng-hide="{{hideHeader}}" portion is my addition.

The file layout.server.view.html seems to be wrapped around all other views using some swig templating and ui-views.

Other variables referenced from layout.server.view.html like this one:

<meta property="fb:app_id" content="{{facebookAppId}}">

seem to come from a file entitled express.js in a method called initLocalVariables by doing things like

app.locals.facebookAppId = config.facebook.clientID;

What I want to be able to do is disable (hide) this header at will, or at least depending on what page I'm on. For example, I want a page that has no header and is purely to list data.

So far I've found one way to do this reliably: make a new routing that routes to a page other than layout that doesn't include the header. The problem with this is that then everything else is gone, too.

Ideally I wish I could just do something like $scope.hideHeader = true in the controller for a given page, but it doesn't work. I then thought maybe I need to access app.locals.hideHeader and set that to true, but I don't see how I can do that from a controller.

I don't understand how all of this fits together, and I hope someone can help provide me some resources so that I may understand all of this.

Thank you in advance.

Upvotes: 1

Views: 2410

Answers (1)

pgrodrigues
pgrodrigues

Reputation: 2078

You have a few options to accomplish that in AngularJS:

1) If its just for one route that you want to hide the header you can check in your controller if that's the current route by doing something like (maybe even integrate with $rootScope as it was suggested):

$scope.hideHeader = ($location.path() === '/my-route-without-header') ? true : false;

2) If there are many routes where the header should be hidden you should probably change the logic a bit and pass a property with each route/state. Example here.

Upvotes: 1

Related Questions