Обмен данными между html-страницами - angularJs

Question

Обмен данными между html-страницами - angularJs

0

У меня есть page1.html список объектов, когда пользователь нажимает на один объект, веб-сайт должен перейти на другую страницу и отобразить детали объекта.

1.HTML Page ahs table, каждая строка - объект:

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

2. Когда пользователь нажимает на заголовок, тот же объект должен быть перенесен на следующую страницу HTML, и я попробовал это, и я возвращаю объект, но я не знаю, как его сохранить и использовать на следующей странице HTML:

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

мой контроллер:

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

         });
     }

}
})();

user3018340 04 сен. 2016, в 00:34

Источник

Теги:

html

angularjs

3 ответа

0

Несколько решений

Используя локальное хранилище, вы можете поддерживать эти данные и сохранять их на нескольких страницах, это самый безопасный и простой способ. Там много модулей из этого из коробки и делать это хорошо: Угловое местное хранилище.

Пример:

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

Маршрутизация. Вы можете поддерживать данные через SPA (одностраничное приложение) с использованием маршрутов, это останавливает браузер от фактической перезагрузки страницы и позволяет пользователю просто запрашивать следующий просмотр/страницу. Это означает, что вы можете сохранить данные на заводе, например, и данные будут сохранены во внутренней памяти.

Пример:

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

Shannon Hochkins 03 сен. 2016, в 21:46

0

Если ваше приложение HTML completely a single page application, добавьте $rootScope в myController.$inject и затем сохраните его в $rootScope, к которому можно получить доступ на нескольких страницах.

Вместо этого, если у вас есть service которая используется обоими контроллерами на разных страницах, реализуйте getters and setters в service для этой переменной.

Надеюсь, это поможет вам!

Nikhilesh Shivarathri 03 сен. 2016, в 19:54

0

Это не угловой способ, они фактически советуют вам никогда не использовать $rootScope для поддержания состояний любого рода. События - это единственное, для чего следует использовать $rootScope .
Shannon Hochkins 03 сен. 2016, в 23:57

Ещё вопросы

Это не угловой способ, они фактически советуют вам никогда не использовать $rootScope для поддержания состояний любого рода. События - это единственное, для чего следует использовать $rootScope .

wael101 · Accepted Answer · 2016-09-03T20-03-00.000Z

Вы можете использовать localStorage, если вам нужно перейти на другую страницу или использовать SPA (приложение для одиночной страницы) с помощью службы, которая поделилась вашими данными на всех ваших контроллерах.

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