How to send data from Html File To another one Using angular?

Question

i try sample project which take some data in form in html file .. then pass it to spring service .. which return object successfully .. now i want to pass this object to another Html fie to Display

Form's Html File :

<!DOCTYPE html>
<html ng-app="phase2">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<head>
<title>Sign UP Page</title>
<script src="RigesterationController.js"></script>

</head>
<body >

<center>

<p>Enter Your User Name : <input type="text" , name="UserName" id ="UName"  required /> </p>
<p>Enter Your Email : <input type="text" , name="Email" id ="email" required /> </p>
<p>Enter Your Password : <input type="password" , name="pass" id ="Pass" required/> </p>
<p>Choose Gender : <br> Male<input type="radio" name="gender" value="m" id="Gender" />    Female<input type="radio" name="gender" value="f" id="Gender"/> </p>
<p>Choose User Type :<br>  Student<input type="radio" name="UserType" value="s" id="Utype" />     Teacher<input type="radio" name="UserType" value="t" id="Utype"/> </p>

<div ng-controller="SignUP">
<input type="button" name="signup" value="SignUP" ng-click="save()" />
</div>

</center>
</body>
</html>

RigesterationController.js file :

angular.module("phase2" , [])

.controller("SignUP" , function($scope , $http )
{
 var dat ;
 $scope.save = function() {
  var email= document.getElementById("email").value;
  var UName=document.getElementById("UName").value;
  var Pass=document.getElementById("Pass").value;
  var gender=document.getElementById("Gender").value;
  var UserType=document.getElementById("Utype").value;
  var Info ;
  $http.get('http://localhost:8090/SignUp/'+email+'/'+UName+'/'+Pass+'/'+gender+'/'+UserType)
  .then(function(response)
   {
    Info = response.data;
    dat=Info ;
    alert(dat.name) ;
    window.location.href="http://localhost:8060/TheAngular_Project/StudentPage.html";
   });
  
  }
 
});

second Html file :

<!DOCTYPE html>
<html ng-app="phase2">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="RigesterationController.js"></script>
<head>
<title>Student Page</title>

</head>

<body>
<div ng-controller="SignUP">
<p><span class="name">Welcome  {{dat.name}}</p>
</div>
</body>
</html>

now nothing appeared in dat.name in second html file .. although .. in regestrationController.js ..I test dat.name in an allert and it appeared successfuly .. thanks in advance

Your `dat` needs to be `$scope.dat` not `var dat`. If you are using AngularJS then you need to use `$scope` to bind it to your HTML. — Lotus91, Apr 14 '17 at 15:02
Use the [ng-model directive](https://docs.angularjs.org/api/ng/directive/ngModel) to bind inputs to scope variables. — georgeawg, Apr 14 '17 at 17:25
To preserve values between page views, the app needs to use a router such as [ngRoute](https://docs.angularjs.org/api/ngRoute) or [ui-router](https://github.com/angular-ui/ui-router). Otherwise the entire `$rootScope` and instantiated services are destroyed. — georgeawg, Apr 14 '17 at 17:37
I have done like here http://plnkr.co/edit/VEgt5v9VmeRPU4QIYArF?p=preview .. i think that you mean .. but Does not Work also — Ahmed Hassan, Apr 14 '17 at 17:41

score 0 · Answer 1 · edited May 23 '17 at 11:54

i found the answer by Wawy in this post.. [AngularJS - Passing data between pages

You need to create a service to be able to share data between controllers.

app.factory('myService', function() {
 var savedData = {}
 function set(data) {
   savedData = data;
 }
 function get() {
  return savedData;
 }

 return {
  set: set,
  get: get
 }

});

In your controller A:

myService.set(yourSharedData);

In your controller B:

$scope.desiredLocation = myService.get();

Remember to inject myService in the controllers by passing it as a parameter.

How to send data from Html File To another one Using angular?

1 Answers1