0

I am very new with AngularJS so I need quite some pointing in the right direction.

The task is to create some kind of widget that displays how much time it takes from any user action until the requested page finishes rendering.

We are going to be using AngularJS at the presentation layer and the back-end will be Microsoft's Web API.

So I figured I could use the browser's Navigation Timing API and wrap it on an AngularJS directive so I tried this:

angular.module('performanceDirective', [])
   .directive('pagePerformance', function(){
      return {
        restrict: 'AE',
        replace: 'true',
        template: '<div><label id="loadTimeEllapsed">Total Load Time:{{totalLoadTime}}</label></div>',
        scope: {},
        link: function (scope, elem, attrs) {
            scope.$watch('window.performance.timing', function (newValue, oldValue) {
               var timing = window.performance.timing;
               var userTime = timing.loadEventEnd - timing.navigationStart;

               scope.totalLoadTime = userTime;
            });
        }
      };
   });

But it seems that there is something missing because even though I am doing actions that call the back-end the number that gets displayed after the home page loads is never updated.

Is this something that actually would work, provided we fix whatever is failing, or is this a dead end and we need to find another option?

UPDATE

The use of the directive has nothing to it, basically it is just the element thrown on a page:

<body ng-app="myApp">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li><a href="#/someAction">Some Action</a></li>
                </ul>
            </div>
        </div>

    <div class="row">
        <div class="span4"><data-page-performance /></div> <!-- The Directive -->
        <div class="span10" ng-view></div>
    </div>
</body>

Apparently this directive only works if I refresh the page after I have already navigated to it but if I click on an element that will trigger an action on the AngularJS controller the performance number is completely unaffected.

Sergio Romero
  • 6,477
  • 11
  • 41
  • 71
  • Based on this directive code, I do not see any mechanism for updating the totalLoadTime. It is set once, most likely the first time the directive is used, and then never changed again. If you could show us this directive in action; it may help us offer you advice. – JeffryHouser May 22 '14 at 20:29
  • @JeffryHouser - My goal would be have the numbers updated as soon as the navigation timing API gets new numbers so the actual production code is not polluted with performance calls. Does that make sense? – Sergio Romero May 22 '14 at 20:51
  • The goal makes sense; but your existing code won't do that; as you already discovered. You either need to add a function/property to the directive that will update the value; or you need some code (possibly a watch on window.performance.timing?) to make the value auto upate. – JeffryHouser May 22 '14 at 21:02
  • @JeffryHouser - Could you elaborate a little bit more? I tried adding the watch in the way I'm showing on the updated code but the behavior was completely unaffected. – Sergio Romero May 23 '14 at 13:11
  • Can you share your code and/or put together a Plunker? – JeffryHouser May 23 '14 at 13:36
  • It is actually not clear what you are trying to achieve. What are "actions" ? What do you want to meassure ? The duration of the last action ? What if there are multiple actions happening simultaneously ? What about actions that do not affect the view (so there is no rendering) ? I think you should first think carefully and decide what exactly you want to meassure, then look for a way to meassure it. – gkalpak May 23 '14 at 14:15
  • 1
    With `scope.$watch('window.performance.timing' ...` you are creating a watch for `scope.window.performance.timing`, which obviously does not exist. – przno May 23 '14 at 15:49

0 Answers0