Add custom route and controller to favorites view

prevostc · Mar 2, 2015 · 058d87e · 058d87e
1 parent 4566ac1
commit 058d87e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 24 deletions.
diff --git a/www/js/app.js b/www/js/app.js
@@ -41,23 +41,13 @@
                 })
 
                 // Each tab has its own nav history stack:
-
                 .state('tab.map', {
-                    url: '/map{map:(?:/[^/]+)?}',
+                    url: '/map',
                     views: {
                         'tab-map': {
                             templateUrl: 'templates/tab-map.html',
                             controller: 'MapCtrl'
                         }
-                    },
-                    resolve: {
-                        mapData: function ($stateParams, Favorites) {
-                            var mapId = parseInt($stateParams.map.substring(1));
-                            if (isNaN(mapId)) {
-                                return null;
-                            }
-                            return Favorites.fetchById(mapId);
-                        }
                     }
                 })
 
@@ -79,7 +69,28 @@
                             controller: 'FavoritesCtrl'
                         }
                     }
-                });
+                })
+
+                // Each tab has its own nav history stack:
+                .state('tab.favorites-view', {
+                    url: '/favorites/:mapData',
+                    views: {
+                        'tab-favorites': {
+                            templateUrl: 'templates/tab-favorites-view.html',
+                            controller: 'FavoritesViewCtrl'
+                        }
+                    },
+                    resolve: {
+                        mapData: function ($stateParams, Favorites) {
+                            var mapId = parseInt($stateParams.mapData);
+                            if (isNaN(mapId)) {
+                                return null;
+                            }
+                            return Favorites.fetchById(mapId);
+                        }
+                    }
+                })
+            ;
 
             // if none of the above states are matched, use this as the fallback
             $urlRouterProvider.otherwise('/tab/map');

diff --git a/www/js/controllers.js b/www/js/controllers.js
@@ -16,17 +16,7 @@
 
     angular.module('starter.controllers', [])
 
-        .controller('MapCtrl', function ($scope, mapData, $ionicPlatform, Settings, Favorites, Image, Faker, Id) {
-
-            var highDefUi;
-
-            $scope.$on('$ionicView.enter', function(event, data) {
-                // if we want to see a starred item
-                if (mapData) {
-                    $scope.mapData = mapData;
-                    $scope.starred = true;
-                }
-            });
+        .controller('MapCtrl', function ($scope, $ionicPlatform, Settings, Favorites, Image, Faker, Id) {
 
             $scope.generate = function () {
                 // generate map tiles
@@ -187,6 +177,9 @@
                 }
             };
         })
+        .controller('FavoritesViewCtrl', function ($scope, mapData) {
+            $scope.mapData = mapData;
+        })
     ;
 
 

diff --git a/www/templates/tab-favorites-view.html b/www/templates/tab-favorites-view.html
@@ -0,0 +1,7 @@
+<ion-view view-title="{{mapData.name}}" ng-init="init()">
+    <ion-content class="padding" scroll="false">
+        <div class="canvas-container">
+            <map map-data="mapData"></map>
+        </div>
+    </ion-content>
+</ion-view>
diff --git a/www/templates/tab-favorites.html b/www/templates/tab-favorites.html
@@ -9,7 +9,7 @@
         <ion-list>
             <ion-item ng-repeat="item in items"
                   class="item-thumbnail-left"
-                  href="#/tab/map/{{item.id}}">
+                  href="#/tab/favorites/{{item.id}}">
                 <img ng-src="{{item.thumbnailImageUri}}">
                 <h2>{{item.name}}</h2>
                 <p>{{item.catchPhrase}}</p>