Initial Ionic setup. No interactivity.

README.md

@@ -0,0 +1,75 @@
+ionic-pouchdb-todo
+==========================
+
+A simple Ionic Todo app with a PouchDb local storage backend configured to sync
+with a CouchDb installation. Demo of offline functionality with server synchronization.
+
+You can watch me demo building the app at [FITC Spotlight: AngularJS](http://youtu.be/6ecuA-pOev0?t=14m9s) in Toronto.
+
+This repository has multiple releases you can download or tags you can checkout to see the incremental building of the application.
+
+## Installation
+
+I've included the most current version of Ionic (1.0.0-beta.6) and
+PouchDb (2.2.3) as of this check-in. This will enable running locally 
+the app in a browser without needing `node` to install `cordova`, `ionic`, or `gulp` 
+
+## Run the App
+
+All of the necessary javascript files are in the repo for simplicities sake. 
+You can `cd` into the `www` directory and run 
+
+```bash
+python -m SimpleHTTPServer 8000
+```
+
+You can then just open [http://localhost:8000/index.html](http://localhost:8000/index.html) in a browser.
+
+Personally I use WebStorm which has a built in server. From a JetBrains product, you can select "View...", "Open in Browser" on index.html.
+
+The final version of this demo requires you to [download and install CouchDb](http://couchdb.apache.org/#download), which runs on port 5984.
+
+## iOS version
+
+However, to run this as a mobile application in iOS emulator,
+do the following to setup : 
+
+```bash
+$ cd ionic-pouchdb-todo
+$ sudo npm install -g cordova ionic gulp
+```
+
+To run in the iPhone Simulator:
+
+```bash
+ionic platform add ios
+ionic build ios
+ionic emulate ios
+```
+
+## Building Out & Updating Ionic or PouchDb
+
+To continue working on this repository, adding tests, using SASS, you can
+
+```bash
+$ npm install
+$ gulp install
+```
+
+To update to a new version of Ionic, open bower.json and change the version listed there.
+
+For example, to update from version `1.0.0-beta.6` to `1.0.0-beta.7`, open bower.json and change this:
+
+```
+"ionic": "driftyco/ionic-bower#1.0.0-beta.6"
+```
+
+To this:
+
+```
+"ionic": "driftyco/ionic-bower#1.0.0-beta.7"
+```
+
+After saving the update to bower.json file, run `gulp install`.
+
+Alternatively, install bower globally with `npm install -g bower` and run `bower install`.

bower.json

@@ -0,0 +1,10 @@
+{
+  "name": "Todo",
+  "private": "true",
+  "devDependencies": {
+    "ionic": "driftyco/ionic-bower#1.0.0-beta.6"
+  },
+  "dependencies": {
+    "pouchdb": "~2.2.3"
+  }
+}

gulpfile.js

@@ -0,0 +1,50 @@
+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())
+        .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();
+});

package.json

@@ -0,0 +1,22 @@
+{
+    "name": "ionic-project",
+    "version": "1.0.0",
+    "description": "An Ionic project",
+    "repository" :
+    { 
+	"type" : "git",
+	"url" : "http://github.com/danielzen/ionic-pouchdb-sync.git"
+    },
+    "dependencies": {
+        "gulp": "^3.5.6",
+        "gulp-sass": "^0.7.1",
+        "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"
+    }
+}

www/.bowerrc

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

www/.gitignore

@@ -0,0 +1,7 @@
+.*.sw*
+*.keystore
+node_modules
+.idea
+.DS_Store
+tmp
+

www/config.xml

@@ -0,0 +1,15 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="com.ionic.todo" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>IonPouch Todo</name>
+    <description>
+      An Ionic Framework TODO demo with a PouchDB sync backend
+    </description>
+    <author email="daniel@zendigital.com" href="http://zendigital.com">
+      Zen Digital
+    </author>
+    <content src="index.html" />
+    <access origin="*" />
+    <preference name="fullscreen" value="true" />
+    <preference name="webviewbounce" value="true" />
+    <icon src="www/res/ios/icon.png" />
+</widget>

www/css/app.css

@@ -0,0 +1,5 @@
+.complete {
+    text-decoration: line-through;
+    color: grey;
+}
+

www/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ToDo v1</title>
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+
+  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
+  <link href="css/app.css" rel="stylesheet">
+
+  <!-- ionic/angularjs js -->
+  <script src="lib/ionic/js/ionic.bundle.js"></script>
+
+  <!-- cordova script (this will be a 404 during development) -->
+  <script src="cordova.js"></script>
+
+  <!-- your app's js -->
+  <script src="js/app.js"></script>
+</head>
+
+<body ng-app="todo" ng-controller="TodoCtrl">
+<ion-header-bar class="bar-positive">
+  <h1 class="title">Todos</h1>
+</ion-header-bar>
+<ion-content>
+  <ion-list>
+    <ion-item ng-repeat="task in tasks" class="item-icon-right"
+              ng-class="{complete: task.completed}">
+      {{task.title}}
+    </ion-item>
+  </ion-list>
+</ion-content>
+</body>
+</html>

www/js/app.js

@@ -0,0 +1,11 @@
+angular.module('todo', ['ionic'])
+  .controller('TodoCtrl', function($scope) {
+    // Initialize tasks
+    $scope.tasks =
+      [
+        {title: "First", completed: true},
+        {title: "Second", completed: false},
+        {title: "Third", completed: false},
+      ];
+
+  });