Skip to content

Instantly share code, notes, and snippets.

@darrylhebbes

darrylhebbes/index.html

Created April 8, 2015 07:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save darrylhebbes/2d7419e032f980b74496 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save darrylhebbes/2d7419e032f980b74496 to your computer and use it in GitHub Desktop.
Download ZIP
#Javascript: Checking online status in AngularJS app
Raw
index.html
<meta name="description" content="Checking online status in AngularJS app" />
<title>ng-online</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="main.js"></script>
<body ng-app="App">
<div ng-controller="AppController">
<span class="glyphicon glyphicon-signal" ng-show="online"></span>
<span class="glyphicon glyphicon-ban-circle" ng-show="!online"></span>
{{dog}}<br>
online: {{online}}<br>
<input type="text" name="" ng-model="dog" placeholder=""><br>
<input type="button" name="" value="change fred" ng-click="change()">
<input type="button" name="" value="{{running}}" ng-click="toggle()">
</div>
<script id="jsbin-javascript">
var app = angular.module("App", []);
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('Interceptor');
});
app.run(function(Factory, $rootScope){
console.log('running')
Factory.ckIfOnline();
})
app.factory('Factory', function($q, $http, $rootScope){
var httpLoc = 'http://testshop01.designskins.com/';
return{
ckIfOnline: function(){
$http.get(httpLoc);
},
change: function(){
return 'duck'
}
}
})
app.factory('Interceptor', function($rootScope){
var Interceptor ={
responseError: function(response){
$rootScope.status = response.status;
$rootScope.online = false;
return response;
},
response: function(response){
$rootScope.status = response.status;
$rootScope.online = true;
return response;
}
};
return Interceptor;
})
app.controller("AppController", function($scope, Factory, $rootScope, $interval){
var running;
$scope.running='toggle server polling '
console.log($rootScope.online)
$scope.online = $rootScope.online
$scope.dog="fred";
$scope.change =function(){
$scope.dog=Factory.change()
}
Factory.ckIfOnline();
$rootScope.$watch('online', function(newValue, oldValue){
if (newValue !== oldValue) {
$scope.online=$rootScope.online;
}
});
var runUpd = function(){
running = $interval(function(){
console.log('running update')
Factory.ckIfOnline();
},5000);
};
var cancelRunning = function() {
if (running) {$interval.cancel(running);}
};
//runUpd();
$scope.toggle=function(){
if (running) {
$interval.cancel(running);
running=null;
$scope.running='not polling server';
}else{
$scope.running='polling server';
running = $interval(function(){
console.log('running update')
Factory.ckIfOnline();
},5000);
}
}
});
</script>
<script id="jsbin-source-html" type="text/html"> <meta name="description" content="Checking online status in AngularJS app" />
<title>ng-online</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"><\/script>
<script src="main.js"><\/script>
<body ng-app="App">
<div ng-controller="AppController">
<span class="glyphicon glyphicon-signal" ng-show="online"></span>
<span class="glyphicon glyphicon-ban-circle" ng-show="!online"></span>
{{dog}}<br>
online: {{online}}<br>
<input type="text" name="" ng-model="dog" placeholder=""><br>
<input type="button" name="" value="change fred" ng-click="change()">
<input type="button" name="" value="{{running}}" ng-click="toggle()">
</div>
</body></script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module("App", []);
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('Interceptor');
});
app.run(function(Factory, $rootScope){
console.log('running')
Factory.ckIfOnline();
})
app.factory('Factory', function($q, $http, $rootScope){
var httpLoc = 'http://testshop01.designskins.com/';
return{
ckIfOnline: function(){
$http.get(httpLoc);
},
change: function(){
return 'duck'
}
}
})
app.factory('Interceptor', function($rootScope){
var Interceptor ={
responseError: function(response){
$rootScope.status = response.status;
$rootScope.online = false;
return response;
},
response: function(response){
$rootScope.status = response.status;
$rootScope.online = true;
return response;
}
};
return Interceptor;
})
app.controller("AppController", function($scope, Factory, $rootScope, $interval){
var running;
$scope.running='toggle server polling '
console.log($rootScope.online)
$scope.online = $rootScope.online
$scope.dog="fred";
$scope.change =function(){
$scope.dog=Factory.change()
}
Factory.ckIfOnline();
$rootScope.$watch('online', function(newValue, oldValue){
if (newValue !== oldValue) {
$scope.online=$rootScope.online;
}
});
var runUpd = function(){
running = $interval(function(){
console.log('running update')
Factory.ckIfOnline();
},5000);
};
var cancelRunning = function() {
if (running) {$interval.cancel(running);}
};
//runUpd();
$scope.toggle=function(){
if (running) {
$interval.cancel(running);
running=null;
$scope.running='not polling server';
}else{
$scope.running='polling server';
running = $interval(function(){
console.log('running update')
Factory.ckIfOnline();
},5000);
}
}
});
</script></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment