Just yesterday, I delved into the world of AngularJS and began working on an app for practice. The goal is to create an application that allows users to enter a search term in a bar and display relevant images.
Here's a glimpse of my code:
HTML
<body>
<div id="content" ng-app="FlickerApp" ng-controller="MainController">
<h3>Search for images in real-time!</h3>
<input type="text" ng-model="searchPic" />
<button class="btn btn-primary" ng-click="showPics()">Search</button>
<div id="flickerPics" >
<ul ng-repeat="ph in data.photo">
<li>
{{ ph.id }}
{{ response }}
<img src="https://farm{{ ph.farm }}.staticflickr.com/{{ ph.server}}/{{ ph.id}}_{{ph.secret}}.jpg"
style="width:304px;height:228px;">
</li>
</ul>
</div>
</div>
and JavaScript
angular.module("FlickerApp",[]).controller("MainController",
function($scope, $http){
$scope.showPics = function () {
$http.get("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[API_KEY_HERE]&tags=" +$scope.searchPic+ "&in_gallery=1&is_getty=1&per_page=5&format=json&nojsoncallback=1")
.success(function(data){
$scope.data = data.photos;
}).error(function(data, status){
$scope.response = data + status;
});
}
});
I haven't included the API key yet, but the URL functions properly as I have manually tested it.
I'm currently experimenting with this setup on JSFiddle.