Angular.js: Layouts and Sections

I've been building out the new UI for Octopus 2.0 in Angular.js, which has been a fun process and something I hope to blog more about later.

Angular layouts/master pages and sections

Coming from an ASP.NET MVC background, one of the concepts I found myself missing was that of "sections". A solution I came up with was to use two custom directives:

  • octo-placeholder designates an area on the parent layout where content will be placed
  • octo-section designates content that will be added to the parent layout

My layout page looks like this (simplified):

<... snip ...>
  <div class='top'>
    <div class='tools' octo-placeholder='tools'></div>

    <div class='breadcrumbs' octo-placeholder='breadcrumbs'></div>


My view looks like this:

<script octo-section="breadcrumbs" type="text/ng-template" >
  <p>This is the breadcrumbs area {{ someVariable }}</p>

<script octo-section="tools" type="text/ng-template" >
  <a ng-show="loaded">Hello</a>

<p>This is the main content</p>

The directives that make this all work are:

.directive("octoPlaceholder", function(octoUtil, $compile, $route, $rootScope) {
  return { 
    restrict: 'AC',
    link: function(scope, element, attr) {
      // Store the placeholder element for later use
      $rootScope["placeholder_" + attr.octoPlaceholder] = element[0];

      // Clear the placeholder when navigating
      $rootScope.$on('$routeChangeSuccess', function(e, a, b) {

.directive("octoSection", function(octoUtil, $compile, $route, $rootScope) {
  return {
    restrict: 'AC',
    link: function(scope, element, attr) {
      // Locate the placeholder element
      var targetElement = $rootScope["placeholder_" + attr.octoSection];

      // Compile the template and bind it to the current scope, and inject it into the placeholder

Unlike solutions that use ng-include, the directives use the current view's scope rather than creating a new scope. This means that you can use bindings within the sections without a problem.

Hopefully this helps someone else!

A picture of me

Welcome, my name is Paul Stovell. I live in Brisbane and work on Octopus Deploy, an automated deployment tool for .NET applications.

Prior to founding Octopus Deploy, I worked for an investment bank in London building WPF applications, and before that I worked for Readify, an Australian .NET consulting firm. I also worked on a number of open source projects and was an active user group presenter. I was a Microsoft MVP for WPF from 2006 to 2013.