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
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.
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.
Using Sass, you can override Ionic's default styles and customize an app to fit your needs.
A walkthrough on installing Cordova, Android, and Ionic on Windows 7 and 8
Learn how to easily make tabbed interfaces, one of the most common UI patterns for mobile, in Ionic.
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.
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.