Skip to content
Ionic Framework Sample Application with Integration
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Book session on Codementor

DC Web Women Code(Her) Ionic Framework Sample App

##About This Project This is a simple application that was used to demonstrate the Ionic Framework

The application allows the user to take pictures and save them to a in memory cache or if you set up you can save the images to a parse datastore in the cloud. Images are saved with a caption, photo data and a timestamp

alt tag alt tag

##More Images

##Installation Steps for Running Project

  • It is assumed that you have and Android or IOS development environment installed
  • It is assumed you have node and npm installed

####High Level Installation Steps

  • Install Ionic
    • this process will download phonegap/cordova for you
    • ngCordova is used, but already included in repo, more information here:
    • we will be using angularjs, that is bunded with ionic, see more information on AngularJS
  • Download Code from repo
  • Add missing bower and node modules
    • enter command bower update
    • enter command sudo npm update -g ionic
  • Add back the plugins that are not included in repo
    • enter command cordova plugin add
    • enter command cordova plugin add org.apache.cordova.statusbar
    • enter command cordova plugin add org.apache.cordova.console
    • enter command cordova plugin add org.apache.cordova.device
    • enter command cordova plugin add com.ionic.keyboard
  • Add in the platforms
    • enter command ionic platform android
    • enter command ionic platform ios

##Parse Integration as Requested in the workshop The application demonstrates the use of Angular Services for persistence. There is a Parse implementation, ParseImageService and a memory based implementation, ImageService. The application currently is configured to use ParseImageService; this requires that you set your own parse credentials in the application.

You will need to create an application in and create a Custom Object with a field picture that is of type File and another field caption of type String.

When you browse your data, it should look like this.

![alt tag](doc/Screenshot 2014-09-14 18.34.33.png)

For additional information, see the website for Getting Started

###ImageModel to Support both Interfaces The data object that is returned from a parse query is not a simple javascript hash so there was a need to create a model object that would convert the objects returned from the default ImageService into some object that has the same interface as a object so we would not need two UI implementations.

  *  This is a helper model that is created to allow the application UI to work with the
  *  local datastore and the parse datastore without modifications
  * @param _params
  * @returns {{id: *, createdAt: *, get: get, set: set}}
  * @constructor
 var ImageModel = function (_params) {
     var _data = {};

      * initialize object to act like a object
      * @param _params
      * @private
     this.set = function (_params) {

         if (!_params) {
         this.createdAt = _params.timestamp;

         _data['createdAt'] = _params.timestamp;
         _data.caption =; =;
         _data.picture = { _url:};

      * @param _key
      * @returns {*}
      * @private
     this.get = function (_key) {
         return _data[_key]



####Parse Integration and Basic Local Storage Open the app.js file and modify the code below to use your credentials. If you set any of the credentials to an empty string, the application will still work, but it will utilize the default image service and not use parse

 .value('parseConfiguration', {
     applicationId: "YOUR APPLICATION ID",
     javascriptKey: "YOUR JAVASCRIPT KEY"
    USING_PARSE : true


####Ui-Router and resolve for Parse Integration This funny looking code for initializing that is in app.js is the resolve functionality of the ui-router. You can find additional documentation here

usingParse: function ($q, $timeout, ParseConfiguration) {

    if (ParseConfiguration.applicationId && ParseConfiguration.javascriptKey) {
        console.log("parse initialize");
        Parse.initialize(ParseConfiguration.applicationId, ParseConfiguration.javascriptKey);
    } else {
        ParseConfiguration.USING_PARSE = false

    return ParseConfiguration.USING_PARSE;


Ionic Video Series - Subscribe on YouTube Channel

You can’t perform that action at this time.