adding a code based feature flag to the demo, updating readme

Author: JeremyCarlsten

README.md

@@ -98,6 +98,16 @@ If you need to *hide* elements when a flag is enabled, add the `feature-flag-hid
 </div>
 ```
 
+### Toggling CodeBlocks
+
+The featureFlags.isOn method allows simple toggling of elements based on feature flags, e.g:
+
+```javascript
+  if(featureFlags.isOn('code')) {
+    alert("Hello!");
+  }
+```
+
 ### Running the demo
 
 Running the demo is easy assuming you have Gulp installed:

demo/data/flags.json

@@ -22,5 +22,11 @@
     "active": false,
     "name": "Settings",
     "description": "Configure the user's settings and preferences for the app."
+  },
+  {
+    "key": "code",
+    "active": true,
+    "name": "Code",
+    "description": "Code based flag"
   }
 ]

demo/index.html

@@ -19,6 +19,7 @@ <h1>My App</h1>
     <div messaging feature-flag="messages"></div>
     <div user-profile feature-flag="userProfile"></div>
     <div settings feature-flag="settings"></div>
+    <code></code>
   </div>
   <div class="flagContainer" feature-flag-overrides></div>
 </body>

demo/scripts/directives.js

@@ -31,6 +31,25 @@ angular.module('my-app')
       replace: true
     };
   })
+  .directive('code', function(featureFlags) {
+      return {
+        restrict: 'E',
+        scope: {},
+        template: '<div class="panel"><button ng-click="codeCtrl.alert()">Click Me!</button></div>',
+        replace: true,
+        controllerAs: 'codeCtrl',
+        controller: function(){
+          var self = this;
+
+          self.alert = function(){
+            if(featureFlags.isOn('code')) {
+              alert("Hello!");
+            }
+          };
+
+        }
+      };
+    })
   .run(function(featureFlags, $http) {
     featureFlags.set($http.get('../data/flags.json'));
   });