Ionic Framework | Master Detail Pattern Overview

Written by on April 9, 2015

Ionic Framework | Master Detail Pattern Overview

In computer user interface design, a master–detail interface displays a master list and the details for the currently selected item. The original motivation for master-detail was old 1980s 80-character-wide display size, which also makes it a great pattern for modern smartphones and tablets.

In practice, master-detail screen pattern can be shown in vertical or horizontal form. Mobile development accepts only horizontal form, what used to be vertical form is now known as Slide menu pattern. Master-detail pattern (layout) is a good choice when the user needs to see more information in the master list than just a few identifiers, or when the master view is comprised of a set of items that each has additional details.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Table of Contents

[spoiler title=” Click here if you want to see other tutorials; or articles about Ionic themes, templates, plugins …”]

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials


[/spoiler]

Example

Demo

Working embede example
Ionic Master Detail Pattern

HTML
<html ng-app="starter">
 
<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"/>
  <link href="index.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.js"></script>
</head>
 
<body>
  <ion-nav-view></ion-nav-view>
    
  <script id="list.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="movie.name" ng-change="searchMovieDB()">
      </label>
      <ion-list>
        <div class="list">

          <a ng-repeat="movie in movies" 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>{{movie.original_title}}</h2>
            <h4>{{movie.release_date}}</h4>
          </a>

        </div>
      </ion-list>
    </ion-content>
  </script>
  
  <script id="view.html" type="text/ng-template">
    <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Movie details</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list card">

        <div class="item item-avatar">
          <img src="http://files.softicons.com/download/object-icons/movies-icons-by-pinchodesigns/png/32x32/Movie.png">
          <h2>{{movie.original_title}}</h2>
          <p>{{movie.release_date}}</p>
        </div>

        <div class="item item-image">
          <img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" width="200px" />
        </div>

        <a class="item" href="#">
            Average Vote: <strong>{{movie.vote_average}}</strong> (Votes: {{movie.vote_count}})
          </a>

      </div>
    </ion-content>
  </script>   
  
</body>
 
</html>
JavaScript
var nameApp = angular.module('starter', ['ionic']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('list', {
      url: '/',
      templateUrl: 'list.html',
      controller: 'ListCtrl'
    })
    .state('view', {
      url: '/movie/:movieid',
      templateUrl: 'view.html',
      controller: 'ViewCtrl'
    });
 
  $urlRouterProvider.otherwise("/");
 
});

nameApp.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);
    }
  };
 
});
 
nameApp.controller('ListCtrl', function($scope, $http, Movies) {
 
  $scope.movie = {
    name: ''
  }
 
  $scope.searchMovieDB = function() {
 
    Movies.list($scope.movie.name, function(movies) {
      $scope.movies = movies;
    });
     
  };
});
 
nameApp.controller('ViewCtrl', function($scope, $http, $stateParams, Movies) {
  Movies.find($stateParams.movieid, function(movie) {
    $scope.movie = movie;
  });
});

Code overview

Like AngularJS, Ionic framework is all about MVC (or to be more precise Model–View–Whatever) so let’s discuss basic application details.

First thing we need to do is to initialize our application:

<html ng-app="starter">

This translates to JavaScript:

var demoApp = angular.module('starter', ['ionic']);

You can have multiple ng-app attributes on your page, they don’t need to be set to root HTML element, you can have multiple independent applications running in the same page. For Ionic to work properly, we need to set the [‘ionic’] dependency, a framework will not work without it.

Continue Reading

Categories

5 thoughts on “Ionic Framework | Master Detail Pattern Overview”

  1. The topic should have been simpler. The main intention is to explain master detail pattern and adding a database discussion to it only makes it complicated. Making the data local will give a complete picture.

    Say, we are working on local data and I have a list of 20 movies added to $scope.movies object with a variable called id, when I want to filter it on id, I get both id’s 1, 11, 12, 13…19. How can I filter the exact match?

    • Tho point of this article is to show a real working example. It doesn’t matter where the source is. 95 % of the code is going to be the same. Plus why should I spend my time building a localstorage example when I can use already existing data source.

  2. Cool beans – this is great fully working example of “master/detail” using Ionic! The concise explanations are very helpful – I’m sure there’s a lot of detail left for one to discover/learn (in Ionic/Angular) but for the purposes of the example, it keeps things compact and not go off on multiple concepts (but it’s understood that there are). Kudos and thank you.

  3. sir i need your help ,im using your above code ,i followed all instruction described above but when run the code its coming blank for me …plz help me

Leave a Reply