How to navigate to other page after a pop up confirmation ionic

Question

I'm trying to create a login page in ionic for mobile app where after the user enter some ID and password, it will navigate to another page. I try to use the state.go and location.path but it doesn't work. Here's the code:

    angular.module('app.controllers', ['ionic','ui.router'])
    .controller('loginCtrl', function($scope, $ionicPopup, $state) {
    $scope.data ={};
    $scope.submitData = function(){

    if($scope.data.email && $scope.data.password){
        var alertPopup = $ionicPopup.alert({
            title: "Login Succesful",
            template: "Welcome Back "
        });
        $state.go('stateHome');
    }else{

        var alertPopup = $ionicPopup.alert({
            title: "Login Failed",
            template: "Please check your credentials"
        });
    }
    }
    })
    app.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('stateHome', {
        url: '/Home',
        views: {
        'Home' :{
        templateUrl : "templates/Home.html",
        controller : 'HomeCtrl'

        }
        }
    });

      $urlRouterProvider.otherwise('/Setting');


    })

My app.js contain :

    angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])

    .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.styleDefault();
    }
    });
    })

any idea how to solve this?

Answer 1

Try modifying your files as follows. It should work. I can elaborate if you find it confusing.

app.js

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
        // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

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

    $stateProvider

    .state('stateHome', {
        url: '/Home',
        templateUrl: 'templates/Home.html',
        controller: 'HomeCtrl'
    })

$urlRouterProvider.otherwise('/Setting');
})

controllers.js

angular.module('app.controllers', [])

.controller('loginCtrl', function($scope, $ionicPopup, $state, $location) {

    $scope.data ={};
    $scope.submitData = function(){

    $scope.goToHomePage = function () {
        $location.path("/Home");
    };

      if($scope.data.email && $scope.data.password){
         var alertPopup = $ionicPopup.alert({
            title: "Login Succesful",
            template: "Welcome Back "
         });    
         alertPopup.then(function(res) {
            if(res) {
               $scope.goToHomePage();
             } else {
               console.log('Do something else');
             }
          });

      }else{

           var alertPopup = $ionicPopup.alert({
              title: "Login Failed",
              template: "Please check your credentials"
          });
        }
      }
   })