JavaScript Network Speed Tester

JavaScript Network Speed Tester

JavaScript Bandwidth Checker

Controlling From External JavaScript App

As you might have noticed so far, by default the network tests are started automatically when the page containing the directive is loaded.
The following samples shows how to start the tests from an external JavaScript application.

Controlling the directive from a JavaScript AngularJS app

We will build a simple application that will trigger the bandwidth measurements when pressing a button.
Basically, the start trigger of the directive is controlled by the trigger-go attribute, so in order to start a bandwidth test we should set it to true from within our application. In order to control the trigger-go attribute, we will bind it to a variable (triggerGo) that will be controlled by our new external JavaScript AngularJS application. The application will just set it to true when a button will be pressed and that will actually trigger the bandwidth tests start.
Furthermore, because we want to control the test start, the directive should not start automatically; we do that by setting auto-trigger attribute to false. Also, we will hide the refresh buttons for the tests.
The code is listed here (please pay extra-attention on the HTML part to notice the bindings):

<html>
    <head>
        <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>
    </head>
    <body>
        <div ng-app="demo-app" ng-controller="demoAppController">
            <div wl-ng-network-speed-tester
                auto-trigger="false"
                show-refresh-button="false"
                trigger-go="triggerGo"></div>
            <button ng-click="start()">Start bandwidth test</button>
        </div>
        <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
            demoApp.controller('demoAppController', function($scope) {
                $scope.triggerGo = false;   //initially set the trigger to false

                //this function will start the tests by setting the triggerGo to true, triggerGo is bound to the trigger-go attribute of the directive
                $scope.start = function() {
                    $scope.triggerGo = true;
                }
            });
        </script>
    </body>
</html>

Looking at the JavaScript code above, after setting up our bandwidth module, we created a basic AngularJS module (application) called demo-app with a dependency to our bandwidth module wl-ng-network-speed-tester:

var demoApp = angular.module('demo-app', ['wl-ng-network-speed-tester']);

Then, we created a controller inside the demo application:

demoApp.controller('demoAppController', function($scope) {
    $scope.triggerGo = false;
    $scope.start = function() {
        $scope.triggerGo = true;
    }
});

The triggerGo variable is bound to our directive and we initially set triggerGo to false but we declare a function start() that will set it to true in order to actually trigger the tests.
The start() function is bound to the click event of the button using the ng-click AngularJS special directive:

<button ng-click="start()">Start bandwidth test</button>

In a very similar fashion, you can control the other attributes of the directive, so please check the demo applications that are included in the downloaded package or visit our site for other samples with source code.

Controlling the directive with jQuery

We will build the same application described above but this time we will use jQuery to control the directive.
It's worth to mention that even jQuery can be heavily used to build AngularJS directives for special DOM manipulations, mixing an external jQuery app with an AnularJS app is note quite common (read recommended) thing to do, but we will do it here anyway just for demonstration purposes only.
If external control of the directive is required, the previous approach should be used as it is done in the AngularJS way.
The code is listed here:

<html>
    <head>
        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="jquery.min.js"></script>
        <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>
    </head>
    <body>
        <div ng-app="wl-ng-network-speed-tester" wl-ng-network-speed-tester
            id="speed-tester"
            auto-trigger="false"></div>
        <button id="start-button">Start bandwidth test</button>
        <script type="text/javascript">
            //must set the bins url
            angular.module('wl-ng-network-speed-tester').value('bins', '../bins');

            $('#start-button').click(function() {
                //get the directive scope
                var speedTesterScope = angular.element($('#speed-tester')).scope().$$childTail;
                //start the tests
                speedTesterScope.go();
            });
        </script>
    </body>
</html>

To do this using jQuery, it's easier if we assign some IDs to the involved DOM elements: "speed-tester" for the speed tester DOM directive and "start-button" for the start button.
In order to gain control over the directive, we must find the actual scope of the directive and explicitly call its go() function. We do that in side the click() event of the start button:

$('#start-button').click(function() {
    var speedTesterScope = angular.element($('#speed-tester')).scope().$$childTail;
    speedTesterScope.go();
});

Controlling the directive from AngularJS app video tutorial

Regular License $6.00
Use by you or one client, in a single end product which end users are not charged for.

Extended License $30.00
Use by you or one client, in a single end product which end users can be charged for.

Short Information

WiseLoop JavaScript Network Speed Tester is an AngularJS module designed to offer a network bandwidth check against your internet server. Many server types are supported such as Apache HTTP, IIS, Node.js, nginx, Tomcat, Oracle HTTP, jetty and based on the download speed, it can also offer an estimation of internet cost that the user should pay for.

Buyer rating:
147 Sales