samcrosoft/1.html

## 1.html
<!doctype html>
<html ng-app="appProject">
<head>
	<title>Angular: Cross Controller Object Sharing Service example</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css"/>

	<script>
        oSettings = new Object();
        oSettings = {
            settings : {
                "appname"        : "Example Application Name",
                "version"        : "1.0",
                "allowAlert"     : true,
                "allowWebSocket" : true
            },
            printObject : function(oObject)
            {
                sData = JSON.stringify(oObject, null, 4);
                return (sData);
            }
        }

        // place the settings into the windows object properly
        window.oSettings = (window.oSettings != null) ? oSettings : {};

        var appModule = angular.module('appProject',[]);

        appModule.factory('theService', ["$window", function($window) {
            return $window.oSettings;
        }]);

        function ParentCtrl($scope, theService)
        {
            $scope.printObject  = theService.printObject;
            $scope.oVar         = theService.settings;
            $scope.name         = "Parent Body Controller";
        }

        function FirstCtrl($scope, theService)
        {
            $scope.printObject  = theService.printObject;
            $scope.oVar         = theService.settings;
            $scope.name         = "First Independent Controller";
        }

        function SecondCtrl($scope, theService)
        {
            $scope.printObject  = theService.printObject;
            $scope.oVar         = theService.settings;
            $scope.name         = "Second Independent Controller!";
        }

        function ThirdCtrl($scope, theService)
        {
            $scope.printObject  = theService.printObject;
            $scope.oVar         = theService.settings;
            $scope.name         = "Third Independent Controller!";
        }
	</script>
</head>
<body>
    <style type="text/css">
        li
        {
            margin-bottom: 10px;
        }
        li strong
        {
            width: 160px !important;
            display: inline-block;
            padding: 2px;
            background: #efefef;
        }
        li input[type='text']
        {
            width: 260px;
            padding: 2px;
        }
    </style>
    <script type="text/ng-template" id="appdetails.html">
        <h2>{{name}}</h2>
        <ul>
            <li>
                <strong>App Name : </strong> <input type='text' ng-model="oVar.appname"/>
            </li>
            <li>
                <strong>Version : </strong> <input type='text' ng-model="oVar.version"/>
            </li>
            <li>
                <strong>AllowAlert : </strong> <input type='text' ng-model="oVar.allowAlert"/>
            </li>
            <li>
                <strong>Allow Web Socket : </strong> <input type='text' ng-model="oVar.allowWebSocket"/>
            </li>
        </ul>
    </script>
    <div class="container" ng-controller="ParentCtrl">
        <div class="well" style="margin-top:20px;">
            This will demonstrate the use of a service in sharing a global object accross controllers. For the purpose of demonstration, a settings object will be passed to
            multiple controllers
            <div ng-include="'appdetails.html'"></div>
        </div>

        <div class="row alert alert-success">
            <div class="col-md-12">
                <h3>RealTime Object Monitoring</h3>
                <code>
                    {{ printObject(oVar) }}
                </code>
            </div>
        </div>


        <div class="row">
            <div class="col-md-6">
                <div ng-controller="FirstCtrl">
                    <div ng-include="'appdetails.html'"></div>
                </div>

                <br/>
                <br/>

                <div ng-controller="ThirdCtrl">
                    <div ng-include="'appdetails.html'"></div>
                </div>
            </div>

            <div class="col-md-6">
                <div ng-controller="SecondCtrl">
                    <div ng-include="'appdetails.html'"></div>
                </div>
            </div>
        </div>


    </div>
</body>
</html>
	<!doctype html>
	<html ng-app="appProject">
	<head>
	<title>Angular: Cross Controller Object Sharing Service example</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css"/>

	<script>
	oSettings = new Object();
	oSettings = {
	settings : {
	"appname" : "Example Application Name",
	"version" : "1.0",
	"allowAlert" : true,
	"allowWebSocket" : true
	},
	printObject : function(oObject)
	{
	sData = JSON.stringify(oObject, null, 4);
	return (sData);
	}
	}

	// place the settings into the windows object properly
	window.oSettings = (window.oSettings != null) ? oSettings : {};

	var appModule = angular.module('appProject',[]);

	appModule.factory('theService', ["$window", function($window) {
	return $window.oSettings;
	}]);

	function ParentCtrl($scope, theService)
	{
	$scope.printObject = theService.printObject;
	$scope.oVar = theService.settings;
	$scope.name = "Parent Body Controller";
	}

	function FirstCtrl($scope, theService)
	{
	$scope.printObject = theService.printObject;
	$scope.oVar = theService.settings;
	$scope.name = "First Independent Controller";
	}

	function SecondCtrl($scope, theService)
	{
	$scope.printObject = theService.printObject;
	$scope.oVar = theService.settings;
	$scope.name = "Second Independent Controller!";
	}

	function ThirdCtrl($scope, theService)
	{
	$scope.printObject = theService.printObject;
	$scope.oVar = theService.settings;
	$scope.name = "Third Independent Controller!";
	}
	</script>
	</head>
	<body>
	<style type="text/css">
	li
	{
	margin-bottom: 10px;
	}
	li strong
	{
	width: 160px !important;
	display: inline-block;
	padding: 2px;
	background: #efefef;
	}
	li input[type='text']
	{
	width: 260px;
	padding: 2px;
	}
	</style>
	<script type="text/ng-template" id="appdetails.html">
	<h2>{{name}}</h2>
	<ul>
	<li>
	<strong>App Name : </strong> <input type='text' ng-model="oVar.appname"/>
	</li>
	<li>
	<strong>Version : </strong> <input type='text' ng-model="oVar.version"/>
	</li>
	<li>
	<strong>AllowAlert : </strong> <input type='text' ng-model="oVar.allowAlert"/>
	</li>
	<li>
	<strong>Allow Web Socket : </strong> <input type='text' ng-model="oVar.allowWebSocket"/>
	</li>
	</ul>
	</script>
	<div class="container" ng-controller="ParentCtrl">
	<div class="well" style="margin-top:20px;">
	This will demonstrate the use of a service in sharing a global object accross controllers. For the purpose of demonstration, a settings object will be passed to
	multiple controllers
	<div ng-include="'appdetails.html'"></div>
	</div>

	<div class="row alert alert-success">
	<div class="col-md-12">
	<h3>RealTime Object Monitoring</h3>
	<code>
	{{ printObject(oVar) }}
	</code>
	</div>
	</div>


	<div class="row">
	<div class="col-md-6">
	<div ng-controller="FirstCtrl">
	<div ng-include="'appdetails.html'"></div>
	</div>

	<br/>
	<br/>

	<div ng-controller="ThirdCtrl">
	<div ng-include="'appdetails.html'"></div>
	</div>
	</div>

	<div class="col-md-6">
	<div ng-controller="SecondCtrl">
	<div ng-include="'appdetails.html'"></div>
	</div>
	</div>
	</div>



	</div>
	</body>
	</html>