Angularjs - Handle Repeated Fragments Like Header And Footer

I have been trying to implement the header / footer in an Angular JS App. I was thinking of adding these as ng-include in the main index.html. However this would have worked if the

Solution 1:

Use a controller in the header/footer, as ivarni suggested. An example from an (experimental) app of my own:

In the index.html, the header will display a dynamically generated menu, login/logout etc:

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top"
    x-ng-controller="NavbarCtrl" x-ng-include="'app/main/navbar.html'"></div>

The NavbarCtrl builds the appropriate scope for the app/main/navbar.html template. The template would be as follows (taking into account your needs - and irrelevant details removed):

<divclass="navbar-inner"x-ng-if="showHeader"><divclass="container"><div><ulclass="nav"><lix-ng-repeat="menuEntry in menuEntries"><ax-ng-href="#{{menuEntry.path}}">{{menuEntry.display}}</a></li></ul></div></div><divx-ng-if="userData.loggedIn">
        Wellcome {{userData.userName}}!
        <ax-ng-click="logout()">Logout</a></div><divx-ng-if="!userData.loggedIn"><ax-ng-click="login()">Login</a></div></div>

So the entire markup is hidden depending on the showHeader scope variable. It creates the menu dynamically (menuEntries). And depending on userData.loggedIn, the appropriate Login/Logout message.