AngularJS - Handle repeated fragments like Header and Footer

Question

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

Answer 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:

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):

    

        

            

                

                    {{menuEntry.display}}
                
            
        
    
    

        Wellcome {{userData.userName}}!
        Logout
    
    

        Login
    

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.