AGJS-165 - Angular.js / Ionic Sync Example

Import the example from https://github.com/aliok/diff-sync-ionic

README.md

@@ -58,7 +58,8 @@ To get the recipes, clone this repo:
 | [Food Recipes](food_recipes_data_manager) | Client-side storage example. | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
 | [Simple Push](simplepush-example) | Introduction to SimplePush. | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: |
 | [Unified Push](simplepush-unifiedpush-example) | Usage of AeroGear's SimplePush/Unified Push JS API | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: |
-| [Diff Sync](diff-sync-ember) | Ember app showcasing the use of Differential Synchronization client lib | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: |
+| [Diff Sync - Ember](diff-sync-ember) | Ember app showcasing the use of Differential Synchronization client lib | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: |
+| [Diff Sync - Ionic/Angular](diff-sync-ionic) | Ionic/Angular app showcasing the use of Differential Synchronization client lib | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: |
 
 ## Contributing Cookbook Recipes
 

copyright.txt

@@ -0,0 +1,3 @@
+see https://aerogear.org/docs/guides/license/ about this file
+
+Ali Ok <aliok AT apache DOT org>

diff-sync-ionic/.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "www/lib"
+}

diff-sync-ionic/.editorconfig

@@ -0,0 +1,33 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+indent_style = space
+indent_size = 2
+
+[*.css]
+indent_style = space
+indent_size = 2
+
+[*.html]
+indent_style = space
+indent_size = 2
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

diff-sync-ionic/.gitignore

@@ -0,0 +1,9 @@
+# generated stuff
+node_modules/
+platforms/
+plugins/
+hooks/
+www/lib
+
+# IntelliJ Idea files
+.idea

diff-sync-ionic/README.md

@@ -0,0 +1,107 @@
+Differential Synchronization - Ionic/Angular Example
+============================================
+
+## Problem
+
+Usage of the AeroGear Sync Server with an Ionic/Angular client
+
+## Solution
+
+The AeroGear Sync Server an implementation of [Google's Differential Synchonrization](http://research.google.com/pubs/pub35605.html) by Neil Fraser.
+
+AeroGear.js provides a client library to interact with the server, using both the JSON Patch and Diff-Merge-Patch protocols.
+
+This demo will utilize the JSON Patch part of the library.
+
+
+## Demo
+
+<!--- See http://stackoverflow.com/questions/4279611/how-to-embed-a-video-into-github-readme-md --->
+[![demo](http://img.youtube.com/vi/MmSd_5pFP3E/0.jpg)](https://youtu.be/MmSd_5pFP3E)
+
+See the demo video on [Youtube](https://youtu.be/MmSd_5pFP3E).
+
+## Working Code Example
+
+This demo is an [Ionic Framework]<http://ionicframework.com/> application.  Follow the directions below to get the example working.
+
+### Prerequisites
+
+You will need the following things properly installed on your computer.
+
+* [Git](http://git-scm.com/)
+* [Node.js](http://nodejs.org/) (with NPM)
+* [AeroGear Sync Server - JSON Patch Version](https://github.com/aerogear/aerogear-sync-server#starting-the-json-patch-server)
+
+### Installation
+
+* Install Bower : `npm install -g bower`
+* Install Gulp : `npm install -g gulp`
+* Install Cordova and Ionic: `npm install -g cordova ionic`
+* `git clone <repository-url>` this repository
+* change into the new directory
+* `npm install`
+* `bower install`
+
+### Running / Development
+
+Start up the Sync Server (see [here](https://github.com/aerogear/aerogear-sync-server#starting-the-json-patch-server)).
+
+Once the Sync Server is running, do:
+
+* `ionic serve`
+* Visit your app at [http://localhost:8100](http://localhost:8100).
+
+### Running on devices or emulators
+
+By default sync server is assumed to run on `ws://localhost:7777/sync`. This is good for `ionic serve`.
+However, you cannot run the application on emulators or real devices using `localhost`. it is because `localhost` means the device itself in that case.
+So, if you're running the sync server locally, you have to update following constant with your IP for `ionic run` or `ionic emulate` in **`www/js/environment.js`**:
+
+    SYNC_SERVER_URL: 'ws://xx.xx.xx.xx:7777/sync'
+
+#### Running on iOS
+
+Start up the Sync Server (see [here](https://github.com/aerogear/aerogear-sync-server#starting-the-json-patch-server)).
+
+Once the Sync Server is running, do:
+
+* `ionic platform add ios` (once)
+* Run on connected device or emulator : `ionic run ios`
+* Run on emulator : `ionic emulate ios` 
+
+For more information, see [Ionic's CLI documentation](http://ionicframework.com/docs/cli/run.html).
+
+#### Running on Android
+
+Start up the Sync Server (see [here](https://github.com/aerogear/aerogear-sync-server#starting-the-json-patch-server)).
+
+Once the Sync Server is running, do:
+
+* `ionic platform add android` (once)
+* Run on connected device or emulator : `ionic run android`
+* Run on emulator : `ionic emulate android`
+
+For more information, see [Ionic's CLI documentation](http://ionicframework.com/docs/cli/run.html).
+
+### Building
+
+* `ionic build ios` OR `ionic build android`
+
+For more information, see [Ionic's CLI documentation](http://ionicframework.com/docs/cli/run.html).
+
+### Further Reading / Useful Links
+
+* [AeroGear Sync Server](https://github.com/aerogear/aerogear-sync-server)
+* [Ionic framework](http://ionicframework.com/)
+* [Ionic CLI](http://ionicframework.com/docs/cli/)
+
+
+### Notes
+
+For the Ember based example, see <https://github.com/aerogear/aerogear-js-cookbook/tree/master/diff-sync-ember>.
+
+Code here is only demonstration purposes for AeroGear Sync. In a real world Angular project, you would have things separated.
+Also, you'd employ [promises](https://docs.angularjs.org/api/ng/service/$q) and prefer [*'controller-as syntax'*](https://github.com/johnpapa/angular-styleguide#style-y032).
+
+Those are not done to keep things simple and only focus on Aerogear sync. 

diff-sync-ionic/bower.json

@@ -0,0 +1,11 @@
+{
+  "name": "diff-sync-ionic",
+  "private": "true",
+  "devDependencies": {
+    "ionic": "driftyco/ionic-bower#1.0.0-rc.4"
+  },
+  "dependencies": {
+    "aerogear-diff-sync": "~2.1.0",
+    "fast-json-patch": "~0.5.0"
+  }
+}

diff-sync-ionic/config.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<!--
+  ~    JBoss, Home of Professional Open Source
+  ~    Copyright 2015, Red Hat, Inc., and individual contributors
+  ~    by the @authors tag. See the copyright.txt in the distribution for a
+  ~    full listing of individual contributors.
+  ~
+  ~    Licensed under the Apache License, Version 2.0 (the "License");
+  ~    you may not use this file except in compliance with the License.
+  ~    You may obtain a copy of the License at
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~    Unless required by applicable law or agreed to in writing, software
+  ~    distributed under the License is distributed on an "AS IS" BASIS,
+  ~    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~    See the License for the specific language governing permissions and
+  ~    limitations under the License.
+  -->
+
+<widget id="com.ionicframework.diffsyncionic124329" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <name>diff-sync-ionic</name>
+  <description>
+        Aerogear Ionic/Angular demo
+    </description>
+  <author email="aliok@apache.org" href="http://aliok.com.tr">
+      Ali Ok
+    </author>
+  <content src="index.html"/>
+  <access origin="*"/>
+  <preference name="webviewbounce" value="false"/>
+  <preference name="UIWebViewBounce" value="false"/>
+  <preference name="DisallowOverscroll" value="true"/>
+  <preference name="BackupWebStorage" value="none"/>
+  <feature name="StatusBar">
+    <param name="ios-package" value="CDVStatusBar" onload="true"/>
+  </feature>
+</widget>

diff-sync-ionic/gulpfile.js

@@ -0,0 +1,69 @@
+/*
+ *    JBoss, Home of Professional Open Source
+ *    Copyright 2015, Red Hat, Inc., and individual contributors
+ *    by the @authors tag. See the copyright.txt in the distribution for a
+ *    full listing of individual contributors.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var bower = require('bower');
+var concat = require('gulp-concat');
+var sass = require('gulp-sass');
+var minifyCss = require('gulp-minify-css');
+var rename = require('gulp-rename');
+var sh = require('shelljs');
+
+var paths = {
+  sass: ['./scss/**/*.scss']
+};
+
+gulp.task('default', ['sass']);
+
+gulp.task('sass', function(done) {
+  gulp.src('./scss/ionic.app.scss')
+    .pipe(sass({
+      errLogToConsole: true
+    }))
+    .pipe(gulp.dest('./www/css/'))
+    .pipe(minifyCss({
+      keepSpecialComments: 0
+    }))
+    .pipe(rename({ extname: '.min.css' }))
+    .pipe(gulp.dest('./www/css/'))
+    .on('end', done);
+});
+
+gulp.task('watch', function() {
+  gulp.watch(paths.sass, ['sass']);
+});
+
+gulp.task('install', ['git-check'], function() {
+  return bower.commands.install()
+    .on('log', function(data) {
+      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
+    });
+});
+
+gulp.task('git-check', function(done) {
+  if (!sh.which('git')) {
+    console.log(
+      '  ' + gutil.colors.red('Git is not installed.'),
+      '\n  Git, the version control system, is required to download Ionic.',
+      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
+      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
+    );
+    process.exit(1);
+  }
+  done();
+});

diff-sync-ionic/ionic.project

@@ -0,0 +1,4 @@
+{
+  "name": "diff-sync-ionic",
+  "app_id": ""
+}

diff-sync-ionic/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "diff-sync-ionic",
+  "version": "1.0.0",
+  "description": "diff-sync-ionic: An Ionic project",
+  "dependencies": {
+    "gulp": "^3.5.6",
+    "gulp-sass": "^1.3.3",
+    "gulp-concat": "^2.2.0",
+    "gulp-minify-css": "^0.3.0",
+    "gulp-rename": "^1.2.0"
+  },
+  "devDependencies": {
+    "bower": "^1.3.3",
+    "gulp-util": "^2.2.14",
+    "shelljs": "^0.3.0"
+  }
+}

diff-sync-ionic/scss/ionic.app.scss

@@ -0,0 +1,23 @@
+/*
+To customize the look and feel of Ionic, you can override the variables
+in ionic's _variables.scss file.
+
+For example, you might change some of the default colors:
+
+$light:                           #fff !default;
+$stable:                          #f8f8f8 !default;
+$positive:                        #387ef5 !default;
+$calm:                            #11c1f3 !default;
+$balanced:                        #33cd5f !default;
+$energized:                       #ffc900 !default;
+$assertive:                       #ef473a !default;
+$royal:                           #886aea !default;
+$dark:                            #444 !default;
+*/
+
+// The path for our ionicons font files, relative to the built CSS in www/css
+$ionicons-font-path: "../lib/ionic/fonts" !default;
+
+// Include all of Ionic
+@import "www/lib/ionic/scss/ionic";
+

diff-sync-ionic/www/css/style.css

@@ -0,0 +1 @@
+/* Empty. Add your own CSS if you like */

diff-sync-ionic/www/hobby-add-edit-modal.html

@@ -0,0 +1,32 @@
+<!--
+  ~    JBoss, Home of Professional Open Source
+  ~    Copyright 2015, Red Hat, Inc., and individual contributors
+  ~    by the @authors tag. See the copyright.txt in the distribution for a
+  ~    full listing of individual contributors.
+  ~
+  ~    Licensed under the Apache License, Version 2.0 (the "License");
+  ~    you may not use this file except in compliance with the License.
+  ~    You may obtain a copy of the License at
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~    Unless required by applicable law or agreed to in writing, software
+  ~    distributed under the License is distributed on an "AS IS" BASIS,
+  ~    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~    See the License for the specific language governing permissions and
+  ~    limitations under the License.
+  -->
+
+<div class="modal">
+  <ion-header-bar>
+    <h1 class="title">Add/edit hobby</h1>
+  </ion-header-bar>
+  <ion-content>
+    <div class="list">
+      <label class="item item-input">
+        <span class="input-label">Hobby</span>
+        <input type="text" ng-model="editedHobby.description">
+      </label>
+    </div>
+
+    <button class="button button-full button-positive" ng-click="saveHobby()">Done</button>
+  </ion-content>
+</div>