Share data between html pages - angularJs

Question

I have page1.html has a list of objects, when the user clicks on one object the website should navigate to other page and display the object details.

1.HTML Page ahs a table , each row is object:

<tr ng-repeat="abjcet in nc.object">
           <td>{{object.title}}</td>
     </tr>

2.when user clicks on the title the same object must be transferred to the next HTML page and I've try this and I the object is retrieved but I don't know how to store it and use it in the next HTML page:

 <tr ng-repeat="object in nc.objects">
    <td ng-click="getById(object.id)">{{object.title}}</td>
</tr>

my Controller:

(function () {
    'user strict';

    angular.module('app').controller('myController', myController);

    myController.$inject = ['$http', '$scope' ];

 function myController($http , $scope ) {

         var nc = this;
         nc.objects = [];
         nc.object = null;

     nc.getById = getById ;

     init();


     function init(){
         getAll();

     }

     function getAll()
     {
         var url = "/getAll/";
         var Request = $http.get(url);
         Request.then(function (response) {

             nc.objects = response.data;

         });
     }

     function getById(id) {

         var url = "/findById/"+id;
         var Request = $http.get(url);
         Request.then(function (response) {

             nc.object = response.data;

         });
     }

}
})();

wael101 · Accepted Answer · 2016-09-03 22:12:45Z

2

You can use localStorage if you need to navigate to another page, or use SPA (Single Page Application) with a service that shared your data across all your controllers.

// Save the title
localStorage.setItem('title', $scope.title);
// Retrieve the title
$scope.title = localStorage.getItem('title');

answered Sep 3, 2016 at 22:12

wael101

5002 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhilesh Shivarathri · Accepted Answer · 2016-09-03 21:57:51Z

0

If the HTML application of yours is completely a single page application, then add $rootScope to the myController.$inject and then save it in the $rootScope, which can be accessed across multiple pages.

Instead, if you have a service which is being used by both the controllers on different pages, implement getters and setters in the service for that variable.

Hope it helps you!

answered Sep 3, 2016 at 21:57

Nikhilesh Shivarathri

1,68011 silver badges16 bronze badges

1 Comment

Shannon Hochkins Over a year ago

This is not the angular way, they actually advise you never to use $rootScope to maintain states of any kind. Events are the only thing $rootScope should be used for.

Shannon Hochkins · Accepted Answer · 2016-09-04 08:45:51Z

Multiple solutions

Using Local storage, you can maintain that data and persist it across multiple pages, this is the safest and easiest approach. There's plenty of modules out this out of the box and do it well: Angular local storage.

Example:

myApp.controller('MainCtrl', function($scope, localStorageService) {
    // setter
    localStorageService.set('title', 'value');
    // getter
    var title = localStorageService.get('title');
});

Routing You can maintain data through a SPA (Single Page Application) using Routes, this stops the browser from actually reloading the page, and allows the user to just request the next view/page. This means that you can save the data inside a factory for example, and the data will be maintained in internal memory.

Example:

//factory
myApp.factory('Data', function() {
    var data = {};
    return {
        get :get,
        set : set
    };
    // setter
    function set(key, val){
        data[key] = val;
    }
    // getter
    function get(key) {
        return data[key] || null;
    }
});

myApp.controller('MainCtrl', function(Data) {
    // setter
    Data.set('title', 'value');
    // getter
    var title = Data.get('title');
});

Collectives™ on Stack Overflow

Share data between html pages - angularJs

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related