In the [last post][1] we started looking into how to create our first application in Ionic by following along with the example in Ionic’s [documentation][2]. We saw how to build a simple Ionic application, but everything was laid out for us – we weren’t doing much more than copy and pasting. In order to start building our own applications we need to really understand how the technology works, and since Ionic is built on [AngularJS][3] we need to understand how _that _works.

I’ve been building the example application that will be used for the [Mobile Development for Web Developers][4] course (as I discussed with my email subscribers, I’ve decided to use Ionic instead of Sencha Touch for part of this course, partly for reasons outlined in the [introduction post][5] of this series).

The application is a fairly simple one, the idea is to recreate a [photo a day style][6] video. The app allows you to:

Take a photo (preferably once a day)

Store photos

Delete unwanted photos

Play a ‘video’ of all your photos in quick succession (which is more like a slideshow)

I’ve still got plenty to learn about Ionic, but I’ve learned a lot of the basics of Ionic and AngularJS through building this application. I’m quite surprised with the speed at which I’ve been able to build the application (it’s probably taken about 4 hours of work so far, plus some extra time researching, and it’s almost finished).

So, in this article I’m going to list the basic core concepts for AngularJS and Ionic I’ve learned as someone new to the frameworks. Before I get into that though I’ll summarise a few of the pro’s and con’s of Ionic vs Sencha Touch as I have seen them so far (since the last post).

Take these with a grain of salt, I’m still very much in the “honeymoon period” with Ionic – I have not had a chance to see many of Ionic’s flaws yet (any potential flaws I would likely chalk up to me just not knowing what I’m doing), and likewise things that I consider as con’s of Ionic may indeed just be that I don’t understand how to do it properly.

Pro’s:

Very easy to start developing fast, especially if you’re already familiar with HTML5 mobile frameworks

Ionic View is awesome for rapid prototyping and testing

The Ionic CLI tool, specifically the ability to pull in examples from [codepen.io][7] when generating an application. Sencha Cmd is also a great tool but I think Ionic is just slightly better in this regard

Extremely well documented with plenty of examples

Integration with [ngCordova][8] makes using Cordova extremely fast and easy

Con’s

The application structure doesn’t seem as well organised as Sencha Touch

Storing data in local storage is more difficult than Sencha Touch’s approach

The data system doesn’t seem to be structured as well as Sencha Touch’s

Again, these are all my interpretation at a first glance, don’t take them as gospel. Now… let’s learn some AngularJS!

NOTE: Some time in the future, likely early 2016, Angular 2 will be released which will include drastic changes to the way the framework works. This doesn't mean everything you learn now is useless, but you will likely need to relearn some things if you plan to switch to Angular 2. It'll be useful to understand both the "old way" and the "new way" anyway though, as it will give you a better understanding of why the changes were made and of course the skills to upgrade a Angular 1 app to Angular 2.

Ionic has stated that they will support Angular 2 with Ionic v2, as well as continuing to support Ionic v1.

The Ionic and AngularJS Crash Course

Angular is the biggest competitor for [Sencha’s EXT JS framework][9]. Essentially, they are both frameworks for building JavaScript applications. The following are the key concepts of Ionic and AngularJS which I have discovered as a newbie to the frameworks.

1. Expressions

The most obvious difference between Sencha Touch and Ionic / AngularJS is the mixture of JavaScript and HTML. In Sencha Touch, JavaScript and HTML is, more or less, kept completely separate. They are distance cousins who come together only when necessary. With AngularJS, HTML and JavaScript are best buddies.

You can execute JavaScript code within HTML by using expressions. An expression consists of some code wrapped in double curly braces, for example:

< span > 2 + 2 = { { 2 + 2 } } < / span >

This would output the following into the DOM:

< span > 2 + 2 = 4 < / span >

2. Directives

A directive is basically like a little marker in your HTML that looks like this: