In Part 2 we did some configuration and setup some useful addons.
In Part 3, we’ll get started in earnest and create a service to make the API calls for our app and track the results. We’ll be querying topcoder challenge data.
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
The Challenge Service
The layout of our service will be as follows:
- challengeStore – object for storing raw challenge data
- challenges – primary service interface returned from the factory
- [utility functions] – the functions doing all the work
Added to www/js/services.js
Challenge Object “Methods”
getChallenges() – Returns an object containing all tracked challenge data
updateChallenges() – Updates all tracked challenge data by making the appropriate calls to the Topcoder API.
updateChallenge(challengeId) – Update the data for a specific tracked challenge
addChallenge() – Add a new challenge to track and update it’s data
removeChallenge(challengeId) – Remove a challenge from tracking
findChallengeByName(string) – Searched all open challenges for a challenge whose name contains the string, store the results
getSearchResults() – Return the results (challenge data for matching challenges) from the last search
setCurrentChallengeId(challengeId) – Used for tracking Ionic states
getCurrentChallengeId() – Used for tracking Ionic states
Let’s give our new service a quick try to make sure it’s working.
Step one – add a new item to the hamburger menu (www/templates/menu.html):
Step two – add the corresponding state for the app (www/js/app.js):
Step three – add the controller (www/js/controllers):
Step Four – Finally, add a new template for Challenges
This is the main HTML displayed for this view (new file www/templates/challenges.html)
That should give us a test of our new Service. Refresh your app, open the sidemenu and choose the new Challenges option. We should now see the raw data returned by our API call.
Coming up – part four: Application Layout