Skip to main content

Featureflow Angular 1 Client

Github: https://github.com/featureflow/featureflow-angular

Firstly, Get your Featureflow account at featureflow.io

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

note

๐Ÿ“˜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: ['a@b.com','d@d.com']
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);
}