113% ROI on Large Enterprise Crowdsourcing Programs - Forrester TEIā„¢ Get the Study ×

Ionic – The Application Layout

By gregb In Uncategorized

Posted July 29th, 2015

In Part 3 we created the basic service for making API calls to get challenge data.

In Part 4, let’s talk a bit about our final application layout.

This post is part of an ongoing series:

Layout

Ok – we’ve got some building blocks in place now, so what exactly are we going for? Let’s keep it simple for our first go-around with Ionic (we can always expand on it later):

We’ll have the basic ability to search for challenges by name, view the results of that search, and finally view a few details on the challenges returned.

Purge

For educational purposes I’m going to leave the majority of the template code in place (seeing the example code in the template files can be useful) . However, let’s clean up / remove the visible stuff in the UI that we don’t want.

Let’s start with the side-menu. Let’s drop all the options we’re not using and reduce our choices to one – ‘Challenges’.

Open up your templates/menu.html and delete away:

Now let’s set the application’s default view to the Challenges view. To do this, just update the default route at the bottom of www/js/app.js.

New Views!

We used the challenge view to test the API, let’s get it into it’s final state.

As per the image above – the challenges.html view is intended to be a search screen, let’s get this view setup correctly.

Swap out your www/templates/challenges.html with the following:

Now we’ll create the Search Results view. Create your new www/templates/searchResults.html file:

Finally, create www/templates/challengeDetail for the Challenge Details view:

In Part 5 we’ll wire up the Search Screen: Wiring Up the Search Screen