Introduction to Ionic for iOS

Learn how to start using Ionic for iOS with this video. An introduction, prerequisites, and getting a basic application running on a simulator will all be shown.

In this video we will learn about Ionic for iOS development. Ionic is a front-end framework for developing hybrid mobile apps with HTML5.

To start using Ionic with iOS, you will need MacOSX with XCode, the XCode Command Line Tools, and node.js installed. Instructions for installing these pre-requisites are in the notes for this video.

Once you finish installing the pre-requisites, install Ionic from the Node Package Manager (NPM). If you are new to Node.js, NPM is a package manager for node.js that will resolve your dependencies. Install Ionic now with npm install -g ionic cordova ios-sim.

These modules are the basis for working with Ionic on iOS. The ionic module itself is the primary command line tool you will be working with. Cordova is Ionic’s underlying platform for building native mobile applications using HTML, CSS, and JavaScript. The ios-sim module allows us to run the iOS simulator from the command line.

We can now begin building apps with Ionic. Ionic ships with several templates, but we will start with a tabbed app. You can learn about other templates in the Getting Started guide in the notes for this video.

To start a new tab-based application, type ionic start tabsApp tabs.

This will create a folder called tabsApp, so change into the folder. When we look at the folder’s contents, we can see there is a lot happening. In the next video, we will break down the structure of an Ionic app and change our application. For now, we will get the application running in the iOS simulator.

An Ionic application does not ship with any platforms installed. To turn our app into something runnable on a device, we need to add specific platforms we want to use. In this case, we want iOS. In the terminal, type ionic platform add ios. Once Ionic resolves its dependencies, we can run the application.

Type ionic emulate ios to run the iOS simulator.

Once it’s running, we can now see that we have a working tabbed application. In the next video, we will talk about the structure of an Ionic project and begin customizing our app.

Sass Customization

Using Sass, you can override Ionic's default styles and customize an app to fit your needs.

Installing Cordova and the Android SDK on Windows 7 and 8

A walkthrough on installing Cordova, Android, and Ionic on Windows 7 and 8

Making Tabbed Interfaces in Ionic

Learn how to easily make tabbed interfaces, one of the most common UI patterns for mobile, in Ionic.

The Sidemenu

The side menu is a great way to display content without losing a lot of screen real estate. Learn how to add the side menu to your apps.

Ionic Lists - Part 1

A core element to any app is the display of lists. From todos to social feeds, lists are the building block for much more complex UIs. Learn about lists in Ionic in this video.

Get building with Ionic today!