Rendering Angularjs specfic view without header and footer

Question

So all of my pages use the index.html to render pages and in the index.html, my code is structured so that all views render in the div with the ng-view="" tag as:

  <body>
    <div class="navbar navbar-inverse" role="navigation" ng-controller="indexController" style="border-bottom: #ab2328 3px solid;">
        <div class="container">
            <div class="navbar-header">
                <button class="btn btn-success navbar-toggle" ng-click="navbarExpanded = !navbarExpanded">
                  <span class="glyphicon glyphicon-chevron-down"></span>
                </button>
                <a ng-show="!isSWA" class="navbar-brand" href="http://www.naviabenefits.com" target="_blank"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
                <a ng-show="isSWA" class="navbar-brand" href="http://pebb.naviabenefits.com/" target="_blank"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
            </div>
            <div class="collapse navbar-collapse" collapse="!navbarExpanded">
                <ul ng-show="!isSWA" class="nav navbar-nav navbar-right">
                    <li ng-show="authentication.isAdmin"><a href="#/admin/ppt">admin</a></li>
                    <li><a href="https://www.naviabenefits.com/products-and-services/" target="_blank">products + services</a></li>
                    <li><a href="https://www.naviabenefits.com/about/" target="_blank">about us</a></li>`
                    <li><a href="https://www.naviabenefits.com/testimonials/" target="_blank">testimonials</a></li>
                    <li><a href="https://www.naviabenefits.com/careers/" target="_blank">careers</a></li>
                    <li><a href="https://www.naviabenefits.com/news/" target="_blank">news</a></li>
                    <li><a href="https://www.naviabenefits.com/blog/" target="_blank">blog</a></li>
                    <li><a href="https://www.naviabenefits.com/contact/" target="_blank">contact us</a></li>
                    <li ng-show="authentication.isAuth"><a id="signOut" href="#/logout" >sign out <i class="fa fa-sign-out"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
      <div ng-view="">
      </div>
    </div>
    <div id="footer" role="navigation" ng-controller="indexController">
        <div class="container">
            <div class="footerLinks">
            </div>
        </div>
    </div>
  </body>

So I have a couple of pages that I want to render without the header and footer, but still keep some of the other pathing.

This "plain" page has its own controller and all and my routing for it in my app.js looks like:

$routeProvider.when("/claimReceipt-plain", {
    controller: "claimReceiptController",
    templateUrl: "ppt/views/claims/claimReceipt-plain.html"
});

How can I do this within this index.html and not have the header and footers render, but me more or less, its own page?

Have you tried making the header and footer it's own view? Maybe just make header and footer a component and pass different directives for different views in your app.js. — alphapilgrim, Apr 19 '16 at 22:23
Also, curious are you using ui-router and are you opposed if not? — alphapilgrim, Apr 19 '16 at 22:23
I am trying to keep it simply within the constraints I have. Is there not a way to do with another view that does not utilize the header and footer containers? — Mark, Apr 19 '16 at 22:26
You want to conditionally show the header and footer, correct? — alphapilgrim, Apr 19 '16 at 22:29
Why not just use angular's ng-if, better I think for your situation. It'll save the reference to the elements place on the DOM but it wont load them. You could use the view name to conditionally load them. — alphapilgrim, Apr 19 '16 at 22:33
Yes, just display: none did the trick as well. Suppose I could have used the ng-if as well. — Mark, Apr 20 '16 at 01:38

score 0 · Answer 1 · answered Aug 01 '16 at 21:54

0

Define a scope level Boolean variable on the page controller where you don't want the header and use ng-show directive to apply condition on the header div tag.

answered Aug 01 '16 at 21:54

techprat

375
7
23

Sorry I forgot your header is a part of index page which is rendered using main controller so you cannot control controller scope variable from view controllers. May be you should try passing values from view controller(where you don't want header) to main controller setting the display value to false and use it in ng-show. – techprat Aug 02 '16 at 08:23
Use this link to see how you can exchange values between controller: https://thinkster.io/a-better-way-to-learn-angularjs/services Sorry couldn't provide code snippet right now. Try this if you don't come up with solution, will try to write a snippet. – techprat Aug 02 '16 at 08:30

Rendering Angularjs specfic view without header and footer

1 Answers1