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:
- Part 1: Dip Your Toe In
- Part 2: A Few of My Favorite Things
- Part 3: The API Service
- Part 4: Application Layout
- Part 5: Wiring Up the Search Screen
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.
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.
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