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:

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:

Then create a simple controller:

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

Job done!

Leave a Reply

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