AngularJS change location is not working

Question

I'm new in ionic I'm trying to do a simple switch between two views in a login app:

index.html

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Login App</h1>
  </ion-header-bar>
  <ion-content>

            <div class="list list-inset">
                <label class="item item-input">
                  <input type="text" placeholder="Email" ng-model="data.email">
                </label>
                <label class="item item-input">
                  <input type="password" placeholder="Password" ng-model="data.password">
                </label>
            </div>
            <button class="button button-block button-calm" ng-click="postLogin()">Login</button>

  </ion-content>
</ion-pane>

logincontroller.js

app.controller('loginCtrl', function ($scope,$http,$location) {

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

    var data = 
    {
            email: $scope.data.email,
            password: $scope.data.password
    };

   console.log('bonjour');
    $http.post("http://localhost/authproject/public/api/auth/login", data)
    .then(
       function(response){
         // success callback
        console.log('success');
         $location.path('/map');


       }, 
       function(response){
         // failure callback

         console.log('error');
  $location.path('/index');

       }
    );



}

When I click on a button Login the url change but the page doesn't change

Could someone tell me how do I solve this ? Thanks in advance :)

Answer 1

In your app.js add a state for map like this (with your own templateUrl and controller value). Make sure to add $stateProvider in the config(). Also, include ui.router to your dependencies. Something like this:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives', 'ui.router'])
    .config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider){

    $stateProvider
       .state('map', {
        url: '/map',
        templateUrl: 'app/views/map.html',
        controller: 'MapController'
     });
...

And in your index.html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

Answer 2

Try this

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

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

    var data = 
    {
            email: $scope.data.email,
            password: $scope.data.password
    };

   console.log('bonjour');
    $http.post("http://localhost/authproject/public/api/auth/login", data)
    .then(
       function(response){
         // success callback
        console.log('success');
         $location.path('/map');


       }, 
       function(response){
         // failure callback

         console.log('error');
      $state.go('main');

       });
})

Add a state in app.js

.config(function($stateProvider,$urlRouterProvider){
      .state('main', {
       url:'/main',
       templateUrl:'templates/main.html',
       controller:'yourCtrl'
     })

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

Now make in template folder make a page for named main.html