Last active
March 25, 2016 18:15
-
-
Save dmgig/a802ce098656f2dcaedd to your computer and use it in GitHub Desktop.
Sample AngularJS Page with Services to Monitor URL Responses and Update UI
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> | |
| <script src="node_modules/jquery/dist/jquery.min.js"></script> | |
| <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script> | |
| </head> | |
| <body> | |
| <div class="container" ng-app="DataValidationApp"> | |
| <div class="row" ng-controller="DataValidationController"> | |
| <h1>Data Validation {{test}}</h1> | |
| <div id="dvContainer"> | |
| <div class="col-md-3" ng-repeat="watch in dv_watches"> | |
| <div class="alert alert-{{watch.type}}" role="alert"> | |
| <span class="glyphicon glyphicon-{{watch.icon}}" aria-hidden="true"></span> | |
| <span class="name"> | |
| <a ng-href="{{watch.url}}" target="{{watch.url}}"> | |
| {{watch.name}} | |
| </a> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="application/javascript"> | |
| var DataValidationApp; | |
| DataValidationApp = angular.module('DataValidationApp', []) | |
| DataValidationApp.controller('DataValidationController', DataValidationController); | |
| function DataValidationController($scope, $http, $parse, $log, DVWatch) | |
| { | |
| $scope.dv_watches = [ | |
| { name: "Test 1", url: "test-random.php", type:"warning", icon:"refresh" }, | |
| { name: "Test 2", url: "test-random.php", type:"warning", icon:"refresh" }, | |
| { name: "Test 3", url: "test-random.php", type:"warning", icon:"refresh" }, | |
| { name: "Test 4", url: "test-random.php", type:"warning", icon:"refresh" }, | |
| { name: "Test 5", url: "test-random.php", type:"warning", icon:"refresh" } | |
| ] | |
| DVWatch.setWatches($scope.dv_watches).startWatching() | |
| $scope.$watch(DVWatch.updateWatches, function(oldVal, newVal){ | |
| $scope.dv_watches = DVWatch.updateWatches() | |
| }); | |
| } | |
| /** | |
| * for a list of urls (with display names) | |
| */ | |
| DataValidationApp.service("DVWatch", function($http){ | |
| var timer | |
| var parseResult = function(result){ | |
| if(result.result === 'OK') | |
| var update = { icon: "ok", type: "success" } | |
| else var update = { icon: "remove", type: "danger" } | |
| return angular.extend(result, update) | |
| } | |
| var DVWatch = { | |
| watches: [], | |
| promises: [], | |
| setWatches: function(watches){ | |
| this.watches = watches | |
| return DVWatch | |
| }, | |
| startWatching: function(){ | |
| DVWatch.watches.forEach(function(watch, i){ | |
| DVWatch.promises.push($http.get(watch.url).then(function(response){ | |
| DVWatch.watches[i].result = response.data | |
| DVWatch.watches[i] = parseResult(DVWatch.watches[i]); | |
| })) | |
| }) | |
| timer = setTimeout(DVWatch.startWatching, 500) | |
| return DVWatch | |
| }, | |
| stopWatching: function(){ | |
| timer = null | |
| }, | |
| updateWatches: function(){ | |
| return DVWatch.watches; | |
| } | |
| } | |
| return DVWatch; | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment