how to retain values while navigating across pages using component routing angular 1.5

Question

Recently I have implemented angular 1.5 component routing. But I am not able to retain values while navigating across pages. How can I retain values while navigating across page. have a look at this PLUNKER . This is very basic example of two page navigation.

When I enter/select value on Page 1 and I move to Next Page. When I come to Previous Page all values reset, It's not retaining values. How can we achieve retaining values while navigating across pages?? This example having only two page navigation, In real application I will be having 5-10 page navigation.

If one can retain toggle selection. That would be great. Here is my code:

JavaScript

(function(angular) {
    'use strict';
    var module = angular.module('app', ['ngComponentRouter']);

    module.config(function($locationProvider) {
      $locationProvider.html5Mode(true);
    });

    module.value('$routerRootComponent', 'myFirstApp');

    module.component('myFirstApp', {
      templateUrl: "mainview.html",
      $routeConfig: [{
        path: '/',
        redirectTo: ['/First']
      }, {
        path: '/first',
        name: 'First',
        component: 'firstComponent'
      }, {
        path: '/second',
        name: 'Second',
        component: 'secondComponent'
      }]
    })

    module.component('firstComponent', {
      templateUrl: "1.html",
      controllerAs: "vm",
      controller: function($rootScope) {
        $rootScope.title = "Title from Page 1";
        var vm = this;

        vm.clusters = {};

        vm.$onInit = $onInit;
        vm.selectNumericValue = selectNumericValue;
        vm.selectAlphaValue = selectAlphaValue;

        // default selection
        function $onInit() {
          vm.clusters.numericValue = '111';
          vm.clusters.alphaValue = 'AAA';
        }

        // setting numeric value
        function selectNumericValue(numValue) {
          vm.clusters.numericValue = numValue;
          if (vm.clusters.numericValue === '111') {
            vm.clusters.numericValue = '111';
          } else {
            vm.clusters.numericValue = '222';
          }
        }

        function selectAlphaValue(alphaValue) {
          vm.clusters.alphaValue = alphaValue;
          if (vm.clusters.alphaValue === 'AAA') {
            vm.clusters.alphaValue = 'AAA';
          } else if (vm.clusters.alphaValue === 'BBB') {
            vm.clusters.alphaValue = 'BBB';
          } else {
            vm.clusters.alphaValue = 'CCC';
          }
        }

      }
    });

    module.component('secondComponent', {
      templateUrl: "2.html",
      controller: function($rootScope) {
        $rootScope.title = "Title from Page 2";
      },
    });

  })(window.angular);

HTML

      <div class="well form-horizontal">

    <div class="form-group" style="height: 50px;">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">NUMERIC VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <button id="clusters-fc" type="button" class="btn btn-toggle" value="111" ng-class="{active: vm.clusters.numericValue === '111'}" ng-click="vm.selectNumericValue('111')">
            111
          </button>
          <button id="clusters-ip" type="button" class="btn btn-toggle" value="222" ng-class="{active: vm.clusters.numericValue === '222'}" ng-click="vm.selectNumericValue('222')">
            222
          </button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">ALPHABETICAL VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <button type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'AAA'}" ng-click="vm.selectAlphaValue('AAA')">
            AAA
          </button>
          <button type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'BBB'}" ng-click="vm.selectAlphaValue('BBB')">
            BBB
          </button>
          <button id="def-ip-tenGb" type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'CCC'}" ng-click="vm.selectAlphaValue('CCC')">
            CCC
          </button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">Entered VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <input type="textbox" class="form-control">
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">Selected VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <select class="form-control" ng-model="vm.clusters.productionArrayType">
            <option>111</option>
            <option>222</option>
            <option>333</option>
            <option>444</option>
          </select>
        </div>
      </div>
    </div>

  </div>
  <a class="btn btn-success" ng-link="['Second']">Next Page</a>

attaching image of running sample:

You need to use service or factory to share data between pages. — jcubic, Sep 23 '16 at 09:22
It will be appreciated, if one can update the plunker by retaining any value. — ankitd, Sep 23 '16 at 09:23
@jcubic can u update the plunker in simplest way possible, I will pick up the idea. — ankitd, Sep 23 '16 at 09:25

score 1 · Accepted Answer · answered Sep 23 '16 at 09:34

1

You can use shared service for this:

module.service('sharedService', function() {
});

module.component('firstComponent', {
    templateUrl: "1.html",
    controllerAs: "vm",
    controller: function($rootScope, sharedService) {
      $rootScope.title = "Title from Page 1";
      var vm = this;

      vm.clusters = {};

      vm.$onInit = $onInit;
      vm.sharedService = sharedService;
      vm.sharedService.selectNumericValue = selectNumericValue;
      vm.sharedService.selectAlphaValue = selectAlphaValue;
      ...
 });

<input type="textbox" ng-model="vm.sharedService.alphaValue" class="form-control">

UPDATE PLUNKER

answered Sep 23 '16 at 09:34

jcubic

61,973
54
229
402

thanks for your effort...have one doubt toggle selection stopped working on updated plunker, am not able to figure out the root cause. – ankitd Sep 23 '16 at 09:54
@ankitdadhich Updated plunker https://plnkr.co/edit/OznFOWmO55cVa6fmiPuG?p=preview – jcubic Sep 23 '16 at 10:03
You forget to add function to vm in first controller so toggle buttons was not working. – jcubic Sep 23 '16 at 10:09
I believe something is going wrong.. It never retains toggle selection values.. i.e Select "222" and "CCC" on first page. Go to 2nd page, come back, it's not retaining the values of toggle selection. In my app there are number of toggles. – ankitd Sep 23 '16 at 10:27
It's becuase you clear it in $onInit this will work: https://plnkr.co/edit/OznFOWmO55cVa6fmiPuG?p=preview – jcubic Sep 23 '16 at 12:19
how can I reset all data on some `RESET` button click. – ankitd Oct 17 '16 at 19:21
@ankitd you meed manually set the init value or delete the property. – jcubic Oct 18 '16 at 08:50

how to retain values while navigating across pages using component routing angular 1.5

1 Answers1

Linked