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.
-
-
Save MoisesValera/6f690620f106912458c03248b8f9d5cc to your computer and use it in GitHub Desktop.
Flickr Search Example: Using Controller As syntax and ui-router resolve
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment