So I'm using Ionic for this new project, and needs a little support in routing (angular n00b).
I have these states :
$stateProvider.state('map', {
url: '/map',
views: {
map: {
templateUrl: 'views/map.html',
controller: 'mapCtrl'
}
}
})
.state('help', {
url: '/help',
views: {
help: {
templateUrl: 'views/help.html'
}
}
})
.state('setname', {
url: '/setname',
views: {
setname: {
templateUrl: 'views/setname.html',
controller: 'setNameCtrl'
}
}
})
And I would like the user to be redirected to "setname" whenever he's trying to reach another page while "myName" is empty (in the future I will do something similar to check if the user is logged in before allowing access to the app).
Here is the current HTML, not sure about this at all...
<ion-tabs class="tabs-positive">
<ion-tab icon="ion-home" ui-sref="map">
<ion-nav-view name="map"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-help" ui-sref="help">
<ion-nav-view name="help"></ion-nav-view>
</ion-tab>
</ion-tabs>
Please help about this, I would appreciate it a lot.
Second question, still on routing and showing content : the base of my application will be the map. I would like the user to be able to reach it anytime very fast, so I would want it to stay available all the time in the background when displaying another page (let's say help). So whenever the user clicks a given button, it just takes him back to the map, and doesn't have to load it again. How would you advice me to do that ? I thought of using "popover" property of Ionic, but I'm not sure if it's the right way : http://ionicframework.com/docs/api/service/$ionicPopover/
Thank you very much !
for your first question you should use $state.go, for example:
.controller('testCtrl', function($scope, $state) {
$scope.data = {};
$scope.save = function(){
if ($scope.data.Name == ""){
$state.go("setname");
}
})
You could include a Service, which checks in every controller, if the myName property is true/false. like:
Service.checkMyName($scope).then(function(response){
if(!response){
$location.path("/yourPath");
}
});
A second approach: The maybe bad way, but in my opinion way smoother is, to inject the myName property into the rootScope. So you can check on every site:
if(!$rootScope.myName){ $location.path("/yourPath");
Now the user is redirected to the page "yourPath" if the value myName is not specified.
Your second question: You should look at the http cache option: The http request get executed only once. The data is cached so you the user can see it without flickering.
Hope it helps.