A question on app structure

#1

Firstly, I’m new to Ionic and AngularJS so bear that in mind as you tear my ugly code apart :wink:

Now, a few code snippets of what I currently have before I get into the questions:

A little state snippet:

...
.state('app.beacons', {
    url: '/beacons',
    views: {
      'menu-view': {
        templateUrl: 'templates/beacon-list.html',
        controller: 'BeaconsCtrl',
        resolve: {
          beacons: function(BeaconService) {
            return BeaconService.list();
          }
        }
      }
    }
  })
...

A little controller snippet:

 .controller('BeaconsCtrl', ['$scope', 'beacons', 'BeaconService', function($scope, beacons, BeaconService) {
    
      $scope.beacons = beacons.results;
    
      $scope.refreshBeaconList = function() {
        BeaconService.list().then(function( response ) {
          $scope.beacons = response.results
          $scope.$broadcast('scroll.refreshComplete');
        });
      }
      
$scope.joinBeacon = function( beaconId ) {
    BeaconService.updateFireteam( beaconId, 'join' ).then(function() {
      $scope.refreshBeaconList();
    });
  }

  $scope.leaveBeacon = function( beaconId ) {
    BeaconService.updateFireteam( beaconId, 'leave' ).then(function(){
      $scope.refreshBeaconList();
    });
  }

    }])

And finally a little service snippet (I’ve cut the irrelevant parts out of this one):

.service('BeaconService', ['$resource', '$q', 'appConfig', '$ionicLoading', function($resource, $q, appConfig, $ionicLoading ) {

  var Beacons = $resource(appConfig.parseRestBaseUrl + 'classes/beacons/:beaconId', {
    beaconId         : '@beaconId'
  }, {
    list : {
      method : 'GET',
      headers: appConfig.parseHttpsHeaders,
      params : {
        'include' : 'mission,region,platform,level,puser',
        'order'   : '-createdAt'
      }
    }
  });

  return {
    list : function() {
      var d = $q.defer();

      $ionicLoading.show({
        template: 'Loading...'
      });

      var beacons = Beacons.list({}, function( response ) {
        $ionicLoading.hide();
        d.resolve(response);
      }, function() {
        $ionicLoading.hide();
      });

      return d.promise
    }
  }
}])

So, questions, questions, questions…actually it’s one question but the ramifications for my app as a whole are pretty wide ranging so here it is:

I’m using the “resolve” phase to grab the list of records from the REST API up front and keep my controller code dry. Love that feature.

Problem is, I have a refresh function and two other functions that perform actions that are forcing me to make calls that are resolving a promise in the controller - resolve was supposed to help me stop that. Is there a way around this that I’m not aware of? I think I can just call $state.go on the current state but that feels…wrong somehow…?

#2

resolves or there if your really need to grab data before any other things can happen…
if you only load data to present them… i think it is enough to trigger that service function in your controller.

If you need to check if the user is authenticated before going to a state -> that would be a really good state-resolve case.

Keep in mind if you do not handle it, when your server function failes (gets rejected) you would not see anything because you get only redirected when your promise is resolved (thats the point why the parameter is called “resolve”).

The same problem when your connection is slow or your api server is slow… you will block the complete redirect mechanism.

Keep that in mind!

Calling a service function that makes a request is in most apps the main function in a controller because you need to get data and show data ;).

#3

Good point about not handling the promise in the case of a problem. I’ve got to stick a reject in there.

I think for this use case, the use of resolve is valid - there’s no way to go this view and not show the list. I’m just uber careful about getting into bad habits with new frameworks (especially when I’m teaching myself) as they can spiral out of control quickly :smile: