Komandozeile öffnen (Start ->  cmd.exe oder

Verzeichnis anlegen - myApp mit eigenem Namen ersetzen

$ ionic start myApp blank

Ionic Lab Anwendung runterladen:

http://lab.ionic.io/

Einfachen NurText Editor runterladen (wem Notepad nicht reicht)

http://portableapps.com/apps/development/notepadpp_portable

(Portable App - Installationsfrei)

Im Verzeichnis (Projektverzeichnis) Datei index.html editieren:

> Card Example

    <div class="card">
    <div class="item item-divider">
        Test
    </div>
    <div class="item item-text-wrap">
        Beispiel für eine Card!
    </div>

List Example
        <ul class="list">
            <li class="item">
              Deutschland
            </li>
            <li class="item">
              Italien
            </li>
            <li class="item">
              Griechenland
            </li>
            <li class="item">
              Holland
            </li>
        </ul>

List mit Icons Example
        <ul class="list">
            <li class="item">
                <i class="icon ion-android-plane"></i> Deutschland
            </li>
            <li class="item">
                <i class="icon ion-android-car"></i> Italien
            </li>
            <li class="item">
                <i class="icon ion-android-plane"></i> Griechenland
            </li>
            <li class="item">
                <i class="icon ion-android-train"></i> Holland
            </li>
        </ul>
        
List mit Icons & Zählbubbels
        <ul class="list">
            <li class="item">
                <i class="icon ion-android-plane"></i> Deutschland
                <span class="badge badge-assertive">0</span>
            </li>
            <li class="item">
                <i class="icon ion-android-car"></i> Italien
                <span class="badge badge-assertive">0</span>
            </li>
            <li class="item">
                <i class="icon ion-android-plane"></i> Griechenland
                <span class="badge badge-assertive">0</span>
            </li>
            <li class="item">
                <i class="icon ion-android-train"></i> Holland
                <span class="badge badge-assertive">0</span>
            </li>
        </ul>

List mit Syling
        <ul class="list">
            <li class="item">
                <div class="row">
                    <div class="col col-20"><i class="icon ion-android-walk" style="font-size: 250%;"></i></div>
                    <div class="col">
                        <div class="row">Deutschland</div>
                        <div class="row">von 01.01.2000 - 31.12.2099</div>
                    </div>
                </div>
                <span class="badge badge-assertive">0</span>

            </li>
            <li class="item">
                <div class="row">
                    <div class="col col-20"><i class="icon ion-android-bicycle" style="font-size: 250%;"></i></div>
                    <div class="col">
                        <div class="row">Italien</div>
                        <div class="row">von 23.07.2016 - 30.07.2016</div>
                    </div>
                </div>
                <span class="badge badge-assertive">0</span>
            </li>
            <li class="item">
                <div class="row">
                    <div class="col col-20"><i class="icon ion-android-plane" style="font-size: 250%;"></i></div>
                    <div class="col">
                        <div class="row">Griechenland</div>
                        <div class="row">von 21.08.2016 - 05.09.2016</div>
                    </div>
                </div>
                <span class="badge badge-assertive">0</span>
            </li>
            <li class="item">
                <div class="row">
                    <div class="col col-20"><i class="icon ion-android-train" style="font-size: 250%;"></i></div>
                    <div class="col">
                        <div class="row">Holland</div>
                        <div class="row">von 05.11.2016 - 09.11.2016</div>
                    </div>
                </div>
                <span class="badge badge-assertive">0</span>
            </li>
        </ul>
        
Erste Liste mit ion JS Komponenten
        <ion-list ng-controller='itemsCtrl'>
            <ion-item ng-repeat="item in items">
                Hello, {{item.id}}!
            </ion-item>
        </ion-list>
        
    Dazugehöriger minimal-Controller (in app.js)
        .controller('itemsCtrl', function($scope) {
            $scope.items = [
               {id: 1},
               {id: 2},
               {id: 3},
               {id: 4}
            ];
        });
        
Gestylte Liste mit JS Komponenten
        <ion-list ng-controller='itemsCtrl'>
            <ion-item ng-repeat="item in items">
                <li class="item">
                <div class="row">
                    <div class="col col-20"><i class="icon {{item.reiseIcon}}" style="font-size: 250%;"></i></div>
                    <div class="col">
                        <div class="row">{{item.reiseZiel}}</div>
                        <div class="row">von {{item.reiseStart}} -<br />{{item.reiseEnde}}</div>
                    </div>
                </div>
                <span class="badge badge-assertive">{{item.anzahlWildeTiere}}</span>
                </li>
            </ion-item>
        </ion-list>
        
        </ion-content>
        
Daten im Controller (noch in app.js)

.controller('itemsCtrl', function($scope) {
    $scope.items = [
            {
                "reiseZiel": "Deutschland",
                "reiseMittel": "ZuFuss",
                "reiseIcon": "ion-android-walk",
                "reiseStart": "01.01.2016",
                "reiseEnde": "31.12.2099",
                "anzahlWildeTiere": 0
            },
           {
                reiseZiel: "Italien",
                reiseMittel: "Fahrrad",
                "reiseIcon": "ion-android-bicycle",
                reiseStart: "23.07.2016",
                reiseEnde: "30.07.2016",
                anzahlWildeTiere: 0
           },
           {
                "reiseZiel": "Griechenland",
                reiseMittel: "Flugzeug",
                "reiseIcon": "ion-android-plane",
                reiseStart: "21.08.2016",
                reiseEnde: "05.09.2016",
                anzahlWildeTiere: 0
           },
           {
                reiseZiel: "Holland",
                reiseMittel: "Bahn",
                "reiseIcon": "ion-android-train",
                reiseStart: "05.11.2016",
                reiseEnde: "09.11.2016",
                anzahlWildeTiere: 0
           }
    ];
});

Geänderte Zeile in app.js:

angular.module('starter', ['ionic', 'starter.controllers'])

Code in controllers.js
angular.module('starter.controllers', [])

.controller('itemsCtrl', function($scope) {
    $scope.items = [
            {
                "reiseZiel": "Deutschland",
                "reiseMittel": "ZuFuss",
                "reiseIcon": "ion-android-walk",
                "reiseStart": "01.01.2016",
                "reiseEnde": "31.12.2099",
                "anzahlWildeTiere": 0
            },
           {
                reiseZiel: "Italien",
                reiseMittel: "Fahrrad",
                "reiseIcon": "ion-android-bicycle",
                reiseStart: "23.07.2016",
                reiseEnde: "30.07.2016",
                anzahlWildeTiere: 0
           },
           {
                "reiseZiel": "Griechenland",
                reiseMittel: "Flugzeug",
                "reiseIcon": "ion-android-plane",
                reiseStart: "21.08.2016",
                reiseEnde: "05.09.2016",
                anzahlWildeTiere: 0
           },
           {
                reiseZiel: "Holland",
                reiseMittel: "Bahn",
                "reiseIcon": "ion-android-train",
                reiseStart: "05.11.2016",
                reiseEnde: "09.11.2016",
                anzahlWildeTiere: 0
           }
    ];
});

Formular über der Liste einbauen - zuerst nur ein Feld und ein Button

        <form ng-controller='itemsCtrl' ng-submit="createReise(reise)">
            <div class="card">
                <div class="item item-divider">
                    Neue Reise anlegen
                </div>
                <div class="item item-text-wrap">
                    <label class="item item-input">
                        <input type="text" placeholder="Reiseziel?" ng-model="reise.reiseZiel">
                    </label>
                </div>
                <div class="item item-divider">
                    <div class="padding">
                        <button type="submit" class="button button-block button-positive">Reise anlegen</button>
                    </div>
                </div>
      </form>

Controller in controllers.js mit funktion createReise versehen
(Demodaten entfernen)

    $scope.items = [];

    $scope.createReise = function(reise) {
        console.log("hello reisedaten= "+ reise.reiseZiel);
        $neueReise = [
            {
                "reiseZiel": reise.reiseZiel,
                "reiseMittel": "Flugzeug",
                "reiseIcon": "ion-android-plane",
                "reiseStart": "21.08.2016",
                "reiseEnde": "05.09.2016",
                "anzahlWildeTiere": 0
            }
        ];
        console.log($neueReise);
        $scope.items=$scope.items.concat( $neueReise );
        $scope.reise=[];
        console.log($scope.items);
    }
})

Formular mir der Erfassung aller Daten erweitern:

controller auf die body-ebene hochziehen - hinter den body tag
 <body ng-controller="mainCtrl">
 
        <form ng-submit="createReise(reise)">
            <div class="card">
                <div class="item item-divider">
                    Neue Reise
                </div>
                <div class="item item-text-wrap">
                    <label class="item item-input">
                        <i class="icon ion-android-pin placeholder-icon"></i>
                        <input type="text" placeholder="Reiseziel?" ng-model="reise.reiseZiel">
                    </label>
                </div>
                <div class="item item-text-wrap">
                    <label class="item item-input item-select">
                        <div class="input-label">
                          Reisemittel
                        </div>
                        <select ng-model="reise.reiseMittel">
                            <option>Zu Fuß</option>
                            <option selected>Fahrrad</option>
                            <option>Auto/Bus</option>
                            <option>Flugzeug</option>
                            <option>Eisenbahn</option>
                        </select>
                    </label>
                </div>
                <div class="item item-text-wrap">
                    <label class="item item-input">
                        <i class="icon ion-calendar placeholder-icon"></i>
                        <input type="text" placeholder="Start:" ng-model="reise.reiseStart">
                    </label>
                    <label class="item item-input">
                        <i class="icon ion-calendar placeholder-icon"></i>
                        <input type="text" placeholder="Ende" ng-model="reise.reiseEnde">
                    </label>
                </div>            
                <div class="item item-divider">
                    <div class="padding">
                        <button type="submit" class="button button-block button-positive">Reise anlegen</button>
                    </div>
                </div>
        </form>

Controller so erweitern, daß alle Daten gespeichert werden:

    $scope.createReise = function(reise) {
        console.log("hello reisedaten= "+ reise.reiseMittel);
        switch (reise.reiseMittel) {
            case "Eisenbahn":
                reise.reiseIcon = "ion-android-train";
                break;
            case "Zu Fuß":
                reise.reiseIcon = "ion-android-walk";
                break;
            case "Fahrrad":
                reise.reiseIcon = "ion-android-bicylcle";
                break;
            case "Flugzeug":
                reise.reiseIcon = "ion-android-plane";
                break;
            case "Auto/Bus":
                reise.reiseIcon = "ion-android-car";
                break;
            default:
                reise.reiseIcon = "ion-help";
        }
        $neueReise = [
            {
                "reiseZiel": reise.reiseZiel,
                "reiseMittel": reise.reiseMittel,
                "reiseIcon": reise.reiseIcon,
                "reiseStart": reise.reiseStart,
                "reiseEnde": reise.reiseEnde,
                "anzahlWildeTiere": 0
            }
        ];
        console.log($neueReise);
        $scope.items=$scope.items.concat( $neueReise );
        $scope.reise=[];
        console.log($scope.items);
    }
})

Services aufbauen - DB Funktionen

angular.module('starter.services', [])

angular.module('starter.services', [])

    .factory("DBService", function ($q, $ionicPopup, $state) {
        var db = null;

        function createDB() {   
            var deferred = $q.defer();
            var version = 1;
            var request = window.indexedDB.open("reiseDB", version);

            request.onupgradeneeded = function(e) {
                db = e.target.result;
                e.target.transaction.onerror = indexedDB.onerror;

                if(db.objectStoreNames.contains("reiseData")) {
                    db.deleteObjectStore("reiseData");
                }

                var store = db.createObjectStore("reiseData", { keyPath: "id", autoIncrement:true });
            };

            request.onsuccess = function(e) {
                db = e.target.result;
                deferred.resolve();
            };

            request.onerror = function(e){
                deferred.reject("Error creating database.");
                console.dir(e);
            };

            return deferred.promise;
        }

        function getReise(){
            var deferred = $q.defer();

            if(db === null){
                deferred.reject("IndexDB is not opened yet!");
            }
            else{
                var trans = db.transaction(["reiseData"], "readwrite");
                var store = trans.objectStore("reiseData");
                var reisen = [];

                // Alle Einträge aus der Datenbank auslesen;
                var keyRange = IDBKeyRange.lowerBound(0);
                var cursorRequest = store.openCursor(keyRange);

                cursorRequest.onsuccess = function(e) {
                    var result = e.target.result;
                    if(result === null || result === undefined){
                        deferred.resolve(reisen);
                    }else{
                        console.log("In getreise: " + result.value);
                        reisen.push(result.value);
                        result.continue();
                    }
                };

                cursorRequest.onerror = function(e){
                    deferred.reject("Error retrieving records " + e.value);
                };
            }
            return deferred.promise;
        }

        function getReiseById(reiseId){
            var deferred = $q.defer();

            if(db === null){
                deferred.reject("IndexDB is not opened yet!");
            }
            else{
                var transaction = db.transaction(["reiseData"], "readwrite");
                var objectStore = transaction.objectStore("reiseData");
                var request = objectStore.get(Number(reiseId));

                var reisen = [];

                request.onsuccess = function(event) {
                    var reise = request.result;
                    reisen.push(reise);
                    deferred.resolve(reisen);
                };

                request.onerror = function(e){
                    deferred.reject("Error retrieving records " + e.value);
                };
            }
            return deferred.promise;
        }

        function saveReise(reise){
            // console.log("Gespeichert wird: " + reise.toSource());
            var reise_objekt=reise;

            // console.log("Zu speicherndes Objekt sieht so aus: " + reise_objekt.toSource());
            var deferred = $q.defer();

            if(db === null){
                deferred.reject("IndexDB is not opened yet!");
            }
            else{
                var trans = db.transaction(["reiseData"], "readwrite");
                var store = trans.objectStore("reiseData");

                var request = store.add(reise_objekt);

                request.onsuccess = function(e) {
                    deferred.resolve();
                    $ionicPopup.alert({
                        title: 'Toll!',
                        template: 'Sie haben eine neue Reise angelegt.'
                    }).then(function(res) {
                        $state.go('fotosafari');
                    });
                };

                request.onerror = function(e) {
                    console.log(e.value);
                    deferred.reject("Error saving reise.");
                };
            }
            return deferred.promise;
        }

        function delReise(reiseId){
            var deferred = $q.defer();

            if(db === null){
                deferred.reject("IndexDB is not opened yet!");
            }
            else{
                var trans = db.transaction(["reiseData"], "readwrite");
                var store = trans.objectStore("reiseData");

                var request = store.delete(reiseId);

                request.onsuccess = function(e) {
                    deferred.resolve();
                };

                request.onerror = function(e) {
                    console.log(e.value);
                    deferred.reject("Error deleting reise.");
                };
            }
            return deferred.promise;
        }

        function updateReise(reise, reiseId){

            var deferred = $q.defer();

            if(db === null){
                deferred.reject("IndexDB is not opened yet!");
            }
            else{
                var trans = db.transaction(["reiseData"], "readwrite");
                var store = trans.objectStore("reiseData");

                var request = store.put({
                    "reiseZiel":reise.reiseZiel,
                    "reiseMittel":reise.reiseMittel,
                    "reiseIcon":reise.reiseIcon,
                    "reiseStart":reise.reiseStart,
                    "reiseEnde":reise.reiseEnde,
                    "anzahlWildeTiere":reise.anzahlWildeTiere,
                    "id":Number(reiseId)
                });

                request.onsuccess = function(e) {
                    deferred.resolve();
                    $ionicPopup.alert({
                        title: 'Toll.',
                        template: 'Die Beobachtung wurde gezählt.'
                    }).then(function(res) {
                        $state.go('fotosafari');
                    });
                };

                request.onerror = function(e) {
                    console.log(e.value);
                    deferred.reject("Error updated reise.");
                };
            }
            return deferred.promise;
        }

        return {
            setup: function() {
                return createDB();
            },
            getReise: function(){
                return getReise();
            },
            getReiseById: function(reiseId){
                return getReiseById(reiseId);
            },
            saveReise: function(reise){
                return saveReise(reise);
            },
            delReise: function(reiseId){
                return delReise(reiseId);
            },
            updateReise: function(reise, reiseId){
                return updateReise(reise, reiseId);
            }
        }

});

Das HTML anpassen:
einzelne Views für die einzelnen Seiten - Neue reise button im Header, Back Button auf Reiseanlegen-Seite

  <body>
    <ion-nav-bar>
    <ion-nav-back-button class="button-stable">
        <i class="ion-arrow-left-c"></i> Zurück
    </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <!--    <ion-pane>
          <ion-header-bar class="bar-stable">
            <h1 class="title">Meine Foto-Safaris</h1>
          </ion-header-bar>
-->
    <script id="home.html" type="text/ng-template">
        <ion-view title="Foto-Safari" cache-view="false">
            <ion-nav-buttons side="primary">
                <button class="button icon-left icon ion-plus-circled button-small button-assertive" ng-click="seitenWechsel('reiseanlegen');">
                    Reise anlegen
                </button>
            </ion-nav-buttons>
            <ion-content>
                <ion-list>
                    <ion-item ng-repeat="item in items">
                        <li class="item">
                        <div class="row">
                            <div class="col col-20"><i class="icon {{item.reiseIcon}}" style="font-size: 250%;"></i></div>
                            <div class="col">
                                <div class="row">{{item.reiseZiel}}</div>
                                <div class="row">von {{item.reiseStart}} - {{item.reiseEnde}}</div>
                            </div>
                        </div>
                        <span class="badge badge-assertive">{{item.anzahlWildeTiere}}</span>
                        </li>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-view>
    </script>
    <script id="erzeuge-reise.html" type="text/ng-template">
    <ion-view title="Reise anlegen">
        <ion-content>
            <form ng-submit="createReise(reise)">
                <div class="card">
                    <div class="item item-divider">
                        Neue Reise
                    </div>
                    <div class="item item-text-wrap">
                        <label class="item item-input">
                            <i class="icon ion-android-pin placeholder-icon"></i>
                            <input type="text" placeholder="Reiseziel?" ng-model="reise.reiseZiel">
                        </label>
                    </div>
                    <div class="item item-text-wrap">
                        <label class="item item-input item-select">
                            <div class="input-label">
                              Reisemittel
                            </div>
                            <select ng-model="reise.reiseMittel">
                                <option>Zu Fuß</option>
                                <option selected>Fahrrad</option>
                                <option>Auto/Bus</option>
                                <option>Flugzeug</option>
                                <option>Eisenbahn</option>
                            </select>
                        </label>
                    </div>
                    <div class="item item-text-wrap">
                        <label class="item item-input">
                            <i class="icon ion-calendar placeholder-icon"></i>
                            <input type="text" placeholder="Start:" ng-model="reise.reiseStart">
                        </label>
                        <label class="item item-input">
                            <i class="icon ion-calendar placeholder-icon"></i>
                            <input type="text" placeholder="Ende" ng-model="reise.reiseEnde">
                        </label>
                    </div>            
                    <div class="item item-divider">
                        <div class="padding">
                            <button type="submit" class="button button-block button-positive">Reise anlegen</button>
                        </div>
                    </div>
            </form>
            
    </script>    
    <script id="wildtiere-auswaehlen.html" type="text/ng-template">

    </script>



Controller separieren - neuer Controller für Reise anlegen:

.controller('neueReiseCtrl', function($scope, $state, $ionicPopup, DBService) {
    $scope.items = [];
    
    $scope.createReise = function(reise) {
        console.log("hello reisedaten= "+ reise.reiseMittel);
        switch (reise.reiseMittel) {
            case "Eisenbahn":
                reise.reiseIcon = "ion-android-train";
                break;
            case "Zu Fuß":
                reise.reiseIcon = "ion-android-walk";
                break;
            case "Fahrrad":
                reise.reiseIcon = "ion-android-bicycle";
                break;
            case "Flugzeug":
                reise.reiseIcon = "ion-android-plane";
                break;
            case "Auto/Bus":
                reise.reiseIcon = "ion-android-car";
                break;
            default:
                reise.reiseIcon = "ion-help";
        }
        $neueReise = {            
                "reiseZiel": reise.reiseZiel,
                "reiseMittel": reise.reiseMittel,
                "reiseIcon": reise.reiseIcon,
                "reiseStart": reise.reiseStart,
                "reiseEnde": reise.reiseEnde,
                "anzahlWildeTiere": 0
        };
        $scope.items=$scope.items.concat( $neueReise );
        DBService.saveReise($neueReise);
        $state.go('fotosafari');
    }
})


Html anpassen für zusätzliche Seite mit Wildtiersuche

    <script id="wildtiere-auswaehlen.html" type="text/ng-template">
        <ion-view title="Wildtiere in {{zielland}}" cache-view="false">
            <ion-content>
                
            </ion-content>
    </script>
    
    
    Verzweigung auf Wildtiersuche in Liste einbauen
    (unter ion-list)
        <ion-item ng-repeat="item in items" href="" ng-click="goTierwahl('{{item.reiseZiel}}')">
    
    .state('tiereauswaehlen/:reise', {
        url: "/auswaehlen/:reise",
        templateUrl: "wildtiere-auswaehlen.html",
        controller: "tierwahlCtrl"
    })    
    Funktion in MainCtrl Controller einbauen - Reise objekt übergeben.
    
    $scope.goTierwahl = function(Reise) {
        console.log("Parameter beim Wechseln zu Zielland= " + Reise);
        $state.go('tiereauswaehlen/:reise',{reise:Reise});
    }
    
    tierwahlctrl in controllers einbauen
        .controller('tierwahlCtrl', function($scope, $state, $stateParams, $ionicPopup, DBService) {
    
            console.log("Gewähltes Land: " + $stateParams.reise.reiseZiel);
            $scope.zielland=$stateParams.reise.reiseZiel;
            
        })
    
Search Modul für Ionic

https://github.com/souly1/ion-image-search

Dateien herunterladen.

In index.html einfügen:
    <link href="css/ionImageSearch.css" rel="stylesheet">
    
    <script src="js/ionImageSearch.js"></script>
    <script src="js/ionImageSearch.config.js"></script>
    <script src="js/services.js"></script>

    
Abhängigkeit in app.js einfügen
    angular.module('starter', ['ionic', 'ion-image-search', 'starter.controllers', 'starter.services'])

    
ionImageSearch.js anpassen (Zeile 146) searchterm einfügen:
            $scope.submitSearch = function(searchterm) {
                $scope.displayedImages = [];
                successiveFails = 0;
                imageLoadIndexStart = 1;
                $scope.stopAutoLoad = false;
                currentSearch = searchterm;
                $scope.searching = true;
                $scope.loadMoreImages();
            };
            
Und weiter unten in Z. 191:
                $scope.submitSearch(configuration.searchTerm);
                modalObject.show();
                
Controller.js mit Tierwahl anpassen, daß die Suche automatisch ausgeführt wird anpassen

.controller('tierwahlCtrl', function($scope, $state, $stateParams, $ionicPopup, $webImageSelector, DBService) {
    
    console.log("Gewähltes Land: " + $stateParams.zielland);
    $scope.zielland=$stateParams.zielland;
    console.log("In controllers: wild animals in "+$stateParams.zielland);
        var config = {
          searchProviders: [$webImageSelector.searchProviders.Bing],
          searchTerm: "wild animals in "+$stateParams.zielland
        };
        $webImageSelector.show(config).then(function(image){
          $scope.selectedImage = image;
        });
})

ionImageSearch.config.js anpassen (Api-Keys hinterlegen):
        var googleParams = {
            address: 'https://www.googleapis.com/customsearch/v1?',
            key: 'OmFaTFQ0Nm8yUVV3bG8yMmJjanRYQXA4akQrK1QzTC9kdWl5aGlyS3ZLYmM=',
            customSearch: '',
            pageSize: 10
        };

        var bingParams = {
            address: 'https://api.datamarket.azure.com/Bing/Search/v1/Image?',
            key: '96OxSOzNd6eOLE54BLxuYaYPeyQ+YF7leBv51/kyv2c=',
            auth: 'Basic Oko5aTJOK1lUb2orRjY5d1ZZWnZ1YTBlYXhsSit2cjZkeFRIYW1qbm5CSUk9',
            pageSize: 50
        };


HTML anpassen um Bild anzuzeigen:
    <script id="wildtiere-auswaehlen.html" type="text/ng-template">
        <ion-view title="Wildtiere in {{zielland}}" cache-view="false">
            <ion-content>
            <div><img src="{{selectedImage.url}}" /></div>
            </ion-content>
    </script>

Anzeige aufbereiten mit Controller für das Template - Zähllogik und DB Update einbauen:

.controller('tierwahlCtrl', function($scope, $state, $stateParams, $ionicPopup, $webImageSelector, DBService) {
    
    console.log("Gewähltes Land: " + typeof($stateParams.reise));
    var Reise = JSON.parse($stateParams.reise);
    console.log("Gewähltes Land: " + typeof(reise));
    console.log("reise=" +  Reise.toSource());
    $scope.zielland=Reise.reiseZiel;
    $scope.id=Reise.id;
    $scope.reise=Reise;
    $scope.heute=new Date().toLocaleString();
    $scope.anzahlWildeTiere=Reise.anzahlWildeTiere+1;
    console.log("In controllers: wild animals in "+Reise.reiseZiel+" id "+Reise.id);
        var config = {
          searchProviders: [$webImageSelector.searchProviders.Bing],
          searchTerm: "wild animals "+Reise.reiseZiel
        };
        $webImageSelector.show(config).then(function(image){
          $scope.selectedImage = image;
        });
        
    $scope.updateCount = function (Id,reise)    
    {
        reise.anzahlWildeTiere=reise.anzahlWildeTiere+1;
        DBService.updateReise(reise, reise.id);
        $state.go('fotosafari');
    }

})


HTML anpassen:
    <script id="wildtiere-auswaehlen.html" type="text/ng-template">
        <ion-view title="Wildtiere in {{reise.reiseZiel}}" cache-view="false">
            <ion-content>
                <div class="list card">
                    <div class="item item-avatar">
                        <img src="img/camera-icon.png">
                        <h2>Ausgewähltes Tier</h2>
                        <p>{{heute}}</p>
                    </div>
                    <div class="item item-body">
                        <img class="full-image" src="{{selectedImage.url}}">
                        <p>
                            Wenn Sie dieses Tier gesehen haben, können Sie es jetzt zählen.
                        </p>
                        <p>
                            <button ng-click="updateCount({{id}},{{reise}})"class="button button-full button-positive">
                                Sichtung zählen
                            </button>
                        </p>
                    </div>
                </div>
            </ion-content>
    </script>
    
Reise anlegen Formular säubern:
    <ion-view title="Reise anlegen">
        <ion-content>
            <form ng-submit="createReise(reise)">
                <div class="card">
                    <div class="item item-divider">
                        Neue Reise
                    </div>
                    <div class="item item-text-wrap">
                        <label class="item item-input">
                            <i class="icon ion-android-pin placeholder-icon"></i>
                            <input type="text" placeholder="Reiseziel?" ng-model="reise.reiseZiel">
                        </label>
                    </div>
                    <div class="item item-text-wrap">
                        <label class="item item-input item-select">
                              Reisemittel
                            <select ng-init="reise.reiseMittel = reise.reiseMittel || reisemittel[1]" ng-model="reise.reiseMittel" ng-options="reiseMittel as reiseMittel for reiseMittel in reisemittel" ></select>
                        </label>
                    </div>
                    <div class="item item-text-wrap">
                            <label class="item item-input">
                                    <span class="input-label">Reisebeginn</span>
                                    <i class="icon ion-calendar placeholder-icon"></i>
                                    <input type="date" placeholder="Start:" ng-model="reise.reiseStart">
                            </label>
                            <label class="item item-input">
                                    <span class="input-label">Reiseende</span>
                                    <i class="icon ion-calendar placeholder-icon"></i>
                                    <input type="date" placeholder="Ende" ng-model="reise.reiseEnde">
                            </label>
                    </div>
                    <div class="item item-divider">
                        <div class="padding">
                            <button type="submit" class="button button-block button-positive">Reise anlegen</button>
                        </div>
                    </div>
            </form>
        </ion-content>
    </ion-view>    
    </script>    
    
Und den controller dazu anpassen:

.controller('neueReiseCtrl', function($scope, $state, $ionicPopup, DBService) {
    $scope.items = [];
    $scope.reisemittel = ["Eisenbahn","Zu Fuß","Fahrrad","Flugzeug","Auto/Bus"];
    
    $scope.createReise = function(reise) {
        console.log("hello reise.reiseMittel = "+ reise.reiseMittel + " ohne reise "+$scope.reiseMittel);
        switch (reise.reiseMittel) {
            case "Eisenbahn":
                reise.reiseIcon = "ion-android-train";
                break;
            case "Zu Fuß":
                reise.reiseIcon = "ion-android-walk";
                break;
            case "Fahrrad":
                reise.reiseIcon = "ion-android-bicycle";
                break;
            case "Flugzeug":
                reise.reiseIcon = "ion-android-plane";
                break;
            case "Auto/Bus":
                reise.reiseIcon = "ion-android-car";
                break;
            default:
                reise.reiseIcon = "ion-help";
        }
        console.log("Datum: "+reise.reiseStart);
        $neueReise = {            
                "reiseZiel": reise.reiseZiel,
                "reiseMittel": reise.reiseMittel,
                "reiseIcon": reise.reiseIcon,
                "reiseStart": reise.reiseStart.toLocaleString('DE-de',{weekday: 'short', day: 'numeric', month: 'numeric' ,year: 'numeric'}),
                "reiseEnde": reise.reiseEnde.toLocaleString('DE-de',{weekday: 'short', day: 'numeric', month: 'numeric' ,year: 'numeric'}),
                "anzahlWildeTiere": 0
        };
        $scope.items=$scope.items.concat( $neueReise );
        DBService.saveReise($neueReise);
        $state.go('fotosafari');
    }
})

Keytool - Android Key erstellen
keytool -genkey -v -keystore fotosafari-release-key.keystore -alias fotosafari -keyalg RSA -keysize 2048 -validity 10000