Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!
PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.
PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.
Table of Contents
Example
Working embede example
Ionic Side Menu Pattern
HTML
<html ng-app="myApp"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> <title>Ionic Framework Example</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="app.js"></script> </head> <body ng-controller="HomeCtrl"> <ion-side-menus> <ion-pane ion-side-menu-content> <ion-nav-bar class="bar-balanced nav-title-slide-ios7"> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view></ion-nav-view> </ion-pane> <ion-side-menu side="left"> <ion-header-bar class="bar bar-header bar-dark"> <h1 class="title">Filter Movies</h1> </ion-header-bar> <ion-content has-header="true"> <div class="list"> <ion-radio ng-model="selected.score" ng-value="{{sort.score}}" ng-repeat="sort in sorting">{{sort.name}}</ion-radio> </div> </ion-content> </ion-side-menu> </ion-side-menus> <script id="home.html" type="text/ng-template"> <ion-header-bar class="bar bar-header bar-dark"> <h1 class="title">Search The Movie Database</h1> </ion-header-bar> <ion-content> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="search" placeholder="Search" ng-model="selected.movieName" ng-change="searchMovieDB()"> </label> <ion-list> <div class="list"> <a ng-repeat="movie in movies | filter: greaterThan('vote_average')" href="#/movie/{{movie.id}}" class="item item-thumbnail-left"> <img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" onerror="this.src = 'https://www.ginesisnatural.com/images/no_image.jpg';"> <h2><strong>{{movie.original_title}}</strong></h2> <h4>Release Date: <strong>{{movie.release_date}}</strong></h4> <h4>Average score: <strong>{{movie.vote_average}}</strong></h4> </a> </div> </ion-list> </ion-content> </script> </body> </html>
JavaScript
var app = angular.module('myApp', ['ionic']); app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/', templateUrl: 'home.html' }); $urlRouterProvider.otherwise('/'); }); app.factory('Movies', function($http) { var cachedData; function getData(moviename, callback) { var url = 'http://api.themoviedb.org/3/', mode = 'search/movie?query=', name = '&query=' + encodeURI(moviename), key = '&api_key=470fd2ec8853e25d2f8d86f685d2270e'; $http.get(url + mode + key + name).success(function(data) { cachedData = data.results; callback(data.results); }); } return { list: getData, find: function(name, callback) { console.log(name); var movie = cachedData.filter(function(entry) { return entry.id == name; })[0]; callback(movie); } }; }); app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, Movies) { $scope.sorting = [{score: 9, name : 'Score more then 9'}, {score: 8, name : 'Score more then 8'}, {score: 7, name : 'Score more then 7'}, {score: 6, name : 'Score more then 6'}, {score: 5, name : 'Score more then 5'}, {score: 4, name : 'Score more then 4'}, {score: 3, name : 'Score more then 3'}, {score: 2, name : 'Score more then 2'}, {score: 1, name : 'Score more then 1'}, {score: 0, name : 'Show me every movie'}]; $scope.selected = { score : 0, movieName : 'Batman' } $scope.openMenu = function () { $ionicSideMenuDelegate.toggleLeft(); }; $scope.greaterThan = function(fieldName){ return function(item){ return item[fieldName] > $scope.selected.score; } } $scope.searchMovieDB = function() { Movies.list($scope.selected.movieName, function(movies) { $scope.movies = movies; }); }; $scope.searchMovieDB(); });
Side menu overview
<ion-side-menus> </ion-side-menus>
<ion-side-menus> <ion-side-menu-content> <!-- Main application content should go here --> </ion-side-menu-content> <ion-side-menu side="left"> <!-- Left Side Menu content should go here--> </ion-side-menu> <ion-side-menu side="right"> <!-- Right Side Menu content should go here--> </ion-side-menu> </ion-side-menus>
<ion-side-menu side="left"> <ion-header-bar class="bar bar-header bar-dark"> <h1 class="title">Filter Movies</h1> </ion-header-bar> <ion-content has-header="true"> <div class="list"> <ion-radio ng-model="selected.score" ng-value="{{sort.score}}" ng-repeat="sort in sorting">{{sort.name}}</ion-radio> </div> </ion-content> </ion-side-menu>
<ion-pane ion-side-menu-content> <ion-nav-bar class="bar-balanced nav-title-slide-ios7"> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view></ion-nav-view> </ion-pane>
Continue Reading