Formulas

Written tutorials and how-to's on building hybrid apps with Ionic. Read at your own pace. Follow along and test in the Scratchpad.

Ionic Basics

Customizing the Splash Screen

July 21, 2014  |

When releasing an app, a nice final polish is a custom splash screen. Learn how to customize it with Ionic and ngCordova.

Making Modals

June 30, 2014  |

Modals are an essential UI component of any app needing to show a detail view. This formula goes into the details of making those modals.

Understanding Action Sheets

June 24, 2014  |

Action sheets can be a useful UI for providing contextual actions. Learn how to create one, and use custom gestures as a bonus.

Using the Grid

June 24, 2014  |

Get started with using Ionic's grid system to organize your content.

Pull to Refresh

June 17, 2014  |

Update your lists in real time using pull-to-refresh with the handy ion-refresher directive!

Navigating Ionic's Headers

May 1, 2014  |

Ionic includes multiple ways to display a header at the top of the screen. Learn the difference between nav bars and header bars, and when to use each.

Cordova

Adding an App Icon

August 1, 2014  |

Including an app icon is as simple as adding a few lines to a project config.xml

Customizing the Status Bar

July 23rd, 2014  |

An easy and quick way to personalize your applications is by customizing the status bar. Learn how to with the ngCordova plugin.

Using the Cordova Camera API

May 14, 2014  |

Taking photos and video is an everyday task for most mobile users. Learn how to easily add photo and video functionality to your apps with the Cordova Camera API.

AngularJS

Using Local Storage

May 14, 2014  |

Mobile apps require seamless online and offline functionality, in large part due to the reliability of current mobile networks, and to reduce network requests that take time and hurt battery life. Learn how to use Local Storage to persist data for fast and reliable offline access.

Integrating a Backend Service with AngularJS

May 14, 2014  |

AngularJS makes interacting with backend data and APIs incredibly easy. Follow this formula to see simple ways to make HTTP calls, and more powerful ways to model data objects on the server.

Ionic Data

Sharing Data Between Views

July 7, 2014  |

Sharing data between views is easy. Doing it correctly is less easy. This formula will show best practices for sharing data across your application.

Resolving Data the Right Way

July 1, 2014  |

Handling data dependencies in your applications can be difficult. Learn how to use the router's resolve step to handle dependencies.

Ionic Lists

Exploring Ionic Lists

May 13, 2014  |

Creating a basic list is easy and straightforward in Ionic. Ionic also supports infinite lists, reordering, and other things to make life easier when developing lists. This formula dives into what lists are about and how to get the most out of them.

Advanced Angular

Global Loading Screen with Interceptors

July 1, 2014  |

Centralize your loading code by using HTTP interceptors to do the dirty work

Navigation

Build an App with Navigation and Routing - Part 2

June 1, 2014  |

Now that we have basic routing, let's continue building our application

Build an App with Navigation and Routing - Part 1

May 29, 2014  |

It's easy to maintain state with a simple app. As size and complexity grows, so does the challenge of handling that state. In this formula, we will begin an application that takes advantage of Ionic's navigation and routing, and shows how to use it with Ionic's UI.

Testing

Protractor e2e Testing

June 18, 2014  |

Creating end to end tests can save you tons of headache and embarrassment. Creating the initial tests will take time, however, you will spend less time in the future testing every part of your app by hand. This formula demonstrates the basics of testing with protractor and Ionic, and using ripple in your end to end tests.

Ionic Style

Writing a Sass Theme

August 20, 2014  |

Customize your app's theme with Sass

Get building with Ionic today!