CODEWITHSUNDEEP
angularjsmeanjs
robabby
robabby

Reputation: 2200

Showing and hiding header nav in Mean.js app

I am building a blog with the Yeoman Mean.js generator. So far I am really enjoying working with Mean.js, however I am relatively new to Angular development, so some things just don't click for me yet.

I would like to hide the header on all pages of my app, and only show it if I am logged in. I'll be pulling signup out of the header, and logging in from a single location to manage my blog.

I tried using ng-show="topbarActive" on the <header> element present in the /app/views/layout.server.view.html:

<header ng-show="topbarActive" data-ng-include="'/modules/core/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-default"></header>

I then tried explicitly setting this variable to false in /public/modules/core/controllers/home.client.controller.js:

$scope.topbarActive = false;

I set this value to true in /public/modules/users/controllers/authentication.client.controller.js, in the hopes that I could manually ping http://localhost:3000/#!/signup and see my header bar.

After this set up I do not see the header anywhere. Seeing as how I am new to 'The Angular Way', what steps am I missing in order to achieve the behavior I am looking for. Am I confused in how Mean.js builds it's dependencies?

Upvotes: 0

Views: 1164

Answers (1)

MKouhosei
MKouhosei

Reputation: 180

One of the key concepts in AngularJS is scoping. In this particular case your controller HomeController is assigned to the first div under the header. That makes HomeController scope unavailable to it's parent (header) which actually doesn't have any controller at all.

To make your configuration work, please add a new controller, for example:

/* /public/modules/core/controllers/body.client.controller.js */
'use strict';

angular.module('core').controller('BodyController', ['$scope', 'Authentication', 'Menus',
    function($scope, Authentication, Menus) {
        $scope.topbarActive = true;
    }]);

And then add this controller to the body in layout.server.view.html: 

<body ng-cloak ng-controller="BodyController">

Alternatively you can create a controller for your tag only, depends on where you're going from here.

Upvotes: 5

Related Questions