randith
diff --git a/‎.idea/workspace.xml
+87-103 b/‎.idea/workspace.xml
+87-103
diff --git a/‎sample/img/loading.gif
3.01 KB b/‎sample/img/loading.gif
3.01 KB
diff --git a/‎sample/index.html
+31-8 b/‎sample/index.html
+31-8
diff --git a/‎sample/js/controllers.js
+41-6 b/‎sample/js/controllers.js
+41-6
diff --git a/‎sample/partials/.gitkeep b/‎sample/partials/.gitkeep
diff --git a/‎sample/partials/partial1.html
-1 b/‎sample/partials/partial1.html
-1
diff --git a/‎sample/partials/partial2.html
-5 b/‎sample/partials/partial2.html
-5
@@ -4,25 +4,48 @@
   <meta charset="utf-8">
   <title>My AngularJS App</title>
 
+    <style type="text/css">
+        body { font-family: Arial; font-size: 18px;}
+
+        div.box { border: 1px solid black; margin:5px; border-radius:11px; padding: 3px; float:left;}
+    </style>
+
 </head>
 <body>
 
-<h3>Open developer tools (F12) and wait for the beacon request in your network tab</h3>
+<span style="font-size:11px;">&larr; <a href="http://code.mendhak.com/angular-performance/">return</a></span>
+<h3>Open developer tools (F12) and wait for the beacon.png request in your network tab</h3>
+<h4>These DIVs are faking API calls and will complete in 1-10 seconds</h4>
+
 
 <div data-performance="PageName" data-performance-beacon="img/beacon.png">
 
 
+    <div style="float:left;">
 
-    <div data-ng-controller="Controller1" data-performance-loaded="Loaded">
-        <p>DIV 1 contents:</p>
-        {{ Loaded }}
-    </div>
+        <div class="box" data-ng-controller="Controller1" data-performance-loaded="Loaded">
+            <p>DIV 1 contents:</p>
+            <div ng-show="Loaded">{{ Loaded }}</div>
+            <div ng-hide="Loaded"><img src="img/loading.gif" /></div>
+        </div>
+
+        <div  class="box" data-ng-controller="Controller2" data-performance-loaded="Products">
+            <p>DIV 2 contents:</p>
+            <div ng-hide="Products"><img src="img/loading.gif" /></div>
+            <div ng-show="Products" data-ng-repeat="n in Products.Names">{{ n }}</div>
+        </div>
 
-    <div data-ng-controller="Controller2" data-performance-loaded="Products">
-        <p>DIV 2 contents:</p>
-        <div data-ng-repeat="n in Products.Names">{{ n }}</div>
+        <div  class="box" data-ng-controller="Controller3" data-performance-loaded="Status.Complete">
+            <p>DIV 3 contents:</p>
+            <div ng-hide="Status.Complete"><img src="img/loading.gif" /></div>
+            <div ng-show="Status.Complete" >Three API calls complete</div>
+        </div>
     </div>
 
+
+
+
+
 </div>
 
 
 
@@ -6,21 +6,56 @@ var controllers = angular.module('myApp.controllers', [])
 
 controllers.controller('Controller1', ['$scope', '$timeout', function($scope, $timeout) {
 
-        console.log("A long running process");
-
         $timeout(function() {
             $scope.Loaded = true;
-        }, 3000);
+            console.log("Controller 1 Done");
+        }, (Math.random()*10)*1000);
   }]);
 
 
 controllers.controller('Controller2', ['$scope', '$timeout', function($scope, $timeout){
 
-    console.log("Another long running process");
+
 
     $timeout(function() {
         $scope.Products = { Names: ['Banana','Phone'], SaleType: 'TodayOnly' };
-    }, 3330);
+        console.log("Controller 2 Done");
+    }, (Math.random()*10)*1000);
+
+
+}]);
+
+
+
+
+controllers.controller('Controller3', ['$scope', '$timeout', function($scope, $timeout){
+
+    var loaded = function() {
+        if($scope.Object1 && $scope.Object2 && $scope.Object3){
+            console.log("Controller 3 Done");
+            $scope.Status = { Complete: true }
+        }
+    }
+
+
+    $timeout(function() {
+        $scope.Object1 = {x:193};
+
+        loaded();
+    }, (Math.random()*10)*1000);
+
+
+    $timeout(function() {
+        $scope.Object2 = {y:293};
+
+        loaded();
+    }, (Math.random()*10)*1000);
+
+
+    $timeout(function() {
+        $scope.Object3 = {z:444};
 
+        loaded();
+    }, (Math.random()*10)*1000);
 
-}]);
+}]);