как сохранить значения при навигации по страницам с использованием угловой составляющей маршрута 1,5

Question

Недавно я реализовал угловую маршрутизацию с 1,5 компонентами. Но я не могу сохранять значения при навигации по страницам. Как сохранить значения во время навигации по странице. посмотрите на это PLUNKER. Это очень простой пример двухстраничной навигации.

Когда я ввожу/выбираю значение на странице 1 и перехожу на Следующая страница. Когда я прихожу к Предыдущая страница все значения сброшены, Это не сохраняет значения. Как мы можем добиться сохранения значений при навигации по страницам? Этот пример имеет только две навигации по страницам. В реальном приложении у меня будет 5-10-страничная навигация.

Если можно сохранить выбор переключателя. Это было бы прекрасно. Вот мой код:

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> 

прикрепление изображение под управлением образца:

Answer 1

Вы можете использовать общую службу для этого:

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