Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="multiple-requests">
<head lang="en">
  <meta charset="UTF-8">
  <title>AngularJS Multiple HTTP Requests</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"/>
</head>
<body ng-controller="AppCtrl as app">
​
<div class="container">
  <h2>{{app.angularInfo.name}}</h2>
  <div class="row">
    <div class="col-md-2">
      <img ng-src="{{app.angularInfo.avatarUrl}}" class="img-responsive"/>
    </div>
    <div class="col-md-10">
      <div class="col-md-6">
        <h3>Repos</h3>
        <div class="list-group">
          <a ng-repeat="repo in app.angularInfo.repos" class="list-group-item">
            {{repo.name}}
          </a>
        </div>
      </div>
      <div class="col-md-6">
        <h3>Events</h3>
        <div class="list-group">
          <a ng-repeat="event in app.angularInfo.events" class="list-group-item">
            {{event.type}}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
</script>
</body>
</html>
 
angular.module('multiple-requests', [])
​
  .controller('AppCtrl', function AppCtrl(githubService) {
    var app = this;
​
    githubService.getAngularInfo().then(function(angularInfo) {
      console.log(angularInfo);
      app.angularInfo = angularInfo;
    });
  })
​
  .service('githubService', function GithubService($http, $q,$timeout) {
    var githubService = this,
      ANGULAR_USER = 'https://api.github.com/users/angular',
      ANGULAR_REPOS = 'https://api.github.com/users/angular/repos',
      ANGULAR_EVENTS = 'https://api.github.com/users/angular/events';
​
    githubService.getUserData = function getUserData() {
      return $http.get(ANGULAR_USER).then(function (userData) {
​
        return {
          name: userData.data.name,
          avatarUrl: userData.data.avatar_url,
          repoCount: userData.data.public_repos
        };
      });
    };
​
    githubService.getUserRepos = function getUserRepos() {
      return $http.get(ANGULAR_REPOS).then(function (reposData) {
        return _.map(reposData.data, function (data) {
          return {
            name: data.name,
            description: data.description,
            stars: data.stargazers_count,
            forks: data.forks_count,
            isFork: data.fork
          };
        });
      });
    };
​
    githubService.getUserEvents = function getUserEvents() {
      return 
      $timeout(
      $http.get(ANGULAR_EVENTS).then(function (eventsData) {
      
        return _.map(eventsData.data, function (data) {
          return {
            type: data.type,
            user: data.actor.login,
            avatarUrl: data.actor.avatar_url,
            createdOn: data.created_at,
            repo: data.repo.name
          };
        });
      }),2000);
      
    };
​
    githubService.getAngularInfo = function () {
      var userPromise = githubService.getUserData(),
        userEventsPromise = githubService.getUserEvents(),
        userReposPromise = githubService.getUserRepos();
​
      return $q.all([userPromise, userEventsPromise, userReposPromise]).then(function(resultArray) {
        var userData = resultArray[0],
          userEventsData = resultArray[1],
          userReposData = resultArray[2];
​
        console.log(resultArray);
​
        return _.extend(userData, {
          events: userEventsData,
          repos: userReposData
        });
      });
    };
  })
;
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers