Flickr Search App with Angular.js Part 1

Hello everyone,

Here i am with my first blog post in London. Today i will develop flicker photo search application using Angularjs. I will use flickr API to search photos by tag you can check details here. I will use npm and bower for managing libraries therefore as a first step i will run “npm init”  and “bower init” to create package.json and bower.json.

In app.js file we will initialize angular first module and add first controller with name MainCtrl, you can find app.js codes below.

var flickrApp = angular.module('flickrApp',[]);

flickrApp.controller("MainCtrl", function ($scope, $http) {
    $scope.loading = false;
    $scope.getData = function (searchField) {
      $scope.loading = true;
      $http.jsonp("http://www.flickr.com/services/feeds/photos_public.gne?tags="+searchField+"&format=json&jsoncallback=JSON_CALLBACK").
        success(function (data) {
          $scope.images = data.items;
          $scope.loading = false;
        }).
        error(function (data) {
          $scope.images = "Request failed";
          $scope.loading = false;
        });
    }
});


As you can see flickr api returns data as a jsonp, thats why i am using $http.jsonp to get data from api. After we initialize angular application now its time download libraries via bower. Following terms will install libraries via bower.

npm install angular --save-dev
npm install bootstrap --save-dev

Now we are ready to create index.html with following codes.

<!doctype html>
<html ng-app="flickrApp">
<head>
    <meta charset="utf-8">
<title> Flickr Angular App</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<link rel="stylesheet" href="styles/masonry.css" >


</head>
<body ng-controller="MainCtrl">
   <div class="header">
      <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#/">Flickr App developed with Angular.js</a>
          </div>
        </div>
      </div>
    </div>

    <div class="container main" ng-controller="MainCtrl">
      <form ng-submit="getData(searchField)">
        <div class="row" style="height: 75px; width: 100%;">
            <input type="text" data-ng-model="searchField" placeholder="Type a keyword to search on Flickr and hit enter" class="form-control input-lg"/>
        </div>
      </form>
      <hr>
      <div style="float:left">
        <span ng-if="images">Top {{resultCount}} results for {{searchField}} Search</span>
      </div>
      <div style="float:right">
        <select class="form-control" data-ng-model="resultCount" ng-init="resultCount =20" ng-show="images">
          <option value="20">20 Items</option>
          <option value="10">10 Items</option>
          <option value="5">5 Items</option>
        </select>
      </div>
      <br />
      <br />
      <div class="row">
        <div class="col-sm-12" ng-if="loading">
          Loading Data Plesase Wait...
          <br />
          <br />
          <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" />
        </div>
        <div class="col-sm-4" ng-repeat="image in images | limitTo: resultCount">
          <div class="thumbnail">
            <img ng-src="{{image.media.m}}" title="{{image.title}}">
            <div class="caption">
              <h4><a target="_blank" href="{{image.link}}">{{image.title}}</a></h4>
              <p>Published on {{image.published | date:'d MMMM yyyy, HH:mm'}}</p>
              <h4>Tags</h4>
              <p>
                <span>{{image.tags}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <p>Developed by <a href="https://github.com/hamdiceylan">Hamdi Ceylan</a></p>
      </div>
    </div>

</body>
</html>

You can see live demo here and you can download source code here.

As a next step i will write tests using Karma,Jasmine,Phantomjs and i will check test coverage with Istanbul. You can find next tutorial here.

 

Leave a Reply

Your email address will not be published. Required fields are marked *