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

Question

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.

You should use services read this http://viralpatel.net/blogs/angularjs-service-factory-tutorial/ and http://stackoverflow.com/questions/12940974/maintain-model-of-scope-when-changing-between-views-in-angularjs — Navaneet, Jun 13 '15 at 17:15

Pankaj Parkar · Accepted Answer · 2015-06-14T10:11:18.443

3

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

edited Jun 14 '15 at 10:11

answered Jun 13 '15 at 17:30

Pankaj Parkar

134,766
23
234
299

@Subhakar Patnala does it helped you..>? – Pankaj Parkar Jun 14 '15 at 08:47
Its working. Why need data. can it work with out data only with billingMap ? – Subhakar Patnala Jun 14 '15 at 10:05
@SubhakarPatnala no it wont work..that is nothing but we are following dot rule..you really need to look at https://github.com/angular/angular.js/wiki/Understanding-Scopes – Pankaj Parkar Jun 14 '15 at 10:06
@SubhakarPatnala after reading that document you will come to why `this.data ` required their and ho prototypal inheritance work in javascript – Pankaj Parkar Jun 14 '15 at 10:19
I have another thing. I am getting data from web service to my object in controller. How I can keep that data in page when return from another page. please help me. – Subhakar Patnala Jun 26 '15 at 16:37
@SubhakarPatnala you should open other so that other can participate and you will get a newer ideas – Pankaj Parkar Jun 26 '15 at 16:38
If I initialize any thing to object in controller $scope.billingData.selected="ZF2" . Then the concept is not working. – Subhakar Patnala Jun 26 '15 at 16:47
@SubhakarPatnala could you show me your full code..I think you are doing changing `$scope.billingData` somewhere which is flushing value of `$scope.billingData` – Pankaj Parkar Jun 26 '15 at 16:48

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

1 Answers1