Angular 1 Implementation
We have a very simple ng-featureflow provider which you may use in in your angular application:
You can see a running example in codepan:
https://codepen.io/oliveroldfield/pen/ZdaVZo
1. Install dependencies
via CDN
<script crossorigin="anonymous" src="https://cdn.featureflow.io/featureflow.min.js"></script>
<script src="https://cdn.featureflow.io/v1.3.3/featureflow-ng.js"></script>
via bower:
bower install featureflow-ng
via npm
npm install --save featureflow-ng
2. Register the module
angular.module('myApp', [
...
'ng-featureflow'
...
3. Initialise in angular.config
Obtain your 'JavaScript Environment Api Key' or 'JavaScript Project Api Key' from the Api Keys link in the top right of the environment admin page and pass it to the .init funtion
What's the difference between Keys?
The 'JavaScript Environment Api Key' is specific to an environment - we recommend you use this key in your production environment.
The 'JavaScript Project Api Key' is common across all environments - you can then use the 'Url' value in the environment settings to match your environment by its Url. You may use a wildcard - for example '.test.mysite.com' may match your 'TEST' environment.
app.config(function (featureflowProvider) {
var FF_API_KEY = 'js-env-xxxxxxxxx';
featureflowProvider.init(FF_API_KEY, {});
}
4. Expose and evaluate in an ng-if statement
app.controller('MyController', function($scope, featureflow) {
$scope.featureflow = featureflow;
// or e.g:
//vm.featureflow. = featureflow;
...
<div class="col-md-7" ng-if="featureflow.evaluate('example-feature').is('on')">
<div style="position: relative;">
ITS ON!
</div>
</div>
5. Update the featureflowUser on login
var acc = {//loaded from login
roles: ['admin','manager'],
firstName: 'John',
lastName: 'Smith',
company: 'Acme Org',
emails: ['[email protected]','[email protected]']
state: 'NSW'
admin: true
}
if(loggedIn && acc){ //if logged in then update
var user = {
id: acc.accountId,
attributes: {
role: acc.roles,
name: acc.firstName + " " + acc.lastName,
company: acc.company,
email: acc.emails,
state: acc.state
}
};
featureflow.updateUser(user);
}
Updated almost 3 years ago