AngularJS Live Example

by Freewind

HTML

<html ng-app="SETool">
    <head>
    <script type="text/ng-template" id="foo.html">
            <p ng-controller="FooCtrl">{{message}}</p>
    </script>

    <script type="text/ng-template" id="bar.html">
            <p ng-controller="BarCtrl">{{message}}</p>
    </script>

    <script type="text/ng-template" id="horizontal.html">
            <div ng-controller="HorizontalCtrl">
                <p>this is the {{message}} layout</p>
                <table><tr><td>
                    <ng:include src="templates.left" />
                </td><td>
                    <ng:include src="templates.right" />
                </td></tr></table>
            </div>
    </script>

    <script type="text/ng-template" id="vertical.html">
            <div ng-controller="VerticalCtrl">
                <p>this is the {{message}} layout</p>
                <table><tr><td>
                    <ng-include src="templates.top" />
                </td></tr><tr><td>
                    <ng-include src="templates.bottom" />
                </td></tr></table>
            </div>
    </script>
    </head>
    <body ng-controller="AppController">
        <a href="#/view1">horizontal</a> |
        <a href="#/view2">vertical</a>
        <hr />
        
        <div ng-include src="templates.layout" scope=""></div>
    
    </body>
</html>

CSS

</style>
<script src="http://code.angularjs.org/angular-1.0.0rc7.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }

JavaScript

// Declare app level module which depends on filters, and services
var seTool = angular.module('SETool', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', { templates: {layout: 'horizontal.html', left:'foo.html', right:'bar.html'}});
    $routeProvider.when('/view2', { templates: {layout: 'vertical.html', top:'foo.html', bottom:'bar.html'}});    
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);



/* App Controllers */

seTool.controller('AppController', ['$rootScope','$route', '$location','$controller', function ($rootScope,$route,$location,$controller) { 

    $rootScope.$on('$beforeRouteChange', function(scope, newRoute){
        if (!newRoute) return;
        //Load any required resources here
        console.log("Do conditional loading here");
        //Set the state bound do the ng-include src attribute
        $rootScope.templates = newRoute.$route.templates;        
    });
}]); 


seTool.controller('FooCtrl', ['$scope', function ($scope) { 
     $scope.message = "FOO"; 
}]); 

seTool.controller('BarCtrl', ['$scope', function ($scope) { 
     $scope.message = "BAR";
}]);

seTool.controller('HorizontalCtrl', ['$scope', function ($scope) { 
    $scope.message = "HORIZONTAL";
}]); 

seTool.controller('VerticalCtrl', ['$scope', function ($scope) { 
    $scope.message = "VERTICAL";
}]);