D3 Examples - ng-online Checking online status in AngularJS app // source http://jsbin.com/lesoru/1

xxxxxxxxxx
 
<meta name="description" content="Checking online status in AngularJS app" />
  <title>ng-online</title>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">  
​
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
  <script src="https://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 = 'https://parleyvale.com:3000/api/'; 
    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 = 'https://parleyvale.com:3000/api/'; 
    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>
    