<!DOCTYPE html>
<html ng-app="main" ng-controller="AppController as appCtrl">

<head>
  <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
  <script src="script.js"></script>
  <script>
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>

<body>
  <header class="navbar navbar-default navbar-static-top app-navbar" role="banner">
    <div class="container">
      <div class="navbar-header">
        <a href="." class="navbar-brand">Super App</a>
      </div>
      <nav>
        <ul class="nav navbar-nav">
          <li><a href=".">Home</a>
          </li>
          <li><a href="./#/dashboard">Dashboard</a>
          </li>
          <li><a href="./#/admin">Admin</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  
  <sub-toolbar></sub-toolbar>
  
  <main ng-view class="container"></main>
  
  <footer class="bg-info container">
    <p>Application Footer</p>
  </footer>
  
</body>

</html>



// Initialize the app module, which in turn initializes our individual modules
angular.module('main', ['app.modules'])
//
// Layout Manager
//
.factory('LayoutManager', function($rootScope){
  
  var Layout = this;
  
  
  Layout.toolbar = {
    title: '',
    url: false,
    
    setTitle: function(title){
      this.title = title;
    },
    
    setUrl: function(url) {
      this.url = url;
    },
    
    reset: function(){
      this.setTitle('');
      this.setUrl(false);
    }
    
  };
  
  $rootScope.$on('$routeChangeStart', function(){
    Layout.toolbar.reset();
  });
  
  $rootScope.$on('$routeChangeSuccess', function(evt, $route){
    var layout = $route.layout || {},
        toolbar = layout.toolbar || false
    ;
    
    if( toolbar ) {
      
      if( toolbar.title ) {
        Layout.toolbar.setTitle( toolbar.title );
      }
      if( toolbar.url ) {
        Layout.toolbar.setUrl( toolbar.url );
      }
    }
    
  });
  
  
  return Layout;
  
  
})
//
// Application Controller, always at the top of the scope
//
.controller('AppController', function($scope){
  
  // Set the content for app
  this.content = "Came from App";
  // Set the title for App and $scope
  // note: $scope will be inherited by every sub-module
  this.title = $scope.title = "Came from App Controller";
  
})
//
// Sub Toolbar Directive
// Designed to display title and allow other modules to inject their own
// Toolbar layout
//
.directive('subToolbar', function(LayoutManager){
  
  return {
    restrict: 'E',
    templateUrl: 'sub-toolbar.html',
    scope: false,
    link: function(scope) {
      scope.toolbar = LayoutManager.toolbar;
    }
  };
  
});

//
// Load our app modules
//
angular.module('app.modules', ['ngRoute'])
//
// Do some configuration, mainly settings routes
//
.config( function($routeProvider){
  
  
  $routeProvider.when('/', {
    
    templateUrl: 'home.html',
    controller: 'HomeController',
    controllerAs: 'homeCtrl',
    layout: {
      toolbar: {
        title: 'Home'
      }
    }
    
  })
  
  .when('/dashboard',{
    
    templateUrl: 'dashboard.html',
    controller: 'DashboardController',
    controllerAs: 'dashboardCtrl',
    layout: {
      toolbar: {
        title: 'Dashboard',
        url: 'dashboard-toolbar.html'
      }
    }
    
  })
  
  .when('/admin',{
    templateUrl: 'admin.html',
    controller: 'AdminController',
    controllerAs: 'adminCtrl',
    layout: {
      toolbar: {
        title: 'Admin'
      }
    }
  });
  
  
  
})
//
// Home Controller
//
.controller('HomeController', function($scope){
  
  this.content = 'Came from Home';
  
  // Inherit scope title
  this.title = $scope.title;
  
})
//
// Dashboard Controller
//
.controller('DashboardController', function($scope){
  
  // Set Dashboard content
  this.content = "Came from Dashboard";
  
  // Inherit from higher scope
  this.title = $scope.title;
  
  
})
//
// Admin Controller
//
.controller('AdminController', function($scope){
  
  // Set admin content
  this.content = "Came from Admin";
  
  // Override the scope title
  this.title = $scope.title = "Came from Admin Controller";
  
});
/* Styles go here */

.app-navbar {
  margin-bottom: 0;
}

.app-toolbar {
  margin-bottom: 15px;
}

footer {
  margin-top: 5%;
  min-height: 40px;
}
This is a test to demonstrate how a main layout could be constructed in Angular using directives. 

I wanted a way to also have a toolbar that provides placeholders for additional content. 

In this case I am using a directive that contains an ng-include, it works very nicely.

index.html loads angular and includes a main-view directive on the body element. 

Dashboard {{ dashboardCtrl | json }}
Admin {{ adminCtrl | json }}
<div class="app-toolbar bg-success">
  <div class="container">
    <div class="row">
      <h4 ng-if="toolbar.title" class="col-xs-2">{{toolbar.title}}</h4>
      <div ng-if="toolbar.url" class="col-xs-10" ng-include="toolbar.url"></div>
    </div>
  </div>
</div>
Home {{homeCtrl | json}}
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a>Settings</a></li>
  <li><a>Events</a></li>
  <li><a>Reports</a></li>
</ul>