CODEWITHSUNDEEP
angularjs
niran
niran

Reputation: 1980

Master Page Concept in AngularJS?

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.

enter image description here

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

Upvotes: 19

Views: 36041

Answers (5)

Justin
Justin

Reputation: 627

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>

Upvotes: 1

Ali Adravi
Ali Adravi

Reputation: 22773

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

Upvotes: 1

alettieri
alettieri

Reputation: 396

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.

Upvotes: 1

Jaider
Jaider

Reputation: 14914

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

enter image description here

Source:

Upvotes: 11

basarat
basarat

Reputation: 276085

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>

Upvotes: 7

Related Questions