Skip to content

Angular ngRoute

Daniel Wright edited this page Feb 25, 2016 · 12 revisions

Angular ngRoute extension for at.js library uses promises (delayed objects) within routes to provide a "flicker-free" implementation on view changes. This approach could be used in an application using Angular's ngRoute module. Conveniently, this extension can be added to the application using DTM.

##Prerequisites:

  1. AT.js library
  2. Angular library
  3. Angular ngRoute module

##Integration Instructions:

  1. Use at.js without the auto-created mbox
  2. Add the extension adobe.target.ext.angular.lib+ngroute.js to your page after angular.js and at.js OR add the above file's contents to the end of at.js in the Target Tool configuration of DTM.
  3. Initialize with adobe.target.ext.angular.initRoutes method by passing your Angular module as an argument. In DTM you might need to include this as a Sequential Javascript snippet in a Page Load Rule triggered at the bottom of the relevant page.

Simple example:

adobe.target.ext.angular.initRoutes(app);  // where app is a required argument, reference to an Angular module, can be object or string name

Example with all available options:

adobe.target.ext.angular.initRoutes(app,     // Angular module, object reference or string, required 
    {
        params: {param1:'val1',param2:'val2'},     // Target mbox parameters, optional
        mbox: 'custom-mbox-name',            // Target mbox name, optional
        selector: 'body',                    // CSS selector to inject Target content to, optional
        timeout: 5000,                       // Target call timeout
        allowedRoutesFilter: [],             // Blank for all routes or restrict to specific routes: ['/','/about','/item/:id']
        disallowedRoutesFilter: [],          // Exclude specific routes: ['/login','/privacy']
        debug: true                          // Print console statements
    });

##Demo Route Change Example

Clone this wiki locally