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

Answer 1

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');
}])

Answer 2

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?