Sondes Sondes - 4 months ago 14
AngularJS Question

AngularJS change location is not working

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

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>

Comments