javascript - Ionic (AngularJS) - redirect user and routing - Stack Overflow

admin管理员组

文章数量:1295901

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 : /$ionicPopover/

Thank you very much !

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./docs/api/service/$ionicPopover/

Thank you very much !

• javascript
• angularjs
• cordova
• ionic-framework
• angularjs-routing

Share Follow edited Nov 18, 2014 at 22:11 Jeremy Belolo asked Nov 18, 2014 at 21:44 Jeremy BeloloJeremy Belolo 4,54166 gold badges5050 silver badges104104 bronze badges 4

• 1 Ah I know why "ion navview is null". your html is messed up. take a look at this video: learn.ionicframework./videos/ion-tabs-directive. There is always ONLY one nav-view. You got 2. You need only one. Work with templates. It´s all getting explained in this video. Good look developing – m1crdy Commented Nov 20, 2014 at 16:21
• OR start your project from an ionic template from your cli. Like the tabbed template. – m1crdy Commented Nov 20, 2014 at 16:32
• 1 This is from the template ^^ – Jeremy Belolo Commented Nov 21, 2014 at 12:21
• Looks like they changed their kind of nav-view... crazy. – m1crdy Commented Nov 21, 2014 at 12:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

本文标签： javascriptIonic (AngularJS)redirect user and routingStack Overflow