PubNub Financial Data w/ Xignite UI
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> | |
| <script src="https://cdn.pubnub.com/sdk/pubnub-angular/pubnub-angular-4.0.2.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
| <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" /> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> | |
| </head> | |
| <body> | |
| <div class="container" ng-app="PubNubAngularApp" ng-controller="MyFinCtrl"> | |
| <pre> | |
| NOTE: make sure to update the PubNub keys below with your keys, | |
| and ensure that the financial data BLOCK is configured properly! | |
| </pre> | |
| <h3>MyCurrency Exchange Rates</h3> | |
| <div> | |
| Exchange Rates from / to | |
| <select ng-model="currencyOrigin"> | |
| <option value="USD">USD</option> | |
| <option value="GBP">GBP</option> | |
| <option value="EUR">EUR</option> | |
| </select> | |
| <select ng-model="currencyDestination"> | |
| <option value="USD">USD</option> | |
| <option value="GBP">GBP</option> | |
| <option value="EUR">EUR</option> | |
| </select> | |
| <input type="submit" ng-click="publish()" value="check!" /> | |
| </div> | |
| <br /><br /> | |
| <ul> | |
| <li ng-repeat="message in messages track by $index"> | |
| Source: {{message.currencyOrigin}} | |
| <br /> | |
| Destination: {{message.currencyDestination}} | |
| <br /> | |
| Quote: {{message.quote.Text}} | |
| </li> | |
| </ul> | |
| </div> | |
| <script> | |
| angular.module('PubNubAngularApp', ["pubnub.angular.service"]) | |
| .controller('MyFinCtrl', function($rootScope, $scope, Pubnub) { | |
| $scope.messages = []; | |
| $scope.channel = 'xignite-channel'; | |
| if (!$rootScope.initialized) { | |
| Pubnub.init({ | |
| publishKey: 'YOUR_PUB_KEY', | |
| subscribeKey: 'YOUR_SUB_KEY', | |
| ssl:true | |
| }); | |
| $rootScope.initialized = true; | |
| } | |
| var msgCallback = function(payload) { | |
| $scope.$apply(function() { | |
| $scope.messages.unshift(payload); | |
| }); | |
| }; | |
| $scope.publish = function() { | |
| Pubnub.publish({ | |
| channel: $scope.channel, | |
| message: {currencyOrigin:$scope.currencyOrigin, currencyDestination:$scope.currencyDestination} | |
| }); | |
| }; | |
| Pubnub.subscribe({ channels: [$scope.channel] }); | |
| Pubnub.addListener({ message: msgCallback }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment