aaronksaunders/Flickr-Search-Example:-Using-Controller-As-syntax-and-ui-router-resolve.markdown

## Flickr-Search-Example:-Using-Controller-As-syntax-and-ui-router-resolve.markdown

      
    Raw
  

              Flickr-Search-Example:-Using-Controller-As-syntax-and-ui-router-resolve.markdown
            
          
    Flickr Search Example: Using Controller As syntax and ui-router resolve

Demo of loading images using the Flickr API with IonicFramework
showing ui-router functionality of controller as for cleaner looking code.
A Pen by aaron k saunders on CodePen.
License.

  
## index.html
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Flickr</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

    <script src="//code.ionicframework.com/nightly/js/angular/angular-resource.js"></script>
  </head>

  <body>

    <ion-nav-bar animation="nav-title-slide-ios7" class="bar-positive">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>

    <!-- this is where the content from application is displayed -->
    <ion-nav-view></ion-nav-view>

    <script id="home.html" type="text/ng-template">
      <ion-view view-title="Flickr Search">
        <div class="item">
          <label  id="search-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" placeholder="Search" ng-model="home.query" >
          </label>
        </div>
        <div class="item">
          <button class="btn" ng-click="home.search()">DO SEARCH</button>
        </div>
      </ion-view>
    </script>

    <script id="flickr-display.html" type="text/ng-template">
      <ion-view view-title="Search Results">
        <ion-content>
          <!-- The content of the page -->
          <div class="list">
            <!-- use collection-repeat to display content -->
            <ion-item ng-repeat="item in flkr.items">
              <img ng-src={{item.media.m}}>
            </ion-item>
          </div>
        </ion-content>
      </ion-view>
    </script>

  </body>
</html>

## script.js
angular.module('ionicApp', ['ionic', 'ngResource'])
  .config(function ($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // Each tab has its own nav history stack:

    .state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeCtrl as home'

  })

    .state('flickr-display', {
    url: '/flickr-display:query',
    templateUrl: 'flickr-display.html',
    controller: 'FlickrDisplayCtrl as flkr',
    resolve : {
      ImageData : function($stateParams, Flickr) {
        return Flickr.search($stateParams.query);
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home');
})
  .factory('Flickr', function($resource, $q) {
  var photosPublic = $resource('http://api.flickr.com/services/feeds/photos_public.gne',
                               { format: 'json', jsoncallback: 'JSON_CALLBACK' },
                               { 'load': { 'method': 'JSONP' } });

  return {
    search: function(query) {
      var q = $q.defer();
      photosPublic.load({
        tags: query
      }, function(resp) {
        q.resolve(resp);
      }, function(err) {
        q.reject(err);
      })

      return q.promise;
    }
  }
})
  .controller('HomeCtrl', function( $state) {
  var vm = this;
  vm.search = function() {
    $state.go('flickr-display',{query :vm.query});
  }
})
  .controller('FlickrDisplayCtrl', function(ImageData) {
  var vm = this;

  console.log(ImageData);
  vm.items = ImageData.items;

});

## style.css
#search-input {
  text-align: center;
}

#photos {
  margin: auto;
}


#search-bar {
  background: none;
  position: absolute;
  width: 100%;
  top: 44px;
  height: 40px;
  z-index: 3;
}
#search-bar .item {
  background: none;
  border: none;
}
#content {
  top: 44px;
  padding-top: 45px;
  padding-bottom: 20px;
}
	<html ng-app="ionicApp">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Flickr</title>

	<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
	<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

	<script src="//code.ionicframework.com/nightly/js/angular/angular-resource.js"></script>
	</head>

	<body>

	<ion-nav-bar animation="nav-title-slide-ios7" class="bar-positive">
	<ion-nav-back-button class="button-icon ion-arrow-left-c">
	</ion-nav-back-button>
	</ion-nav-bar>

	<!-- this is where the content from application is displayed -->
	<ion-nav-view></ion-nav-view>

	<script id="home.html" type="text/ng-template">
	<ion-view view-title="Flickr Search">
	<div class="item">
	<label id="search-input">
	<i class="icon ion-search placeholder-icon"></i>
	<input type="text" placeholder="Search" ng-model="home.query" >
	</label>
	</div>
	<div class="item">
	<button class="btn" ng-click="home.search()">DO SEARCH</button>
	</div>
	</ion-view>
	</script>

	<script id="flickr-display.html" type="text/ng-template">
	<ion-view view-title="Search Results">
	<ion-content>
	<!-- The content of the page -->
	<div class="list">
	<!-- use collection-repeat to display content -->
	<ion-item ng-repeat="item in flkr.items">
	<img ng-src={{item.media.m}}>
	</ion-item>
	</div>
	</ion-content>
	</ion-view>
	</script>

	</body>
	</html>
	angular.module('ionicApp', ['ionic', 'ngResource'])
	.config(function ($stateProvider, $urlRouterProvider) {

	// Ionic uses AngularUI Router which uses the concept of states
	// Learn more here: https://github.com/angular-ui/ui-router
	// Set up the various states which the app can be in.
	// Each state's controller can be found in controllers.js
	$stateProvider

	// Each tab has its own nav history stack:

	.state('home', {
	url: '/home',
	templateUrl: 'home.html',
	controller: 'HomeCtrl as home'

	})

	.state('flickr-display', {
	url: '/flickr-display:query',
	templateUrl: 'flickr-display.html',
	controller: 'FlickrDisplayCtrl as flkr',
	resolve : {
	ImageData : function($stateParams, Flickr) {
	return Flickr.search($stateParams.query);
	}
	}
	});

	// if none of the above states are matched, use this as the fallback
	$urlRouterProvider.otherwise('/home');
	})
	.factory('Flickr', function($resource, $q) {
	var photosPublic = $resource('http://api.flickr.com/services/feeds/photos_public.gne',
	{ format: 'json', jsoncallback: 'JSON_CALLBACK' },
	{ 'load': { 'method': 'JSONP' } });

	return {
	search: function(query) {
	var q = $q.defer();
	photosPublic.load({
	tags: query
	}, function(resp) {
	q.resolve(resp);
	}, function(err) {
	q.reject(err);
	})

	return q.promise;
	}
	}
	})
	.controller('HomeCtrl', function( $state) {
	var vm = this;
	vm.search = function() {
	$state.go('flickr-display',{query :vm.query});
	}
	})
	.controller('FlickrDisplayCtrl', function(ImageData) {
	var vm = this;

	console.log(ImageData);
	vm.items = ImageData.items;

	});
	#search-input {
	text-align: center;
	}

	#photos {
	margin: auto;
	}




	#search-bar {
	background: none;
	position: absolute;
	width: 100%;
	top: 44px;
	height: 40px;
	z-index: 3;
	}
	#search-bar .item {
	background: none;
	border: none;
	}
	#content {
	top: 44px;
	padding-top: 45px;
	padding-bottom: 20px;
	}