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.

7
  • 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. May 22, 2014 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? May 22, 2014 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. May 22, 2014 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. May 23, 2014 at 13:11
  • 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, 2014 at 15:49

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.