Intro to Ionic
October 04, 2015
Now that you’ve mastered all things Cordova in the previous blog post, let’s take a look at Ionic and see where that fits in.
What is Ionic?
Assuming you’ve set up Cordova already, the only thing you need to do is globally install the ionic node module:
npm install -g cordova ionic
Create an Ionic App
To create a new Ionic app, you’ll want to cd into whatever directory you keep your projects and run this ionic start command, passing in the directory name you would like to create the project in and which starter template you would like to use.
cd ~/code/ ionic start hello_ionic tabs
In this example, we created an ionic app inside the ~/code/hello_ionic that starts with a simple tab based layout. The basic structure of this application is very similar to what we’re already familiar with from a basic Cordova app, except now there’s a bunch of extra Ionic goodies in there. One other thing worth noting is that Ionic will automatically add the iOS platform for you if you’re on a mac, whereas with Cordova you don’t have any platforms by default.
The config.xml holds metadata about your project, the plugins that it uses, and preferences that are applicable to one or more of the platforms that you support. This is no different from a regular Cordova app.
Hooks are an extensibility point that can be used to define custom functionality. You can write custom scripts and wire them into Cordova to be run at different points in time. Ionic creates a hook by default, but other than that this is really no different from a regular Cordova app.
Your Cordova project can be deployed to one or more different device platforms (iOs, Android, Windows Phones, etc). If you’re on a mac, you’ll find an iOS platform directory contained in here by default. Other than that, this is no different from a regular Cordova app.
Ionic sets up Bower you control your client side dependencies. If you’re not familiar with Bower, then for now just know that bower is there and if you wanted to add a client side dependency like, say, jQuery or something like that you would use Bower to do so.
Ionic also sets you up with a gulpfile and a few tasks in there. If you’re coming from a ruby background, gulp is roughly equivalent to rake. It’s used to create tasks that can be invoked at a command line. Usually you’ll see it used to do things like minification, obfuscation, compiling of SASS and things like that.
Ionic uses SASS for it’s CSS. SASS stands for Syntactically Awesome StyleSheets. It’s a superset of CSS and can be compiled down to plain old CSS using a gulp task that Ionic creates.
app.js, controllers.js and services.js
Finally time for some Angular! App.js defines the root module, which is ‘starter’ by default, and it also contains all of your app’s routing information.
Controllers.js contains the definitions for, you guessed it, all of our app’s controllers. Out of the box the tabs template contains four controllers for each of the different views the app could be in (one for each tab view, plus one for a detail view of an chat list item).
Services.js contains a simple little factory function definition that returns a mock service that’s used to generate some of the data used by the chat views.
It’s probably a good idea to break apart the ‘controllers.js’ and ‘services.js’ files into separate files. In general, it’s a bad idea to structure angular apps this way. You want to group things together around domain concepts, not what design pattern the objects conform to.
It’s a good idea to get a commit in at this point, just in case things get squirrelly.
git init git commit -am "First commit, vanilla ionic app"
Deploying to the iOS simulator
Lets go ahead and run our app on an iOS simulator (assuming you’re on a mac). Open up a terminal in the root of your project and run the following command:
ionic emulate ios
As you can see, Ionic added quite a bit of stuff over a vanilla Cordova app. However, it’s given us a lot in return. Out of the box we have a pretty nice looking app that will scale to all different device sizes and we avoid a lot of the device specific quirkiness that we’d run into if we were creating this from scratch. Not bad! Next up, we’ll dig deeper into Ionic to understand how it’s working and get us to a point where we can start confidently making changes to it.
Other posts in this series:
I'm growing software, teams, and myself in CLE.