BOOMR.plugins. Angular


The Angular plugin allows you to automatically monitor Single Page App (SPA) navigations for AngularJS 1.x websites.

Note: This plugins requires the BOOMR.plugins.SPA and BOOMR.plugins.AutoXHR plugins.

For details on how Boomerang Single Page App instrumentation works, see the BOOMR.plugins.SPA documentation.

For information on how to include this plugin, see the Building tutorial.

Compatibility

Note: For AngularJS 2.x, use the BOOMR.plugins.History plugin.

Beacon Parameters

This plugin does not add any additional beacon parameters beyond the BOOMR.plugins.SPA plugin.

Usage

First, include the BOOMR.plugins.SPA, BOOMR.plugins.Angular and BOOMR.plugins.AutoXHR plugins. See Building for details.

Next, you need to also "hook" Boomerang into the AngularJS lifecycle events.

Somewhere in your AngularJS app or module startup, add a .run() block with a $rootScope dependency. In this run block, add the code below, calling BOOMR.plugins.Angular.hook.

Example:

angular.module("app")
  .run(["$rootScope", function($rootScope) {
    var hadRouteChange = false;

    // The following listener is required if you're using ng-router
    $rootScope.$on("$routeChangeStart", function() {
      hadRouteChange = true;
    });

    // The following listener is required if you're using ui-router
    $rootScope.$on("$stateChangeStart", function() {
      hadRouteChange = true;
    });

    function hookAngularBoomerang() {
      if (window.BOOMR && BOOMR.version) {
        if (BOOMR.plugins && BOOMR.plugins.Angular) {
          BOOMR.plugins.Angular.hook($rootScope, hadRouteChange);
        }
        return true;
      }
    }

    if (!hookAngularBoomerang()) {
      if (document.addEventListener) {
        document.addEventListener("onBoomerangLoaded", hookAngularBoomerang);
      } else if (document.attachEvent) {
        document.attachEvent("onpropertychange", function(e) {
          e = e || window.event;
          if (e && e.propertyName === "onBoomerangLoaded") {
            hookAngularBoomerang();
          }
        });
      }
  }]);

Methods


disable()

Disables the AngularJS plugin

Returns:

BOOMR.plugins.Angular The Angular plugin for chaining


enable()

Enables the AngularJS plugin

Returns:

BOOMR.plugins.Angular The Angular plugin for chaining


hook($rootScope [, hadRouteChange] [, options])

Hooks Boomerang into the AngularJS lifecycle events

Parameters:

Name Type Argument Description
$rootScope object

AngularJS $rootScope dependecy

hadRouteChange boolean <optional>

Whether or not there was a route change event prior to this hook() call

options object <optional>

Options

Returns:

BOOMR.plugins.Angular The Angular plugin for chaining


is_complete()

This plugin is always complete (ready to send a beacon)

Returns:

Type: boolean

true