Angularjs state retension

Question

I am adding row dynamically using angularjs. But the problem is that I want to retain this state all over the application. For example in view-1 I add one dynamic row to the table and move to view-2 after coming from view-2 the added row should be available. So is there any method to retain the state of view in angularjs. Following is the code I used to add row dynamically:

angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {

  $scope.rows = ['Row 1'];

  $scope.counter = 2;

  $scope.addRow = function() {

    $scope.rows.push('Row ' + $scope.counter);
    $scope.counter++;
  }
}]);


<body ng-controller="MainController">

    <a href="#" class="button" ng-click="addRow()">Add Row {{counter}}</a>

    <table>
        <thead>
            <tr>
                <th width="200">Some Header</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="rowContent in rows">
                <td>{{rowContent}}</td>
            </tr>
        </tbody>
    </table>    

</body>

Thanks.

The persistent state should be stored on the server. Any refresh of the page will lose everything stored in the JavaScript application memory. — JB Nizet, Jul 23 '14 at 09:57
Use services to share informations throw your views (controllers) — Thomas, Jul 23 '14 at 10:02
@ThomasNDS as I am new to angularjs would you please give me any example.I am using spring mvc framework with front end as angularjs. — user3406754, Jul 23 '14 at 10:05

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

Yes. You should save the model used to build the table (with the new rows aswell) to a Service. Then you inject that service in your controllers.

To be able to see a little bit of your code would be nice, though. But here goes an example of how to do this:

DISCLAIMER

Untested example

    angular.module('yourapp').factory('MySharedService',function(){

       var myTableModel = [];

       function addRow(row){
         myTableModel.push(row);
         return myTableModel;
       }

       return  {
           addRow: addRow,
           tableModel: myTableModel
       }

    })
    .controller('MyFirstController',['$scope','MySharedService',function($scope,
                MySharedService){

         $scope.tableModel = MySharedService.tableModel;

         $scope.addRow = function(row){
            $scope.tableModel = MySharedService.addRow(row);
         }

    }]).controller('MySecondController',['$scope','MySharedService',function($scope,
                  MySharedService){...}]);

EDIT: After researching a bit further on this, I've found a similar question with a couple ways of achieving this and with sample code here Check it out and see if it helps you.

edited May 23 '17 at 11:50

Community

1
1

answered Jul 23 '14 at 10:10

António Sérgio Simões

981
7
11

Thanks for your quick response, i have updated my question.You mean to say that I need to call this service on view-2 right. – user3406754 Jul 23 '14 at 10:26
Sure. You should assign a $scope.tableModel with the MySharedService.tableModel value on the second view. This way what you accomplish is that both $scope.tableModel on 1st and 2nd controller are assigned by a shared source. – António Sérgio Simões Jul 23 '14 at 10:30
In past I had gone through this question http://stackoverflow.com/questions/12940974/maintain-model-of-scope-when-changing-between-views-in-angularjs but there they want retain view between tab and here I am changing the controller in spring mvc – user3406754 Jul 23 '14 at 10:31
Oh, so you're doing a full page reload when you change views? – António Sérgio Simões Jul 23 '14 at 10:34
yes, Its by default page reload in spring if we call another controller – user3406754 Jul 23 '14 at 10:35
Then you'll have to use some storage mechanism on the client side, because everytime you navigate to a new page, it will perform a full page reload...and angular willload it's files too, hence it will reset any data you have saved previously. – António Sérgio Simões Jul 23 '14 at 10:42

Angularjs state retension

1 Answers1