How to keep entered data of page1 after navigating back from page2 in AngularJS

Question

How to keep entered data of page1 after navigating back from page2 in AngularJS

3.8k views Asked by Subhakar Patnala At 13 June 2015 at 15:15

I have three pages with routing. If I entered some input and getting some result on first page, next I navigated to second page and finally I came back from second page to first page. Then I want to see the data what I entered previously and result also. Here the 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 what I need is. If I run index.html page, I will be in home page there is one input text box. If enter some index value like 'ZF2' I will see the value "invoice". there will be list of hyperlinks on top of page .home, .about and .contact. I will click about item then I navigate to about page. Then I navigate again to home page by clicking home hyperlink , now I need to see the previous data which I entered and got.How to do that? Thanks in advance.

Original Q&A

There are 1 answers

**Pankaj Parkar** · Accepted Answer · 2015-06-13 17:30:33

I'd suggest you to use service, that will act as sharable resource between the different controllers.

You need to do some changes in your code.

You need to move all the static to either service or angular constant.
Use dot rule while binding object that will udpate your binding automatically.
Assign a different controller for each view, that would be more modular approach.

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;
});

Demo Plunkr

TechQA.

How to keep entered data of page1 after navigating back from page2 in AngularJS

There are 1 answers

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in ANGULARJS-SERVICE

Related Questions in ANGULARJS-ROUTING

Related Questions in ANGULARJS-CONTROLLER

Popular Questions

Popular Tags

Trending Questions