Stateprovider - states not matched

Hi guys!

I have a small app which i’m using to play around with ionic.

I’m using the stateprovider for navigation, which worked until…i introduced some resolve conditions.

I read countless blogs, stackoverflow threads and ionic formulas to be sure i’m doing it right with async data loading and using services.

No matter what entry of my sidemenu i click, it throws me back to my fallback site. I don’t see any console logs which i included within the resolve condition. But when i remove the resolve, my controller is executed. I think i’m missing something really obviously but it seems i’m blind.

Thanks a lot for your help!

MY CODE:

menuView.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Galleries</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/home">
          Home
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/slider/charts">
          Charts
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/slider/tables">
          Tables
        </ion-item>
		<ion-item nav-clear menu-close href="#/app/list/pdf">
          PDFs
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

app.js

var app = angular.module('ionicDemo', ['ionic', 'demo.controllers', 'demo.directives'])


app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    templateUrl: "templates/views/menuView.html"
  })

  .state('app.home', {
    url: "/home",
    views: {
      'menuContent': {
        templateUrl: "templates/views/homeView.html"
      }
    }
  })
  
  .state('app.slider', {
    url: "/slider/:gallery",
    views: {
      'menuContent': {
        templateUrl: "templates/views/sliderView.html",
		controller: 'sliderController',
		resolve: {
			json: function(JsonService, $stateParams) {
				console.log($stateParams.gallery)
				return JsonService.getJson($stateParams.gallery)
			}	
		}
      }
    }
	
  })
  
  .state('app.list', {
    url: "/list/:gallery",
    views: {
      'menuContent': {
        templateUrl: "templates/views/listView.html",
		controller: 'listController',
		resolve: {
			json: function(JsonService, $stateParams) {
				return JsonService.getJson($stateParams.gallery)
			}	
		}
      }
    }
	
  })
  
  .state('app.pdfListItem', {
    url: "/list/:gallery/pdf/:pdfListItem",
    views: {
      'menuContent': {
        templateUrl: "templates/views/pdfListItemView.html",
		controller: 'pdfListItemController',
		resolve: {
			json: function(JsonService, $stateParams) {
				return JsonService.getJson($stateParams.gallery)
			}	
		}
      }
    }
	
  });
  
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');
});

controller.js

var app = angular.module('demo.controllers', ['pdf', 'demo.services'])


app.controller('sliderController', function($scope, $ionicSlideBoxDelegate, $stateParams, json) {
		
		console.log(json);
		
		$scope.items = json.files.images;
		
		//update slidebox
		$ionicSlideBoxDelegate.update();
				
		//reset slider index to first image
		$ionicSlideBoxDelegate.slide(0);
				
		//refresh current gallery string
		$scope.galleryTitle = $stateParams.gallery;
		
		
	});
	
	
app.controller('listController', function($scope, $stateParams, json) {
		
		
		console.log(json);
		
		//initialize media items container
		$scope.items = json.files;
		
		//refresh current gallery string
		$scope.galleryTitle = $stateParams.gallery;
		
	});
	
	
app.controller('pdfListItemController', function($scope, $stateParams, pdfDelegate, json) {

		
	//set initial range value
	$scope.rangeValue = 0;
	
	//set initial maxCount for range input
	$scope.maxCount = null;
		
	//initialize media item container
	$scope.item = null;	
	

	//loop json data
	$scope.getItem = function() {
	
				var items = json.files;
					
				for (i in items) {
					if(items[i].id == $stateParams.pdfListItem) {
						$scope.item = items[i];
					}
				}
					
	};
	
	
	
	$scope.next = function() {
			pdfDelegate.$getByHandle('pdfContainer').next();
		}
		
		$scope.prev = function() {
			pdfDelegate.$getByHandle('pdfContainer').prev();
		}
		
		$scope.zoomIn = function() {
			pdfDelegate.$getByHandle('pdfContainer').zoomIn();
		}
		
		$scope.zoomOut = function() {
			pdfDelegate.$getByHandle('pdfContainer').zoomOut();
		}
		
		$scope.rotate = function() {
			pdfDelegate.$getByHandle('pdfContainer').rotate();
		}
		
		$scope.getPageCount = function() {
			pdfDelegate.$getByHandle('pdfContainer').getPageCount();
		}
		
		$scope.getCurrentPage = function() {
			pdfDelegate.$getByHandle('pdfContainer').getCurrentPage();
		}
		
		
	$scope.getItem();
	
	$scope.maxCount = $scope.getPageCount();
		
		
	//refresh current gallery string
	$scope.galleryTitle = $stateParams.gallery + " - " + $stateParams.pdfListItem;
		
	});

services.js

var app = angular.module('demo.services', [])

//json loader service
app.factory('JsonService', function($http, q$) {
	
	return {
		getJson: function(gallery) {
			var deferred = q$.defer();
			
			$http.get('img/' + gallery + '/' + gallery + '.json').success(function(data) {
				deferred.resolve(data)
			})
			.error(function(data) {
				deferred.reject(data)
			});
			
			console.log(deferred.promise);
			
			return deferred.promise;
		}
	}
	
});

OK i got it!

I accidentally wrote “q$” instead of “$q”! Shame one me :wink:

1 Like