Welcome to my blog, if there’s something I didn’t cover, feel free to leave me a comment below and I will respond as soon as humanly possible. Topic of today’s article is an in-depth review of Ionic Framework.

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.


Table of Contents

Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)


This is Part 2 in a multipart series called: “Best HTML5 Mobile App Frameworks”
Note: I have no intention of stopping writing after I review Kendo UI. If you want me to review a framework you like or know about just write me a comment below.

What Is Ionic Framework?

Link Examples GitHub Repo
Ionic framework enables development of hybrid native mobile applications (currently only Android and iOS devices are supported, Windows Phone and FirefoxOS support is on a future roadmap), using HTML, JavaScript, and CSS, basically just like any other mobile framework. What makes it unique is AngularJS JavaScript framework core and support for SASS (Syntactically Awesome Style Sheets) CSS extension. You don’t believe me? Try doing something in jQuery Mobile, it’s a really easy framework (I have already reviewed ti as a part of this article chain) to learn but try doing something more complex and you will spend time pulling your hair.
For those of you who don’t know, AngularJS, commonly referred to as Angular, is an open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications.
Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications. It’s pretty darn fast, it uses an extremely simple syntax (at least compared to Backbone or Knockout) and like jQuery, has a large number of 3rd party plugins and extensions. Angular comes with jqLite if you need to access the DOM, or you can always load jQuery (I would advise sticking to jqLite, it has a much smaller memory footprint than full-fledged jQuery).
Ionic provides you with a set of Angular driven widgets, they aren’t web components and aren’t usable outside of Ionic/Angular (this is not something that should worry you). In addition to widgets, Ionic will provide you with every other required mobile functionality, like touch recognition, animation logic, and asynchronous communication and native packaging.

What Ionic Framework is not?

Unlike jQuery Mobile or Kendo UI, Ionic mobile framework is meant to be used only for a hybrid mobile application development (HTML5 applications packaged as a native mobile applications) and you can’t use it for a classic desktop web applications (you can use Angular for such a purpose).
If you like HTML5 markup based frameworks then this is not a framework for you. It’s similar to Sencha Touch though you will be able to work with HTML5 templates, where Sencha touch uses pure JavaScript approach.
Some of you love Ember and Backbone, but supporting them, in the same way, as Angular is not in the roadmap.

Main features

  • Open-source and free (under a permissive MIT license)
  • Built around Angular (Ember and Backbone not supported)
  • iOS and Android support (currently only WebKit supported devices)
  • Heavily optimized for touch devices (Ionic is focused on building native/hybrid mobile apps rather than mobile websites.)
  • Great command line utility support (Cordova users will recognize the benefit)
  • Optional Sass support
  • Supports Cordova, PhoneGap, or Trigger.io
  • Over 500 custom designed font icons MIT licensed

Code example



<html ng-app="starter">
  <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>
  <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>
      <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()">
        <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';">

  <script id="view.html" type="text/ng-template">
    <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Movie details</h1>
      <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">

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

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



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

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

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;
  return {
    list: getData,
    find: function(name, callback) {
      var movie = cachedData.filter(function(entry) {
        return entry.id == name;
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;


Embedded working example:
Ionic Master Detail Pattern
This is an easy example, but nothing changes the fact that this framework is not meant to be used for mobile websites development. If you still want to create a mobile/desktop website I would like to recommend mixing Bootstrap/Foundation with Angular.
Continue Reading

  • Ani

    Great post! Coming from jQuery Mobile, I'm trying really hard to learn Ionic because the UIs look so nice and I keep reading about the advantages of MVC style architectures for app development. But my complete noon status in Angular is making the learning curve really steep. I think I'm going to go do specifically Angular tutorials like you suggest.

  • Thank for this great Post!
    You convinced me to take a look at Ionic, hopping the RTL direction is better supported than in jQuery Mobile.

    • Mac

      Emanuel, did you test the RTL support? What is your impression?