Angular UIRouter
Angular UIRouter extension for at.js library uses promises (delayed objects) within states to provide a "flicker-free" implementation on view changes. This approach could be used in an application using Angular's UIRouter
module. Conveniently, this extension can be added to the application using DTM.
##Prerequisites:
- at.js library
- Angular library
- Angular UIRouter module
##Integration Instructions:
- Use at.js without the auto-created mbox
- Choose an appropriate extension distribution and include it. Note:
at-angular-common
extension is required byat-angular-ui-router
extension, so if you'll be using only one of the Angular extensions in your project, it makes sense to include the+common
version. Otherwise, you'll probably want to include the at-angular-common extension separately, and choose the distribution without+common
. - The extension should be added to your page after angular.js, angular-ui-router.js and at.js OR it could be added to the end of at.js in the Target Tool configuration of DTM.
- Initialize with
adobe.target.ext.angular.initStates
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 Page.
Simple example:
adobe.target.ext.angular.initStates(app); // where app is a required argument, reference to an Angular module, can be an object or a string name
Example with all available options:
adobe.target.ext.angular.initStates(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']
});
##Demo State Change Example
These extensions are provided free to developers as a starting point to integrate at.js with their Single Page Application. Extensions are not always updated for the latest at.js version. Customization may be required to integrate successfully with your single page app.
Issues: place send feedback and questions through Github issues. We will respond as best we can. Please note, these extensions are not supported by Adobe Client Care or Target Engineering.