define some views

client/ionic.project

@@ -1,4 +1,12 @@
 {
   "name": "client",
-  "app_id": ""
+  "app_id": "",
+  "gulpStartupTasks": [
+    "sass",
+    "watch"
+  ],
+  "watchPatterns": [
+    "www/**/*",
+    "!www/lib/**/*"
+  ]
 }

client/www/index.html

@@ -5,12 +5,9 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <title></title>
 
-    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
-    <link href="css/style.css" rel="stylesheet">
 
-    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
+    <!-- compiled css output -->
     <link href="css/ionic.app.css" rel="stylesheet">
-    -->
 
     <!-- ionic/angularjs js -->
     <script src="lib/ionic/js/ionic.bundle.js"></script>

client/www/js/app.js

@@ -12,6 +12,7 @@ angular.module('starter', ['ionic', 'starter.controllers', 'angularMoment'])
   timezone: 'Europe/Paris' // optional
 })
 
+// register work which should be performed when the injector is done loading all modules
 .run(function($ionicPlatform, amMoment) {
   amMoment.changeLocale('fr');
   $ionicPlatform.ready(function() {
@@ -55,7 +56,28 @@ angular.module('starter', ['ionic', 'starter.controllers', 'angularMoment'])
         controller: 'ParcoursCtrl'
       }
     }
+  })
+
+  .state('app.search', {
+     url: "/search",
+     views: {
+       'menuContent': {
+         templateUrl: "templates/search.html",
+         controller: 'SearchCtrl'
+       }
+     }
+   })
+
+  .state('app.apropos', {
+    url: "/apropos",
+    views: {
+      'menuContent': {
+        templateUrl: "templates/apropos.html",
+        controller: 'AproposCtrl'
+      }
+    }
   });
+
   // if none of the above states are matched, use this as the fallback
   $urlRouterProvider.otherwise('/app/carte');
 });

client/www/js/controllers.js

@@ -1,9 +1,14 @@
 angular.module('starter.controllers', ['LocalForageModule', 'angularMoment'])
-.factory('Carte', function(){
-    return { carte: [],
+.factory('Carte', function($localForage){
+  return {
+    carte: [],
     empty: function(){
       this.carte.length = 0;
-    }};
+    },
+    get: function(item) {
+      return $localForage.getItem(item);
+    }
+  };
 })
 .constant('angularMomentConfig', {
    preprocess: 'unix', // optional
@@ -97,28 +102,28 @@ angular.module('starter.controllers', ['LocalForageModule', 'angularMoment'])
 
     var remote = 'http://www.corsproxy.com/polypodes.github.io/LupianusProtoClient/fake/data.json';
     $http.get(remote).
-        success(function(data, status, headers, config) {
-          $localForage.clear();
-          Carte.empty();
-          console.log('Carte is now empty:', Carte.carte);
-          var carte = [];
-          for(var key in data.carte){
-            carte.push($localForage.setItem(key, data.carte[key]));
-          }
-          $q.all(carte).then(function(responses){
-            console.log(responses);
-            console.log('Remote sync OK');
-            responses.forEach(function(parcours){
-              Carte.carte.push(parcours);
-            })
+      success(function(data, status, headers, config) {
+        $localForage.clear();
+        Carte.empty();
+        console.log('Carte is now empty:', Carte.carte);
+        var carte = [];
+        for(var key in data.carte){
+          carte.push($localForage.setItem(key, data.carte[key]));
+        }
+        $q.all(carte).then(function(responses){
+          console.log(responses);
+          console.log('Remote sync OK');
+          responses.forEach(function(parcours){
+            Carte.carte.push(parcours);
+          })
 
-          });
-        }).
-        error(function(data, status, headers, config) {
-          console.log('remote error', [data, status, headers, config]);
-          // called asynchronously if an error occurs
-          // or server returns response with an error status.
         });
+      }).
+      error(function(data, status, headers, config) {
+        console.log('remote error', [data, status, headers, config]);
+        // called asynchronously if an error occurs
+        // or server returns response with an error status.
+      });
 
     var newSync = new Date();
     $localForage.setItem('lastSync', newSync).then(function() {
@@ -152,15 +157,24 @@ angular.module('starter.controllers', ['LocalForageModule', 'angularMoment'])
   }, function() {
     console.log('Iteration has completed', $scope.carte);
   });
-
 }])
 
-.controller('ParcoursCtrl', function($scope, $stateParams) {
-  $scope.parcours =
-  {
-    title: 'Parcours 1',
-    id: 1,
-    fullSrc: 'http://lorempixel.com/540/304/',
-    text: "This is a \"Facebook\" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer."
-  };
-});
+.controller('ParcoursCtrl', function($scope, $localForage, $stateParams, Carte) {
+
+  var itemName = 'parcours' + $stateParams.parcoursId;
+  Carte.get(itemName).then(function(data) {
+    $scope.parcours = {
+      title: data.title,
+      id: data.id,
+      fullSrc: data.src
+    };
+  });
+})
+
+.controller('SearchCtrl', function($scope) {
+  console.log('search controller loaded');
+})
+
+.controller('AproposCtrl', function($scope) {
+  console.log('AproposCtrl controller loaded');
+});

client/www/templates/apropos.html

@@ -0,0 +1,5 @@
+<ion-view view-title="Apropos">
+  <ion-content>
+    <h1>A propos</h1>
+  </ion-content>
+</ion-view>