In the code below, I am setting up a login process. The PHP file for this process is working correctly, but after successful login, the view does not change as expected:
(function (){
var app = angular.module('starter', ['ionic']);
var app2 = angular.module('nuevo', []);
app.controller('controller', function($scope, $http, $state) {
$scope.registrar = function(){
$http.post("http://127.0.0.1:8080/php/Conexion.php",{
correo:$scope.mail, pass:$scope.word,
}).success(function(data){
alert("SESSION STARTED")
$state.go('main');
});
}
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/main.html',
controller: 'controller',
})
$urlRouterProvider.otherwise('/index.html');
});
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<div class=" col text-center">
<h3 >Taxi App</h3>
</div>
</ion-header-bar>
<div ng-controller="controller">
<img class="indexImg" src="img/saludoIndex.jpg">
<br><br>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-at placeholder-icon"></i>
<input type="text" placeholder="Email Address" ng-model="mail">
</label>
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-locked placeholder-icon"></i>
<input type="password" placeholder="Password" ng-model="word">
</label><br>
</div>
<div class="col text-center">
<br><h4><a>Forgot your password?</a></h4><br><br><br><br><br>
<a class="button button-stable button-large" href="templates/Register.html">
<b>Create a Free Account</b></a>
</div>
<ion-footer-bar class="bar-positive tabs">
<a class="tab-item">
<h4 style="color:white;" ng-click="registrar()">LOG IN</h4>
</a>
</ion-footer-bar>
</div>
</ion-pane>
</body>
</html>
The network log displays the page's information (simple test data), while the main.html contains simple testing data to check if the changes are applied, however, it does not load on the application screen.
https://i.sstatic.net/xU1Kk.jpg
https://i.sstatic.net/1VpeY.jpg
I would appreciate any help with this issue. Thank you!