How to send form data from one page to another page using angularjs

Question

Can any on help me to send the data from one page to another page using AngularJS.

Service code

var module = angular.module('app', []);
module.service('ContactService', function () {
var uid = 1;
var contacts = [{
    id: 0,
        'fname': 'Supriya',
        'mobile': '8985335701',
        'mail': 'hello@gmail.com',
        'age': '20',
        'gender' : 'female'
}];
this.save = function (contact) {
    if (contact.id == null) {
        contact.id = uid++;
        contacts.push(contact);
    } else {
        for (i in contacts) {
            if (contacts[i].id == contact.id) 
                {
                contacts[i] = contact;
            }
        }
    }
}
this.list = function () {
    return contacts;
}
});

Controller code:

 module.controller('ContactController', function ($scope, ContactService) {
$scope.contacts = ContactService.list();
$scope.saveContact = function () {
    ContactService.save($scope.newcontact);
    $scope.newcontact = {};
}
})

Html page:

 <body>
<div ng-app="app" ng-controller="ContactController">
<form>
<label>Full Name:</label>
<input type="text" ng-model="newcontact.fname"><br>
<label>Mobile Number:</label>
<input type="text" ng-model="newcontact.mobile"> </br>
<label> E-Mail:</label>
<input type="email" ng-model="newcontact.mail"> </br>
<label> Age:</label>
<input type="text" ng-model="newcontact.age"> </br>
<label> Gender: </label>
<input type="radio" ng-model="newcontact.gender" value="male">Male
<input type="radio" ng-model="newcontact.gender" value="female">Female
<input type="hidden" ng-model="newcontact.id" />
<br>
<input type="button" value="Save" ng-click="saveContact()" />
<table border=1px>
<thead> 
<tr>
<th>Full Name</th>
<th>Mobile Number</th>
<th>Email</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{ contact.fname }}</td>
<td>{{ contact.mobile }}</td>
<td>{{ contact.mail }}</td>
<td>{{ contact.age }}</td>
<td>{{ contact.gender }}</td>
</tr>
</tbody>
</table>    
</div>
</body>

On click of save button the details which are entered in the form should be send to another page called index.html.

check this link : http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js — Ubiquitous Developers, Dec 14 '15 at 09:50
@Supriya, Do you want to pass data between two html page or two partial pages with in a same main page? — Abhilash Augustine, Dec 14 '15 at 10:11
@abhilash I want to pass data between 2 html pages not in the same mail page. — Supriya Rapelli, Dec 14 '15 at 10:12
If you want to send form data across pages, use back-end code to help. If on a single page, angular service/factory is there for you. — Joy, Dec 14 '15 at 10:16
@SupriyaRapelli, I think you are in the wrong direction. Angular (or any other client side scripts) can only save data when the page is loaded and remove all data when the page redirects or just reloaded. — Abhilash Augustine, Dec 14 '15 at 10:18
Back end code means, should I use any local storage like SQL. — Supriya Rapelli, Dec 14 '15 at 10:19
@SupriyaRapelli, But you can save data using local storage of browser. I mean you can use `cookie` or any other local storage options to achieve your current need. — Abhilash Augustine, Dec 14 '15 at 10:20
@SupriyaRapelli, You can use angularJs all features in a Single Page Application (SPA). I suggest you to change your architecture to SPA if possible. — Abhilash Augustine, Dec 14 '15 at 10:23

score 1 · Answer 1 · answered Nov 22 '16 at 18:06

You're in the right direction by using a service. That's how you persist and pass data between controllers.

It seems like you need to bind out to make your function accessible to a controller. By binding out I mean, in your controller, you need to create a function that brings a service's functions in. Seems redundant but it's one of the most annoying things about Angular 1.X So try:

this.save = save;

and

this.list = list;

in your service codeblock, after you've defined the functions in your service, then they will be accessible to your controller.

See this in action in my code under "//public functions" https://github.com/usrrname/shopapp/blob/master/app/site/services/products.srv.js

Hope that helps. I'm so new to frameworks as well.

How to send form data from one page to another page using angularjs

1 Answers1