Master Page Concept in AngularJS?

Question

I would like to create master page, that is main page which will be used in all views of the application.

For example, Left navigation and top men navigation. This navigation should be displayed in all the views, whenever url changes in application.

As per ng-view, it only renders given partial view and replace previous view. In the image above all my left and top navigation should be displayed by using angular Controller.

Controller code

angular.module('modelDemo').controller("authCtrl", ['$scope', function($scope) {
      $scope.list;
}]);

Please let me know, how can i achieve this

Answer 1

You can use angular-route or Angular-ui-router, and setting your master, following this steps:

• Step 1. Make your index.html your master page.
• Step 2. Add the <header>, <footer>, <aside>, <div>, etc. referencing your templates by using ng-include
  • NOTE: your left and top navigation will be part of it
• Step 3. The content of the view will be rendered using the directive attribute ng-view or ui-view
• Step 4. Use your module app.config() to configure the children pages

Source:

• using Angular Route: https://docs.angularjs.org/tutorial/step_07
  • template for a brand-new app: https://github.com/angular/angular-seed
• using Angular UI Router: Angular Tutorial 30 mins

Answer 2

ng view should be able to do that just fine. Keep your top navigation / left navigation html intact and use ng view for the various display area. http://docs.angularjs.org/api/ng.directive:ngView

To use the controller from the top navigation inside ng-view you can use $parent to get access to that scope : https://stackoverflow.com/a/14700326/390330

Fiddle for parent scope : http://jsfiddle.net/ezhrw/2/

<button ng:click="$parent.letter = greek">Assignment expression {{ greek }}</button>

Answer 3

I was trying to create the same concept, but needed a way to define placeholders. I started experimenting in Plnkr.co and thus far, I resorted to using a LayoutManager that drives itself from settings within the routeProvider object.

Here is an example: http://embed.plnkr.co/4GPDfTSQCuqukJE7AniZ/

You'll see an example of how multiple routes use the same header and footer, I did not include an example with a sidebar.

Let me explain the LayoutManager.

I wanted to have placeholders that could be overridden. In this example, I have a toolbar that contains a title and provides a space to the right of the title for additional toolbar items. This gives views an opportunity to throw in additional functionality.

All of this is driven by the LayoutManager. The LayoutManager is a service that reads layout properties set on the $routeProvider. I wanted to implement this in a way keep things clean and self contained, per route. The LayoutManager is injected into the toolbar directive. The toolbar directive drives it's scope properties of the LayoutManager.

In turn, the LayoutManager has a dependency on the routeProvider as well as the rootScope $routeChange event.

I'm very new to Angular, open to suggestions.

Answer 4

I could not see any problem, if you are using bootstrap then use can easily divide your screen as you want

<div class="row">
    <div class="col-lg-3">
       Left panel
    </div>
    <div class="col-lg-9" style="border:1px solid #999; overflow-y:auto">
        <div> Top Banner </div>

        <!--  Main view to render all the page -->
        <div ui-view>  </div>

    </div>
</div>

If you want complete demo and code on then see this link

Edited: 3 Nov. 2016:

If you are using ui-router then we can user abstract state to create different master pages.

You don't need to play show/hide, ng-if but just define the routing properly with you master pages and child pages

Better to see the detail

Answer 5

I know this is an old thread, but thought it should be noted that as of Angular 1.5+ we have been introduced to components. Instead of dealing with routes with named views and all that nonsense or using ngInclude you should be using a header component and footer component. Simply add these to your index.html (or whatever you call your master html template) and voila.

For example (this is using Angular Material and is missing the layout module but hopefully you get the point)

1. Added to index.html

<layout-header></layout-header>

2. header.component.js (you don't need all of this but I think it's helpful)

(function () {
'use strict';
angular
    .module('layout')
    .component('layoutHeader', {
        templateUrl: 'layout/header.html',
        bindings: {},
        controller: Controller
    });

Controller.$inject = [];
function Controller() {
    var ctrl = this;

    initialize();

    ////////////////////

    function initialize(){

    }

}
}());

3. header.html

<md-toolbar>
<div class="md-toolbar-tools">
    <h2>
        <span>Really Awesome Title!!!!</span>
    </h2>
    <span flex></span>

    <md-button class="md-icon-button" aria-label="More">
        <md-icon class="material-icons">more_vert</md-icon>
    </md-button>
</div>
</md-toolbar>