A Pen by Joe Watkins.

Angular.js---Load-data-from-API.markdown

Angular.js - Load data from API

Load data from external API using Angular.js

A Pen by Joe Watkins on CodePen.

License.

index.html

<div class="container" ng-app="myApp" ng-controller="beersCtrl">
  
  <h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js Load Data from API</h1>
  
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Brewery</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="beer in beers | orderBy:'beer'">
        <td>{{beer.name}}</td>
        <td>{{beer.description}}</td>
        <td>{{beer.brewery.name}}</td>
      </tr>
    </tbody>
  </table>
 
</div>

script.js

var myApp = angular.module("myApp", []);

myApp.factory("Beers",function($http){
  
  var openBeerAPI = {};
  
  openBeerAPI.getBeers = function(){
    return $http({
      method: "JSONP",
      url: "http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK"
    });
  }
  
  return openBeerAPI;
  
});

function beersCtrl($scope,Beers){
  
   $scope.beerList = [];
   
   Beers.getBeers().success(function(response){
     $scope.beers = response.beers;
   });
  
}

style.scss

body { margin: 1.5em; }

h1 span img { width: 50px; height: 50px; }

table { margin-top: 2em; }