All geek questions in one place

Transferring data between different pages using angular services?

I want to transfer data from one page to another using the angular service. I can store data in the service from one page, but when I try to retrieve data from another page using another controller, the data is not available.

I examined the questions asked on similar questions, but the solutions mentioned show that data can be transferred between controllers on the same page using the service.

My question is: Is it possible to transfer data between different pages using the angular service?

Below is the snippet I tried:

page1.html

<body ng-controller="SearchController as searchCtrl">

<form name="searchForm" id="center" novalidate>

    <input type="text" id="searchInput" placeholder="Search " ng-model = "searchCtrl.search.searchText" required/>
    <input type="button" id="searchButton" value="Search" ng-click = "searchForm.$valid && searchCtrl.performSearch()"/>

</form>

</body>

Page2.html

<body ng-controller="ResultStoreController as resultStoreCtrl">
<div>
    <p>Search Value: {{resultStoreCtrl.data()}}</p>
</div>
</body>

app.js

(function(){
    var dummyApp = angular.module('dummyApp',[]);
    /**
     * Create a new service, so that data can be shared between the controllers.
     */
    dummyApp.service('peerSearchResultSharingService',function(){

        var results;

        return{
            storeResults: function(value){
                results = value;
            },
            fetchResults: function(){
                return results;
            }
        }

    });


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

    dummyApp.controller('SearchController',['$scope','$location','$window', 'peerSearchResultSharingService',function( $scope, $location, $window, peerSearchResultSharingService){

        var search ={};
        this.performSearch = function(){

          peerSearchResultSharingService.storeResults(search.searchText);
          $window.location.href ="http://localhost:63342/TestAngular/app/views/Page2.html";

        };
    }]);



    dummyApp.controller('ResultStoreController',['peerSearchResultSharingService',function(peerSearchResultSharingService){
            var data;
            data = peerSearchResultSharingService.fetchResults();
     }]);


})();

thank

+4
source share
2 answers

. Angular, .

. javascript, , . , reset .

, , .

, Angular , (, localstorage, server side set cookie).

+4
<p> commonModule.service('commonDataPass', function () {  var dataValue = null;
        this.$set = function (data) { dataValue = data;
        };
        this.$get = function () {
            return dataValue;
        };
    });</p>
0

Source: https://habr.com/ru/post/1547050/

More articles:


All Articles