i'm having this problem: I have this routing schema for my Ionic app
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.plazas', {
url: '/plazas',
views: {
'tab-plazas': {
templateUrl: 'templates/tab-plazas.html',
controller: 'PlazasCtrl'
}
}
})
.state('tab.plaza-detalle', {
url: '/plazas/:plazaId',
views: {
'tab-plazas': {
templateUrl: 'templates/plaza-detalle.html',
controller: 'PlazaDetalleCtrl'
}
}
})
.state('tab.plaza-diagrama', {
url: '/plazas/diagramaPlaza/:plazaId',
views: {
'tab-plazas': {
templateUrl: 'templates/diagrama.html',
controller: 'DiagramaCtrl'
}
}
});
and i want to go to /plazas/diagramaPlaza/:plazaId from inside of plazas/:plazaId, however when i try to do that the app becomes blank, when i test the app at the desktop it works perfectly but the white screen appears when i build the app and test it with my phone.
Any ideas of what could be the cause of this issue?
Thanks a lot for the help.
I suggest you should first configure an otherwise method for your route-configuration such as
$urlRouterProvider.otherwise('your default view');
How you transist to other views matters, try using
$state.go('tab.plaza-diagrama');
this should fix ya problem.
Related
In Ionic I got a slider in one tab. On click on a slide I want to jump to a subpage on another tab. I achieve that using
$state.go('^.station', {stationId:clickedSlide});
I get to view alright, but there is no back button to the root view (.stationen) of this tab. It seems to clear the entire historyStack of this tab. Even if I try to first jump to .stationen first and then to .station I do not get a back button.
My stateProvider looks like so:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapController'
}
}
})
.state('tab.stationen', {
url: '/stationen',
views: {
'tab-stationen': {
templateUrl: 'templates/tab-stationen.html',
controller: 'StationenCtrl'
}
}
})
.state('tab.station', {
url: '/stationen/:stationId',
views: {
'tab-stationen': {
templateUrl: 'templates/tab-station.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/map');
});
I tried setting options in my $state.go() call but to no avail. Also nesting the .station in .stationen did not get me any results. What am I missing?
Decently new to Angular, trying to figure out the correct way to use $stateProvider.
here is my current setup
$stateProvider
.state('users_orders', {
url: '/users/:userId/orders',
templateUrl: '/assets/orders/users/index.html',
controller: 'UserOrdersController'
})
.state('users_orders_edit', {
url: '/users/:userId/orders/:orderId/edit',
templateUrl: '/assets/orders/users/edit.html',
controller: 'UserOrderController'
})
}])
This setup works fine, but what i would like to do is something like this.
$stateProvider
.state('users_orders', {
url: '/users/:userId/orders',
templateUrl: '/assets/orders/users/index.html',
controller: 'UserOrdersController'
})
.state('users_orders.edit', {
url: '/:orderId/edit',
views: {
edit: {
templateUrl: '/assets/orders/users/edit.html',
controller: 'UserOrderController'
}
}
})
}])
This setup doesnt work though, when i click on my edit link it changes the url, but stays on the same page. Am I doing the setup wrong?
In order to make the second solution work you should have in index.html a
<div ui-view="edit"></div>
hi im trying to get an example app up and running and I cannot get it to load the view.. here is the complete app.js however i think the error is within the resolve object... any help or guidance would be apprieciated... thanks for looking
here is the github link for the project....
i will change api key after this issue is solved
https://github.com/ChrisG000/stamplayEbayClassified
angular.module('starter', ['ionic', 'starter.controllers','starter.services', 'starter.templatesComponent', 'ngCordova'])
.run(function($ionicPlatform, $cordovaStatusbar) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
$cordovaStatusbar.styleColor('white');
//StatusBar.styleDefault();
}
});
})
.constant('APPID', '')
.constant('APIKEY','')
.constant('BASEURL', '')
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
abstract: true,
templateUrl: "templates/tabs.html",
resolve: {
category: function (Category) {
return Category.getPromise();
},
areas : function(Area){
return Area.getPromise();
},
items : function(Item){
return Item.getPromise();
}
},
})
// Each tab has its own nav history stack:
.state('tab.item', {
url: '/item',
views: {
'tab-item': {
templateUrl: 'templates/tab-item.html',
controller: 'FindCtrl'
}
},
})
.state('tab.item-view', {
url: '/item/:itemId',
views: {
'tab-item': {
templateUrl: 'templates/item-view.html',
controller: 'ItemCtrl'
}
}
})
.state('tab.publish', {
url: '/publish',
views: {
'tab-publish': {
templateUrl: 'templates/tab-publish.html',
controller: 'PublishCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('tab.login', {
url: '/settings/login',
views: {
'tab-settings': {
templateUrl: 'templates/login-view.html',
controller: 'LoginCtrl'
}
}
})
.state('tab.signup', {
url: '/settings/signup',
views: {
'tab-settings': {
templateUrl: 'templates/signup-view.html',
controller: 'LoginCtrl'
}
}
})
.state('tab.contact', {
url: '/settings/contact',
views: {
'tab-settings': {
templateUrl: 'templates/contact-view.html',
controller: 'SettingsCtrl'
}
}
})
.state('tab.terms', {
url: '/settings/terms',
views: {
'tab-settings': {
templateUrl: 'templates/terms-view.html',
controller: 'SettingsCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/item');
});
Ok, here's how you would diagnose something like this. First you want to avoid the loop because that makes it really hard to figure out what's going on. Since the problem is happening on your default route, the solution is to temporarily change your default route to something else. Then, you'll go to localhost:8100/#/item manually. In this scenario you'll avoid the loop and you'll be able to look in the Chrome DevTools to see what's happening without having an infinite loop that locks up the DevTools.
First, change your app.js file to include the following simple route:
.state('testing', {
url: '/testing',
template: '<h1>Testing</h1>'
})
Also in app.js (line 143), change your default route to go to our simple route:
$urlRouterProvider.otherwise('/testing');
Now, in your browser, visit http://localhost:8100/#/item directly while you have the DevTools open. Before actually hitting enter, make sure you set the Network and Console tabs configured to "Preserve log" (it is a checkbox). This way, even though you're redirected to /testing because there is an error, you'll actually be able to see the error in the DevTools console.
In your case, the error is a 404 error on the OPTIONS request that is sent to http://localfood.stamplay.com/api/cobject/v0/category. You can read up on CORS and ionic here: http://blog.ionic.io/handling-cors-issues-in-ionic/
Additionally, when I try to visit http://localfood.stamplay.com/api/cobject/v0/category directly I am greeted with a too many redirects error in my browser, which means that something is not configured correctly on the api server. The server should respond with some kind of error at /error but instead it keeps redirecting to itself.
Bottom line, it looks like a server configuration issue.
Edit: When using the updated url http://localfood.stamplayapp.com/api/cobject/v0/category I get a 403 Forbidden so my guess is that OP changed the api key after posting this but that this did resolve his issue.
after I did the update to angular 1.3 I'm not able to reach the controllers and views, they simply doesn't load.
the states in my root works perfectly, this is my app.js
$stateProvider.state("root",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('root.home', {
url: '/index',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
}
}
).state('root.welcome', {
url: '/index/:status',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
}
});
an also my configuration:
$urlRouterProvider.otherwise('index');
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode({ enabled: false });
by after doing a stage.go or just by typing the url, I'm not able to reach any route in these states:
$stateProvider.state("candidate",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html"
},
'header#': {
templateUrl: "/user/partial/user.header/user.header.html",
},
'sideBar#': {
templateUrl: '/user/partial/user.sidebar/user.sidebar.html',
controller: 'SidebarCtrl',
resolve: {
user: 'currentUser'
}
},
'navBar#': {
templateUrl: '/user/partial/navbar/navbar.html'
}
}
}).state('candidate.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/user/partial/user.dashboard/user.dashboard.html',
controller: 'DashboardCtrl',
resolve: {
dashboardinfo: function ($resource, tracker) {
var resourceGet = $resource('/user/dashboard');
var promise = resourceGet.get().$promise;
tracker.addPromise(promise);
return promise;
}
}
}
}
})
I've spent a couple of hours trying to figure this out without any luck, maybe it's just a small detail I'm missing, any advice will be more than welcome.
PS: I'm using v0.2.12-pre1
I tried to replicate the issue, mentioned above in this working plunker. All the code is almost unchanged, I just used a custom version of UI-Router. The reason is this reported and known bug:
Impossible to disable html5Mode with angular 1.3.0-rc.3 #1397 (small cite:)
Due to: angular/angular.js#dc3de7f
the html5mode-check in urlRouter.js [line 383] is no longer correct. And thus it's impossible to disable html5mode.
A quick fix could be:
var isHtml5 = $locationProvider.html5Mode();
if (angular.isObject(isHtml5)) {
isHtml5 = isHtml5.enabled;
}
And this (the code above) is the change I made. Nothing else. All the code started to work then...
Check also this answer
ui-router not producing correct href attribute in angular
for a Chris T link to fixed version...
it turns out that the resolve method was failing, I'm using angular promise tracker
var resourceGet = $resource('/user/dashboard');
var promise = resourceGet.get().$promise;
tracker.addPromise(promise); <-- fails here
return promise;
it seems like resources and promises have breaking changes and my implementation could be deprecated.
I try to make this Plunker to work, spent more then 5 hours, posting here was a last resort.
app.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
// the pet tab has its own child nav-view and history
.state('tab.pet-index', {
url: '/pets',
views: {
'pets-tab': {
templateUrl: 'pet-index.html',
controller: 'PetIndexCtrl'
}
}
})
.state('tab.pet-detail', {
url: '/pet/:petId',
views: {
'pets-tab': {
templateUrl: 'pet-detail.html',
controller: 'PetDetailCtrl'
}
}
});
console.log('app load ...');
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/pets');
});
Here I call $urlRouterProvider.otherwise('/tab/pets')
But I fail to get controller:
app.controller('PetIndexCtrl', function($scope, PetService) {
console.log('PetIndexCtrl load ...');
$scope.pets = PetService.all();
});
What I do wrong here? please help,
Thanks,
It seems to come down to the ion- prefix missing in several places.
When I change nav-view to ion-nav-view, tabs to ion-tabs etc, things seems to work.
plunkr