Flicker Photo Library With AngularJS

In this blog, you will learn using Flicker Photo Library with AngularJS.

Introduction

Flicker provides collections of photographs. It also provides API. We can integrate this API to our website and display different photographs.

Below is the Flicker Image Search Endpoint.

var endPoint = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4ef2fe2affcdd6e13218f5ddd0e2500d&tags=" + searchField + "%2C+&per_page=" + perPage + "&page=" + currentPage + "&format=json&nojsoncallback=1";

Data Service to Call Flicker Photo Search API -

var app = angular.module("flickerApp");

app.factory('flickerDataService', ['$http', '$q', function ($http, $q) {

    function getSearchData(searchField, perPage, currentPage) {
        var endPoint = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4ef2fe2affcdd6e13218f5ddd0e2500d&tags=" + searchField + "%2C+&per_page=" + perPage + "&page=" + currentPage + "&format=json&nojsoncallback=1";
        var req = {
            method: 'GET',
            url: endPoint
        }

        var deferred = $q.defer();
        $http(req).success(function (data) {
            deferred.resolve(data);
        })
          .error(function (err) {
              console.log('Error retrieving data');
              deferred.reject(err);
          });
        return deferred.promise;
    }

    return {
        getSearchData: getSearchData
    };
}]);

Then, you will get Flicker API JSON response, as shown below.

{ "photos": { "page": 1, "pages": "34477", "perpage": 15, "total": "517154",
    "photo": [
      { "id": "29391554603", "owner": "11741544@N05", "secret": "548817b7f5", "server": "5161", "farm": 6, "title": "1933 Rolls Royce", "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "29391552033", "owner": "11741544@N05", "secret": "4381911dea", "server": "5643", "farm": 6, "title": "1933 Rolls Royce", "ispublic": 1, "isfriend": 0, "isfamily": 0 }
    ] }, "stat": "ok" }

Now, create URL of each image by using above JSON properties.

controller.getFlickerData = function () {
        controller.isLoading = true;
        flickerDataService.getSearchData(controller.searchValue, controller.perPage, controller.currentIndex).then(function (data) {
            controller.flickerData = data.photos.photo;
            controller.createImageUrl(controller.flickerData);
            controller.isLoading = false;
        }).catch(function (data) {
            controller.errorMessage = "Oops! Something went wrong.";
            controller.isLoading = false;
        });
    }

controller.createImageUrl = function (flickerData) {
      controller.urlData = [];
      var url = "";
      if (!angular.isUndefined(flickerData) && flickerData.length > 0) {
          controller.mainImageUrl = "https://farm" + flickerData[0].farm + ".staticflickr.com/" + flickerData[0].server + "/" + flickerData[0].id + "_" + flickerData[0].secret + ".jpg";

          for (var i = 0; i < flickerData.length; i++) {
              url = "https://farm" + flickerData[i].farm + ".staticflickr.com/" + flickerData[i].server + "/" + flickerData[i].id + "_" + flickerData[i].secret + ".jpg";
              controller.urlData.push({ id: i, url: url });
          }
      }
  }

In the above code, this line will create image URL -

controller.mainImageUrl = "https://farm" + flickerData[0].farm + ".staticflickr.com/" + flickerData[0].server + "/" + flickerData[0].id + "_" + flickerData[0].secret + ".jpg";

Now, bind the image URL, like below, to display on HTML page.

<ul>
       <li ng-repeat="item in homeController.urlData" ng-click="homeController.GetImage(item.id)" style="cursor: pointer;">
           <img src="{{item.url}}" class="js-gallery__image" />
       </li>
   </ul>

For more details, I have attached zipped project. Download it and follow the below steps for the execution of project.

1. Node.js should be installed and integrated into command prompt. Downloading source.
2. Navigate to folder "FlickerApp".
3. Here, you will find startServer.bat file.
4. Click on this file. It will execute the Server.
5. Go to browser and type "localhost:8080".
6. The web app will open.

Conclusion - By using flicker search API, you can get images from different locations and create image URL to show.