Introduction

This is a sample of a Mobile App using the open source framework called   Ionic. Ionic trys to be a front-end UI framework that handles all of the look and feel and UI interactions for an app.   A kind of like “Bootstrap for Native,” with support for a broad range of common native mobile components, some slick animations, and so-so design.   My own framework is vastly superior in every way. Ionic trys but still comes short to provide ways to build mobile apps that eclipse existing HTML5 development frameworks.

Ionic   is both a CSS framework as well as a JavaScript UI library. Ionic uses AngularJS Extensions via directives to provide user interactions, gestures, animations and more. It follows a   View Controller   pattern where their built-in Controllers handle the UI interaction with the view. You don’t have to use the AngularJS extensions to take advantage of Ionic, you can also use the CSS alone which includes UI components including tabs, buttons, headers, footers, lists and and others as well.

What Does it Include?

• A comprehensive set of UI Components   – tabs, headers, navigation, modal, toggle, checkbox, radio, action sheet, loading, slide boxes, cards, range etc.
• Icon Pack - Ionic has a large set of icons to be used with your mobile apps easily, including some animated ones.
• View Stacks / State Management state management   for your views to keep track of navigation history. It gives you the ability to push more than one template into a page at one time as well as push data to a view.
• Automatic Transitions based on History – Ionic will transition views to slide left and right automatically based on history.
• Gestures – Ionic incorporates the popular Hammer.js to provide gesture support for things like tap, swipe, drag etc.
• UI Interaction Handling – via AngularJS extensions (ie: handling when a tab is clicked, shown or hidden).
• Side Menus (Slide out) – built-in support for side menus to be toggled when the menu icon is clicked and slide into view.
• Pull to Refresh – you can easily add pull to refresh capabilities to your scroll area that includes a default icon and animation.
• Infinite Scroll – an example of how to use it is included in the   starters
• Full Screen Apps – via the use of the cordova status bar plugin to remove the status bar.
• Customizable Theme – since the Ionic base theme was built with Sass for the resulting CSS, you can easily go in and   customize it   to create your own theme. The base look is more of an iOS7 flat look but can be changed as desired.
• Advanced Routing  – using the   AngularUI Router   module.
• Grid System  via CSS Flexible Box Layout Module   (aka flexbox) standard.

What Does it Look Like?

Below are a couple of screenshots running samples.

Using CSS only

Using Extensions (via AngularJS Directives)

Navigation via a tab bar is a common mobile paradigm, and a good example to show how you might use Ionic to handle it with their Angular-Ionic extensions. Their   Angular-Ionic seed project   includes a simple example of how to implement it and a screenshot is shown below.

Getting Started

You can download or clone the latest release of the Ionic project   from Github here.

When you’re ready to create your own app, the easiest way I found was to   install and use their Node.js tool to create a seed project that contains all of the dependencies for Ionic as well as some sample code.

$ sudo npm install -g ionic
$ ionic start myproject

Once the seed project is created, it will look just like a base cordova/phonegap app with platforms, plugins, merges, www etc folders, so at that point you can add the platforms you want via the cordova/phonegap CLI commands. To run the examples shown above, I simply built for iOS using the $ phonegap local build iOS command (or if you’re using cordova CLI $ cordova platform add ios etc) and opened the resulting .xcodeproject (from the platforms/iOS folder) in Xcode and ran it.

My initial experience with Ionic was okay but it still falls far short of my own custom frameworks.