WiseLoop JavaScript Network Speed Tester 2.1.2
JavaScript Bandwidth Checker
Putting Them All Together

To show the flexibility of the provided network speed tester service we will build now a small app having some basic UI that will use the whole test suite.

        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="../bins/wl-ng-network-speed-tester.js"></script>
        <div class="well well-sm" ng-app="demo-app" ng-controller="demoAppController">
            <div><b>Ping time:</b> {{pingTime}} seconds</div>
            <div><b>Download info:</b> {{downloadData}}</div>
            <div><b>Upload info:</b> {{uploadData}}</div>
            <button class="btn btn-default" ng-click="refresh()"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
        <script type="text/javascript">
            //must set the bins url
            angular.module('wl-ng-network-speed-tester').value('bins', '../bins');

            //create an AngularJS module with a dependency to our bandwidth tester
            var demoApp = angular.module('demo-app', ['wl-ng-network-speed-tester']);
            //declare a controller with a dependency on network speed services
            demoApp.controller('demoAppController', function($scope, wlNgNSTService, wlNgNSTDataGenerator) {

                //initialize the scope
                $scope.pingTime = 0;
                $scope.downloadData = {};
                $scope.uploadData = {};

                //generate 1Mb of data to upload
                var uploadData = wlNgNSTDataGenerator.generate(102400);

                //refresh will be called from UI
                $scope.refresh = function() {

                    .then(function(pingTime) {
                        $scope.pingTime = pingTime;
                    }, function(error) {
                        $scope.pingTime = 0;

                    .then(function(ret) {
                        $scope.downloadData = ret;
                    }, function(error) {
                        $scope.downloadData = {};

                    .then(function(ret) {
                        $scope.uploadData = ret;
                    }, function(error) {
                        $scope.uploadData = {};


The result:

Network testing speed app with some minimal UI
Please note that the the directive will call this service methods multiple times (see iteration attribute) and will offer an average result increasing the accuracy of the measurement.