AngularJS service with HTTP request, offline status

Question

I have a AngularJS app with a service that load a HTTP request, that works all fine, but...

When my app is offline at the beginning, i show a "offline" page with a retry button, when i click the button and the APP is online I need the service to load the data.

The problem is that nothing happen when I click the button, the online check works fine but the web service is never called :(

my service:

.service('webService', function ($http, $q){
    var defferer = $q.defer()
    var webservice_url = "http://mywebservice_url/";
    $http.get(webservice_url+"?action=get_settings").success(function(data) {
        defferer.resolve(data);
    });
    return defferer.promise;
})

my controller:

.controller('NetworkCtrl', function($scope, $location, $timeout, webService) {
    $("#tryagain-button").click(function(e) {
        e.preventDefault();
        if(checkifonline()) {
            webService.then(function(data) {
                $scope.data = data;
            });
        }
    });
})

Answer 1

First of all, using jQuery within an controller is absolutely not how angularjs works. Use the ng-click directive. Even if your service would be implemented correctly, it wouldn't work since AngularJS will not get notified about model changes in the scope (you would need to use $apply, but just stick to the ng-click directive)

Second, the service function takes a constructor function. Within this constructor you're making an http request (while you're offline) and the promise is resolved. You will never make a new request, since the service always retuns the same promise. Your service should look like:

.service('webService', function ($http){
    var webservice_url = "http://mywebservice_url/";
    this.getSettings = function(){
        return $http.get(webservice_url+"?action=get_settings");
    };
})

and your controller:

.controller('NetworkCtrl', function($scope, $location, $timeout, webService) {
    $scope.onClick = function(){
        webService.getSettings().success(function(data){
            $scope.data = data;
        }
    }
})

and your HTML button:

<button ng-click="onClick()">reload</button>