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;
}
}
});