Added error checking to AngularJS resources.

armory.js

@@ -18,15 +18,47 @@ window.WowArmory.ArmoryController = function($scope, $resource) {
    $scope.realm = { name: '', slug: '' };
    $scope.guild = '';
    // Resource for the realms.
    $scope.apiRealms = $resource('//:server/api/wow/realm/status',
        { server: 'us.battle.net', jsonp: window.WowArmory.NewCallback() },
        { get: { method: 'JSONP' }});
    $scope.realms = $scope.apiRealms.get();
    // Handle the realms and its resource(s).
    $scope.realmError = '';
    $scope.realms = [];
    $scope.fetchRealms = function(roundTrip) {
        if (roundTrip == undefined) {
            roundTrip = 0;
        }
        
        $scope.apiRealms = $resource('//:server/api/wow/realm/status',
            { server: 'us.battle.net', jsonp: window.WowArmory.NewCallback() },
            { get: { method: 'JSONP' }});
        $scope.realms = $scope.apiRealms.get(
            {},
            function () {
                $scope.realmError = '';    
            },
            function () {
                if (console) {
                    console.log('Error retrieving guilds from the remote server.');
                }
                
                if (++roundTrip < 3) {
                    $scope.realmError = 'Attempting to fetch realms [attempt ' + roundTrip + ' of 3].';
                    setTimeout(function() { $scope.fetchRealms(roundTrip); }, 3000);
                }
                else {
                    $scope.realmError = 'Exhausted all resources, battle.net sucks.';
                }
            });
    };
    $scope.fetchRealms(0);
    // Handle the members and its resource(s).
    $scope.memberError = '';
    $scope.members = [];
    $scope.fetchMembers = function() {
    $scope.fetchMembers = function(roundTrip) {
        if (roundTrip == undefined) {
            roundTrip = 0;
        }
        if ($scope.realm.slug.length > 0 && $scope.guild.length > 0) {
            // Resource for the guild members.
@@ -34,7 +66,25 @@ window.WowArmory.ArmoryController = function($scope, $resource) {
                { server: 'us.battle.net', realm: $scope.realm.slug, guild: $scope.guild, fields: 'members', jsonp: window.WowArmory.NewCallback() }, 
                { get: { method: 'JSONP' }});
            $scope.members = $scope.apiMembers.get();
            $scope.members = $scope.apiMembers.get(
                {}, 
                function() {
                    $scope.memberError = '';    
                }, 
                function() {
                    if (console) {
                        console.log('Error retrieving information from remote server.');
                    }
                    
                    if (++roundTrip < 3) {
                        $scope.memberError = 'Attempting to fetch members [attempt ' + roundTrip + ' of 3].';
                        setTimeout(function() { $scope.fetchMembers(roundTrip); }, 3000);
                    }
                    else {
                        $scope.memberError = 'Could not find the guild or any members.';
                    }
                    
                });
        }
    };
};

index.html

@@ -18,7 +18,8 @@
        <label for="myGuild">Guild</label>
        <input id="myGuild" type="text" ng-model="guild" placeholder="Guild name" />
        <button type="submit" ng-click="fetchMembers()">Get Members</button>
        <p style="font-style: italic;">example: "Hellscream" : "Rejected"</p>
        <button type="submit" ng-click="fetchMembers()" ng-disabled="realmError.length > 0">Get Members</button>
        </form>
        <hr />
@@ -31,6 +32,9 @@
        <hr />
        <h2>{{guild}}</h2>
        <p>{{realmError}}</p>
        <p>{{memberError}}</p>
        <div class="character" ng-repeat="member in members.members">
            <img class="thumbnail" ng:src="//us.battle.net/static-render/us/{{member.character.thumbnail}}" />

site.css

@@ -42,7 +42,6 @@ button, input, select {
}
.character .stats {
    float: left;
    text-align: left;
    vertical-align: text-top;
}