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>