karataev/app.js

## app.js

angular.module('app', [])

  .controller('AppCtrl', ['ChuckQuotes', function (ChuckQuotes) {
    var vm = this;

    vm.jokesToFetch = ChuckQuotes.amount;

    vm.changeAmount = function (value) {
      ChuckQuotes.amount = vm.jokesToFetch;
    }
  }])

  .controller('QueueCtrl', ['ChuckQuotes', '$q', function (ChuckQuotes, $q) {
    var vm = this;

    vm.jokes = [];

    var startTime;
    var endTime;

    function start() {
      startTime = Date.now();
      return $q.resolve();
    }

    function theEnd() {
      endTime = Date.now();
      vm.delta = endTime - startTime;
    }

    vm.startFetchProcess = function () {
      startTime = Date.now();
      var sequence = start();
      for (var i = 0; i < ChuckQuotes.amount; i++) {
        sequence = sequence
          .then(ChuckQuotes.fetchRandom)
          .then(function (response) {
            vm.jokes.push(response.data.value);
          })
      }
      sequence.then(theEnd);
    };

  }])

  .controller('BundleCtrl', ['ChuckQuotes', '$q', function (ChuckQuotes, $q) {
    var vm = this;

    vm.jokes = [];

    var startTime;
    var endTime;

    function start() {
      startTime = Date.now();
      return $q.resolve();
    }

    function theEnd() {
      endTime = Date.now();
      vm.delta = endTime - startTime;
    }

    vm.startFetchProcess = function () {
      var promises = [];
      for (var i = 0; i < ChuckQuotes.amount; i++) {
        promises.push(ChuckQuotes.fetchRandom());
      }
      start()
        .then(function () {
          return $q.all(promises)
        })
        .then(function (response) {
          vm.jokes = response.map(function (x) {
            return x.data.value;
          })
        })
        .then(theEnd);
    };
  }])

  .factory('ChuckQuotes', ['$http', function ($http) {

    function fetchRandom() {
      return $http.get('http://api.icndb.com/jokes/random');
    }

    return {
      amount: 10,
      fetchRandom: fetchRandom
    }
  }])

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .holder {
      display: flex;
    }

    .column {
      width: 50%;
    }
  </style>

</head>
<body ng-app="app" ng-controller="AppCtrl as ctrl">

<h1>Промисы один за другим и пучком</h1>

<label>
  Сколько шуток получить?
  <input type="number" ng-model="ctrl.jokesToFetch" ng-change="ctrl.changeAmount()">
</label>

<div class="holder">
  <div ng-controller="QueueCtrl as qCtrl" class="column">
    <button ng-click="qCtrl.startFetchProcess()">Одну за другой</button>

    <p ng-repeat="joke in qCtrl.jokes">
      {{joke.id}}. {{joke.joke}}
    </p>
    <h4 ng-if="qCtrl.delta">Затрачено времени: {{qCtrl.delta}} мс</h4>
  </div>

  <div ng-controller="BundleCtrl as bCtrl" class="column">
    <button ng-click="bCtrl.startFetchProcess()">Все сразу</button>
    <p ng-repeat="joke in bCtrl.jokes">
      {{joke.id}}. {{joke.joke}}
    </p>
    <h4 ng-if="bCtrl.delta">Затрачено времени: {{bCtrl.delta}} мс</h4>
  </div>
</div>


<script src="../bower_components/angular/angular.js"></script>
<script src="app.js"></script>

</body>
</html>

	angular.module('app', [])

	.controller('AppCtrl', ['ChuckQuotes', function (ChuckQuotes) {
	var vm = this;

	vm.jokesToFetch = ChuckQuotes.amount;

	vm.changeAmount = function (value) {
	ChuckQuotes.amount = vm.jokesToFetch;
	}
	}])

	.controller('QueueCtrl', ['ChuckQuotes', '$q', function (ChuckQuotes, $q) {
	var vm = this;

	vm.jokes = [];

	var startTime;
	var endTime;

	function start() {
	startTime = Date.now();
	return $q.resolve();
	}

	function theEnd() {
	endTime = Date.now();
	vm.delta = endTime - startTime;
	}

	vm.startFetchProcess = function () {
	startTime = Date.now();
	var sequence = start();
	for (var i = 0; i < ChuckQuotes.amount; i++) {
	sequence = sequence
	.then(ChuckQuotes.fetchRandom)
	.then(function (response) {
	vm.jokes.push(response.data.value);
	})
	}
	sequence.then(theEnd);
	};

	}])

	.controller('BundleCtrl', ['ChuckQuotes', '$q', function (ChuckQuotes, $q) {
	var vm = this;

	vm.jokes = [];

	var startTime;
	var endTime;

	function start() {
	startTime = Date.now();
	return $q.resolve();
	}

	function theEnd() {
	endTime = Date.now();
	vm.delta = endTime - startTime;
	}

	vm.startFetchProcess = function () {
	var promises = [];
	for (var i = 0; i < ChuckQuotes.amount; i++) {
	promises.push(ChuckQuotes.fetchRandom());
	}
	start()
	.then(function () {
	return $q.all(promises)
	})
	.then(function (response) {
	vm.jokes = response.map(function (x) {
	return x.data.value;
	})
	})
	.then(theEnd);
	};
	}])

	.factory('ChuckQuotes', ['$http', function ($http) {

	function fetchRandom() {
	return $http.get('http://api.icndb.com/jokes/random');
	}

	return {
	amount: 10,
	fetchRandom: fetchRandom
	}
	}])
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<style>
	.holder {
	display: flex;
	}

	.column {
	width: 50%;
	}
	</style>

	</head>
	<body ng-app="app" ng-controller="AppCtrl as ctrl">

	<h1>Промисы один за другим и пучком</h1>

	<label>
	Сколько шуток получить?
	<input type="number" ng-model="ctrl.jokesToFetch" ng-change="ctrl.changeAmount()">
	</label>

	<div class="holder">
	<div ng-controller="QueueCtrl as qCtrl" class="column">
	<button ng-click="qCtrl.startFetchProcess()">Одну за другой</button>

	<p ng-repeat="joke in qCtrl.jokes">
	{{joke.id}}. {{joke.joke}}
	</p>
	<h4 ng-if="qCtrl.delta">Затрачено времени: {{qCtrl.delta}} мс</h4>
	</div>

	<div ng-controller="BundleCtrl as bCtrl" class="column">
	<button ng-click="bCtrl.startFetchProcess()">Все сразу</button>
	<p ng-repeat="joke in bCtrl.jokes">
	{{joke.id}}. {{joke.joke}}
	</p>
	<h4 ng-if="bCtrl.delta">Затрачено времени: {{bCtrl.delta}} мс</h4>
	</div>
	</div>


	<script src="../bower_components/angular/angular.js"></script>
	<script src="app.js"></script>

	</body>
	</html>