<!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>