Alternative

[ProLoser]

This is how I added optimizely to my app:

/**
 * Adds Optimizely experiments to Toggles
 *
 * @NOTE Experiment names must match toggle names
 *      - Case-insensitive
 *      - Can use a ':' to separate toggle name and additional description
 *        Example: "newBanner: skewed to ios only"
 * @NOTE Variation names should match toggle values
 *    - 'Original' variation is treated as undefined aka: FALSEY
 *    - Any other variation name is set to a string of the variation name aka: TRUTHY
 *
 */
angular.module('app.core')
.run(function($rootScope, $window, Toggles) {
  if (!$window.optimizely)
    return;

  function updateToggles() {
    $window.optimizely.data.state.activeExperiments.forEach( experiment => {
      let name = $window.optimizely.data.experiments[experiment].name.toLowerCase().split(':').shift().trim();
      let variation = $window.optimizely.data.state.variationNamesMap[experiment].toLowerCase().trim();
      if (variation !== 'original')
        Toggles[name] = variation;
    });
  }

  // Initialize the toggles
  updateToggles();

  // Update toggles whenever the page changes
  $rootScope.$on('$locationChangeSuccess', () => {
    $window.optimizely && $window.optimizely.push('activate');
    updateToggles();
  });
});

So experiments and variations map as such:

Experiment Name	Variation Names	Toggle Name	Toggle Values
NewNav	Original, Active	newnav	undefined, 'active'
NewNav: San Francisco Only	Original, Active	newnav	undefined, 'active'
Banners	Variation 1	banners	'variation 1'
banner: Holiday Variations	Christmas, Hanukkah, New Years	banner	'christmas', 'hanukkah', 'new years'

You can then inject Toggles anywhere in your app and act upon it and the designers do not have to write any javascript, you simply agree with them on toggle names and (if more than one) variation names.

[brandonjp]

@ProLoser when you say "Toggles" are you talking about this 2013 repo with 1 star and 0 forks? https://github.com/ryannorris/angular-toggles

[ProLoser]

@brandonjp no.

app
  .constant('Toggles', {})
  .run(function($rootScope, Toggles){
    $rootScope.Toggles = Toggles;
  });

<nav class="nav" ng-if="Toggles.newnav">
  ...
</nav>

Anything else seems overkill to me.