How to preserve entered data of page 1 after navigating from page 2 in AngularJS
I have three routing pages. If I entered some data and got some result on the first page, I went to the second page and finally returned from the second page to the first page. Then I want to see the data I entered earlier and the result. Here's a code snippet
index.html
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container"></div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
Billing index :
<input type="text" ng-model='billingMapValue'>
<br/><br/>
Billing value :
{{billingMap[billingMapValue]}}
<ng-click=navigate() type="button" value='submit'>
<p>{{ message }}</p>
</div>
about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
</div>
script.js
var scotchApp = angular.module('scotchApp', [ 'ngRoute' ]);
scotchApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'about.html',
controller : 'mainController'
})
.when('/contact', {
templateUrl : 'contact.html',
controller : 'mainController'
});
});
scotchApp.controller('mainController', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
$scope.billingMapValue = "";
$scope.billingMap = new Array();
$scope.billingMap["ZF2"] = "Invoice";
$scope.billingMap["ZRE"] = "Credit for Returns";
$scope.billingMap["ZG2"] = "Credit Memo";
$scope.billingMap["ZL2"] = "Debit Memo";
$scope.billingMap["ZS2"] = "Cancellation of Credit Memo";
$scope.billingMap["ZS1"] = "Cancel. Invoice (S1)";
});
Now I need. If I run the index.html page, I will be on the main page, there is one text input field. If I enter some index value, for example "ZF2", I will see the value "invoice". there will be a list of hyperlinks on top of the .home, .about and .contact page. I'll click on an item, then go to the page. Then I go back to the home page by clicking on the main hyperlink, now I need to see the previous data that I entered and received. How to do it? Thanks in advance.
source to share
I suggest you use a service that will act as an extensible resource between different controllers.
You need to make some changes to your code.
- You need to move everything static to a service or angular constant.
- Use the point rule when snapping an object that will automatically remove your snapping.
- Assign a different controller for each view to be more modular.
Service
scotchApp.service('dataService', function() {
this.data = {}
this.data.billingMap = new Array();
this.data.billingMap["ZF2"] = "Invoice";
this.data.billingMap["ZRE"] = "Credit for Returns";
this.data.billingMap["ZG2"] = "Credit Memo";
this.data.billingMap["ZL2"] = "Debit Memo";
this.data.billingMap["ZS2"] = "Cancellation of Credit Memo";
this.data.billingMap["ZS1"] = "Cancel. Invoice (S1)";
this.data.selectedBillMap = '';
});
controller
scotchApp.controller('mainController', function($scope, dataService) {
$scope.message = 'Everyone come and see how good I look!';
$scope.billingData = dataService.data.billingMap;
});
source to share