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