I blogged this because one of my student asked me after workshop:
Is it possible to change to new page without using href in link?
Yes, indeed. We are going to use $state here. 😉
Let’s remind Javascript’s redirect technique
To understand how $state is going to do. I want to tell you that it’s very similar to Javascript’s redirect technique. By provided an URL address. We can take our user to new page as we want.
Below is an example of Javascript’s redirect technique.
<script> window.location = 'http://www.nextflow.in.th'; </script>
How to change app’s page in Ionic framework with $state
First of all, we need to define a name for our state in module as in workshop.
.config(...{
$stateProvider.state('checkout', {
templateUrl: 'views/checkout.html'
});
});
So after that, we can use $state in our controller . With $state.go(‘state name’) , we can bring user to new page (yes, state, in other way).
nextflowModule.controller('HomeController', ['$scope','$state', function($scope,$state){
$scope.goCheckOut = function(){
$state.go('checkout');
}
}])
Passing data to target state via $state.go()
And if you want, we can pass variables to target state via $state.go() as an Javascript Object.
$scope.goCheckOut = function(){
$state.go('checkout',{ checkoutID: 'nextflow109' });
}
Don’t forget to define parameter’s name in your state in .config() .
.config(...{
$stateProvider.state('checkout', {
templateUrl: 'views/checkout.html',
params: [ 'checkoutID' ]
});
});
So we can access state’s parameter via $stateParams as usual.
nextflowModule.controller('CheckoutController', ['$scope','$stateParams', function($scope,$stateParams){
$scope.id = $stateParams.checkoutID;
}])
Hope this post help you create your Ionic application faster.
[sc:Eng-Promo-training-ionic-service ]
Credit – Ionic framework