I am working in an angular js demo project where i am using UI Router for routing. In my project there are two views named view1 and view2. For navigation i used tab design so that user can navigate from one view to another. In view1 user needs to insert his email address and password and after clicking submit button i store this information in mysql database by using http service of angular. After that when i clicked view2 it shows all user's email address and password and working fine. But if i return to view1 and register another user and go back to view2 then this new user information is not updated and previous data showed. For showing user information from database i used php.
So what i am thinking is that, at first when we clicked view2 , the page request go to the server and user information show in the view2 after coming from server it turns into plain html. After that when we added new data in mysql database and press view2 the request does not go to server as a result i did not get the newly added user information.
I don't know i am right or wrong but i need to solve this problem. Please help me. How can i find updated data from mysql database.
You can check this problem from here [http://www.iamcreative.comlu.com/angular/][1]
Here is my view1.php Code
<div ng-controller="Controller1">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button ng-click="submitForm();"type="submit" class="btn btn-default">Submit</button>
<div class="form-group">
<label id="user-status"></label>
</div>
</form>
</div>
Here is my view2.php code
<?php
include '../server_side/database_lib/DbHelper.php';
$db=new DbHelper();
$result=$db-> selectAllRow(Constants::$TABLE_USER_INFO,Constants::$USER_INFO_ID, 'DESC');
?>
<div class="container" ng-controller="Controller2">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<?php
foreach($result['data'] as $value)
{
echo "<tr>";
echo "<td>".$value["email"]."</td>" ;
echo "<td>".$value["password"]."</td>" ;
echo "<tr/>";
}
?>
</tbody>
</table>
</div>
</div>
Here is my controller code
angular.module('myApp.controllers', []).controller('MainController',function($rootScope,$scope,$location,$state){
$scope.navigate=function(sub)
{
if(sub=="view1")
{
$state.go('view1');
}
else if(sub=="view2"){
$state.go('view2');
}
}
}).controller('Controller1',function($rootScope,$scope,$location,$state,regService){
$scope.submitForm=function(){
var email= document.getElementById("email").value;
var password= document.getElementById("pwd").value;
if(password!="" && email !="")
{
var data={"email":email,"password":password};
var promise = regService.getRegistration(data);
promise.then(
function success(payload) {
var status = payload.data.status;
if(status==2)
{
document.getElementById("user-status").innerHTML=payload.data.msg;
}
else if(status==0)
{
document.getElementById("user-status").innerHTML=payload.data.msg;
}
else if(status==1)
{
document.getElementById("user-status").innerHTML="Registration Successful";
}
},
function error(errorResponse) {
//alert('Error connecting server'+ errorResponse);
alert("Error")
}
);
}
else{
document.getElementById("user-status").innerHTML="*Please insert all the field";
}
}
}).controller('Controller2',function($rootScope,$scope,$location,$state){
});
and index.html code like this
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="tab-bar">
<ul>
<li><a class="tab" ng-click="navigate('view1');" >View 1</a></li>
<li><a class="tab" ng-click="navigate('view2');" >View 2</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div ui-view ></div>
</div>
</div>
</div>
</section>
Please help me what can i do?
