breweryDB with angularjs
HTML
<div ng-app="app" ng-controller="Cntrl">
<p>dev note: this angularjs app uses the BreweryDB api..
as posted on: <a href="http://stackoverflow.com/posts/30338776/">stackoverflow</a></p>
<em>currently this only works locally using Safari due to access-control-allow-origin header concerns</em>
<hr><br>
<input type="text" ng-model="beerName" placeholder="beer name">
<button type="button" ng-click="findBeer(beerName)">use http.get</button>
<button type="button" ng-click="findBeerJsonp(beerName)">use http.jsonp</button>
<p><strong>beer name:</strong> {{beer.name}} </p>
<p><strong>beer description:</strong> {{beer.description}} </p>
</div>
JavaScript
angular.module("app",[])
.factory('Factory', function($http, $q) {
var apiKey="YOUR API KEY GOES HERE"; //<------------------------API KEY---
var url = "http://api.brewerydb.com/v2/beers?&key="+apiKey;
var exports = {};
return exports = {
getBeer: function(beerName) {
return $http.get(url+"&name="+beerName, {cache: true})
.success(function(result) {
console.log(result);
return result;
});
},
getBeerJsonp: function(beerName) {
return $http.jsonp(url+"&name="+beerName+"&callback=JSON_CALLBACK", {cache: true})
.then(function(result) {
return result;
});
}
}
})
.controller('Cntrl', function($scope, Factory) {
$scope.findBeer = function (beerName) {
$scope.beer = '';
return Factory.getBeer(beerName)
.then(function(jsonData) {
console.log(jsonData.data);
$scope.beer = jsonData.data.data[0];
});
};
$scope.findBeerJsonp = function (beerName) {
$scope.beer = '';
return Factory.getBeer(beerName)
.then(function(jsonData) {
console.log(jsonData.data);
$scope.beer = jsonData.data.data[0];
});
};
});