Daten zwischen HTML-Seiten teilen - angularJs

Question

Ich habe page1.html hat eine Liste von Objekten, wenn der Benutzer auf ein Objekt klickt, sollte die Website zu einer anderen Seite navigieren und die Objektdetails anzeigen.

1.html Seite eine Tabelle ahs, jede Zeile Objekt:

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

2.when Benutzer auf den Titel klickt das gleiche Objekt auf die nächste HTML-Seite übertragen werden müssen, und ich habe versucht dieses und ich das Objekt abgerufen, aber ich weiß nicht, wie es zu speichern und es in der nächsten HTML-Seite verwenden:

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

mein 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; 

     }); 
    } 

} 
})(); 

Answer 1

Sie können localStorage verwenden, wenn Sie zu einer anderen Seite navigieren müssen, oder SPA (Single Page Application) mit einem Dienst verwenden, der Ihre Daten über alle Ihre Controller verteilt.

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

Answer 2

Wenn Ihre HTML-Anwendung completely a single page application lautet, fügen Sie die $rootScope zur myController.$inject hinzu und speichern Sie sie in der $rootScope, auf die über mehrere Seiten zugegriffen werden kann.

Wenn Sie eine service haben, die von beiden Controllern auf verschiedenen Seiten verwendet wird, implementieren Sie getters and setters im service für diese Variable.

Hoffe es hilft dir!

Answer 3

Mehrere Lösungen

1. lokale Speicher verwenden, können Sie diese Daten pflegen können und bleiben es über mehrere Seiten, das ist die sicherste und einfachste Ansatz. Es gibt viele Module out out of the box und tun es gut: Angular local storage.

Beispiel:

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

2. Routing Sie können Daten über einen SPA (Single-Page-Applikation) halten mit Routen, das den Browser-Stationen von der tatsächlich die Seite neu zu laden und ermöglicht dem Benutzer, nur die nächste Ansicht/Seite anzufordern. Dies bedeutet, dass Sie beispielsweise die Daten in einer Fabrik speichern können und die Daten im internen Speicher verbleiben.

Beispiel:

//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'); 
});