how to use state.go in ionic?

Question

I'm developing an app and after the login the should redirects the user from the login page to the homepage, I'm doing the login through an API file on the server (in this moment the localhost) with http.post method and if the login is correct the server return the string "T" then in my app I control if the string is equal to "T" and if it is equals the app should redirects the user to the homepage.

I've only one problem, which is proper use of the function state.go(); because I don't see any errors in the console but the page doesn't change but the url (I'm testing with ionic serve) change in exactly way.

This is my code:

APP.JS:

    angular.module('starter', ['ionic', 'ui.router'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})


.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('login', {
    url: '/',
    //abstract : true, // Because your are have child-states under de 'splash' state, you should set it abstract : true;
    templateUrl: '/login.html',
    controller: "LoginCtrl"
  })

    .state('main', {
        url: "main.html",
        templateUrl: "/main.html",
    })
}])


.controller('LoginCtrl', function($scope, $http, $state, $ionicHistory) {
    $scope.data = {};
    $scope.data.funzione = "login";
    $scope.submit = function(){
        //console.clear();
        console.log("Dentro funzione");
        console.log($scope.data.funzione);
        var link = 'http://localhost/<path>/api.php';
        $http.post(link, {mail : $scope.data.mail}, {pwd : $scope.data.pwd}, {funzione : $scope.data.funzione})
            .then(function (res){
                console.log("Dentro http.post");
                $scope.response = res.data;
                console.log($scope.response);
                if ($scope.response != "F"){
                    console.log("Dentro if");
                    $state.go('main');
                } else {
                    console.log("Dentro else");
                }
            });
    };
});

THIS IS MY FOLDER: (www)

AND THIS IS THE URL AFTER STATE.GO():

http://localhost:8100/login.html#/main.html

But it should be:

http://localhost:8100/main.html

angular automatically parses the response to json. So sending `T` or `F` dosen't makes any sense. Send some json object and then read the response at client end. Your console must be printing `Dentro else`. — Atul Sharma, Nov 24 '16 at 08:50
yes but with " != 'F' " is always true (was a test for doing state.go)@atulquest93 — Edoardo, Nov 24 '16 at 08:53
Where you inject your `maincontroller` in your main state config section? — Ramesh Rajendran, Nov 24 '16 at 08:54
@RameshRajendran No need for `maincontroller` as it's not the one handling the login — Slartibartfast, Nov 24 '16 at 08:55
Is you console printing `Dentro if` ? If yes then `$state.go('main');` must work. Its the standard way to change state. — Atul Sharma, Nov 24 '16 at 08:58
@User528491 See, because he using login screen as main(master) screen , So every URL having the `login.html#/..` — Ramesh Rajendran, Nov 24 '16 at 08:58

Slartibartfast · Answer 1 · 2016-11-24T09:06:33.970

Ionic uses ui-router. You make a correct use with: $state.go('main');

This will only work if the condition you check for is true. What do the console.log() statements print?

********* UPDATED with fallback state **********

Also, define a fallback state: You define the url and templateUrl incorrectly. The url should be the address of the state you see in address bar, the templateUrl is the HTML file that should be displayed on hitting that url.

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('login', {
      url: '/login',
      //abstract : true, // Because your are have child-states under de 'splash' state, you should set it abstract : true;
      templateUrl: 'login.html',
      controller: "LoginCtrl"
    })
    .state('main', {
      url: "/main",
      templateUrl: "main.html",
    });

  $urlRouterProvider.otherwise('/login');
}])

Updated for simplicity, avoiding anything fancy now – Slartibartfast Nov 24 '16 at 09:06 — Slartibartfast, Nov 24 '16 at 09:06

score 0 · Answer 2 · answered Nov 24 '16 at 09:12

AND THIS IS THE URL AFTER STATE.GO():

http://localhost:8100/login.html#/main.html

But it should be:

http://localhost:8100/main.html

Answer:-

Actually what am understand from your question is, You have a login screen separately and once you login completed then it will be go to main screen. You have used ng-view in login.html page instead of your main.html page. So now your login.html is a master page, that's why you getting that URL structure.

okay let's do. kindly checkout the flowing details,

did you call your all scripts in login.html?
and please check which one is your master page?

my master page is index.html that call (window.location) the login page — Edoardo, Nov 24 '16 at 09:16

how to use state.go in ionic?

2 Answers2