AngularJS: Common Layout

by niden

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";}]);