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

Ionic – The API Service

By wwwtc In Uncategorized

Posted July 24th, 2015

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:

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

Testing 1..2..3

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