Содержимое загружается каждый раз, когда я обновляю страницу

Question

Я разрабатываю простое приложение CRUD со стеком MEAN. Таким образом, сценарий - это сообщение пользователя на сервер, и он будет отображать данные в режиме реального времени. Все работает нормально, но всякий раз, когда я обновляю страницу,

Он будет сортировать все содержимое, каждый раз при попытке получить данные. Я думаю, это проблема кэширования.

Так что я хочу достичь, каждый раз, когда пользователь обновляет страницу или переходит на другую ссылку, контент будет там, не дожидаясь разделения секунд.

Вот ссылка, чтобы проверить это, попробуйте обновить страницу https://user-testing2015.herokuapp.com/allStories

, и код

controller.js

// start our angular module and inject our dependecies 
angular.module('storyCtrl', ['storyService']) 


.controller('StoryController', function(Story, $routeParams, socketio) { 

    var vm = this; 
    vm.stories = []; 

    Story.all() 
    .success(function(data) { 
     vm.stories = data; 
    }); 


    Story.getSingleStory($routeParams.story_id) 
    .success(function(data) { 
     vm.storyData = data; 
    }); 

    vm.createStory = function() { 
     vm.message = ''; 

     Story.create(vm.storyData) 
     .success(function(data) { 
      // clear the form 
      vm.storyData = {} 
      vm.message = data.message; 
     }); 
    }; 

    socketio.on('story', function (data) { 
     vm.stories.push(data); 
    }); 
}) 


.controller('AllStoryController', function(Story, socketio) { 

    var vm = this; 

    Story.allStories() 
    .success(function(data) { 
     vm.stories = data; 
    }); 

    socketio.on('story', function (data) { 
     vm.stories.push(data); 
    }); 

}) 

service.js

angular.module('storyService', []) 


.factory('Story', function($http, $window) { 

    // get all approach 
    var storyFactory = {}; 

    var generateReq = function(method, url, data) { 
      var req = { 
       method: method, 
       url: url, 
       headers: { 
       'x-access-token': $window.localStorage.getItem('token') 
       }, 
       cache: false 
      } 

      if(method === 'POST') { 
       req.data = data; 
      } 
      return req; 
     }; 

    storyFactory.all = function() { 
     return $http(generateReq('GET', '/api/')); 
    }; 


    storyFactory.create = function(storyData) { 
     return $http(generateReq('POST', '/api/', storyData)); 
    }; 

    storyFactory.getSingleStory = function(story_id) { 
     return $http(generateReq('GET', '/api/' + story_id)); 
    }; 

    storyFactory.allStories = function() { 
     return $http(generateReq('GET', '/api/all_stories')); 
    }; 

    return storyFactory; 

}) 


.factory('socketio', ['$rootScope', function ($rootScope) { 

     var socket = io.connect(); 
     return { 
      on: function (eventName, callback) { 
       socket.on(eventName, function() { 
        var args = arguments; 
        $rootScope.$apply(function() { 
         callback.apply(socket, args); 
        }); 
       }); 
      }, 
      emit: function (eventName, data, callback) { 
       socket.emit(eventName, data, function() { 
        var args = arguments; 
        $rootScope.$apply(function() { 
         if (callback) { 
          callback.apply(socket, args); 
         } 
        }); 
       }); 
      } 
     }; 
    }]); 

api.js (оба найти все объекты и один объект)

apiRouter.get('/all_stories', function(req, res) { 

      Story.find({} , function(err, stories) { 
       if(err) { 
        res.send(err); 
        return; 
       } 

       res.json(stories); 
      }); 
     }); 


apiRouter.get('/:story_id', function(req, res) { 

     Story.findById(req.params.story_id, function(err, story) { 
      if(err) { 
       res.send(err); 
       return; 
      } 

      res.json(story); 
     }); 
    }); 

Для api.js всякий раз, когда я обновить страницу для «/» all_stories или идти к «/: story_id» будет загружать данные за доли секунды.

allStories.html

<div class="row"> 
    <div class="col-md-3"> 


    </div> 

    <!-- NewsFeed and creating a story --> 

    <div class="col-md-6"> 
     <div class="row"> 


     </div> 

     <div class="row"> 

      <div class="panel panel-default widget" > 
       <div class="panel-heading"> 
        <span class="glyphicon glyphicon-comment"></span> 
        <h3 class="panel-title"> 
         Recent Stories</h3> 
         <span class="label label-info"> 
          78</span> 
         </div> 
         <div class="panel-body" ng-repeat="each in story.stories | reverse" > 
          <ul class="list-group"> 
           <li class="list-group-item"> 
            <div class="row"> 
             <div class="col-xs-10 col-md-11"> 
              <div> 
               <div class="mic-info"> 
                {{ each.createdAt | date:'MMM d, yyyy' }} 
               </div> 
              </div> 
              <div class="comment-text"> 
               <a href="/{{ story._id }}"><h4>{{ each.content }}</h4></a> 
              </div> 
             </div> 
            </div> 
           </li> 
          </ul> 
         </div> 
        </div> 
       </div> 

      </div> 



      <div class="col-md-3"> 


      </div> 

Answer 1

Проблема с загрузкой, которую вы видите, заключается в том, что данные извлекаются после создания представления. Вы можете задержать загрузку зрения, используя resolve свойства маршрута:

.when('/allStories', { 
    templateUrl : 'app/views/pages/allStories.html', 
    controller: 'AllStoryController', 
    controllerAs: 'story', 
    resolve: { 
     stories: function(Story) { 
      return Story.allStories(); 
     } 
    } 
}) 

Угловая задержит загрузку зрения, пока все свойства Разрешая не были решены. Затем вводит свойство в контроллер:

.controller('AllStoryController', function(socketio, stories) { 
    var vm = this; 
    vm.stories = stories.data; 
}); 

Answer 2

Я думаю, вы должны использовать локальное хранилище. подходит модуль - angular-local-storage

Данные хранятся aslong вас или пользователь клиента очистить данные,

Использование легко:

bower install angular-local-storage --save

var storyService = angular.module('storyService', ['LocalStorageModule']); 

В контроллере:

storyService.controller('myCtrl', ['$scope', 'localStorageService', 
            function($scope, localStorageService) { 
     localStorageService.set(key, val); //return boolean 
     localStorageService.get(key); // returl val 

}]); 

Соответствие этому использованию вашей scena rio (например, включите массив историй и просто добавьте обновления)