Experimenting with different layout options flexibly using AngularJS

One of the great things about AngularJS is the way you can easily reuse and embed templates and controllers. Recently I was asked to create two versions of a control panel – one where there were several individual pages, and another where we had the pages as tabs. As I was already using the excellent AngularJS Bootstrap plugin I thought about doing something like:

  <tab ...>
    <div ng-include=... />
  </tab ...>

However the issue with this is that you load all the templates (and controllers) at page-load so if I update data in one tab it will still show the old data (from page-load time) when I change to another tab.

After scratching my head for a while I came up with the following simple method:

<div ng-controller="Tabs">

  <ul class="nav nav-tabs noprint">
    <li role="presentation"><a href="#/">
      <span class="glyphicon glyphicon-circle-arrow-left"></span>
    <li role="presentation" ng-class="{ active: type == 'recipe' }"><a href="#/edit/recipe/{{ rec_id }}">
      <span class="glyphicon glyphicon-edit"></span>

  <div ng-include="'templates/' + template + '.html'"></div>


Then create a simple controller:

t.controller('Tabs', function($scope, $routeParams) {
  $scope.rec_id = $routeParams.rec_id;
  $scope.template = $routeParams.template;

And set up the routing (individual pages have their own routes&params already set up):

// For new combined tabs
path: '/edit/:template/:rec_id?'

Job done!

Leave a Reply

Your email address will not be published. Required fields are marked *