Promises

Experimenting with AngularJS.

by nickxbs

HTML

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <div style="display: flex; flex-direction: column;align-items:center">
        <div style="display: flex; flex-direction: row;padding: 5px;align-items:center">
            <button style="margin: 5px" ng-click="showPage(-1)">
                -
            </button>
            <button style="margin: 5px" ng-click="showPage(1)">
                +
            </button>
            <div>
                current page: {{currentPage}}
            </div>
        </div>
        <div style="padding: 5px;">
            {{breed}}
        </div>
        <img ng-src="{{image}}" style="max-width: 100%;" />
    </div>
</div>

JavaScript

'use strict';
var app = angular.module('angularTest', []);

app.controller('MainCtrl', ['$scope', '$q', '$http', function($scope, $q, $http) {

    var getAllBreeds = function() {
        return $http.get('https://dog.ceo/api/breeds/list/all')
            .then(function(obj) {
                return Object.keys(obj.data.message);
            });
    };
    var getSubreddByBreeds = function(subbreed) {
        return $http.get('https://dog.ceo/api/breed/' + subbreed + '/list')
            .then(function(obj) {
                return obj.data.message;
            });
    };
    var getImage = function(breed, subbreed) {
        if (breed) {
            var uri = subbreed ? breed + '/' + subbreed : breed;
            return $http.get('https://dog.ceo/api/breed/' + uri + '/images')
                .then(function(obj) {
                    return obj.data.message[0];
                });
        }
    };

    $scope.breed='Pluto';
    $scope.image='https://upload.wikimedia.org/wikipedia/it/4/4c/Pluto_%28Disney%29.jpg';
    var allBreed = [];
    
    getAllBreeds()
        .then(function(all) {
            allBreed = all;
            $scope.currentPage = Math.floor(Math.random() * all.length);
        });
     
    $scope.showPage = function(next) {
        var nextPage = $scope.currentPage + next;
        if (nextPage >= 0 && nextPage < allBreed.length) {
            $scope.currentPage = nextPage;
        }
    };
}]);
//1 - al caricamento stampare l'immagine della iesima razza random
//2 - navigare le razze caricando le immgini
//3 - controllare se la razza ha una sottorazze e per ognuna mostrare un'immagine