El contenido se carga cada vez que actualizo la página.

Estoy desarrollando una aplicación CRUD simple con MEAN stack. Entonces, el escenario es un usuario que publica datos en el servidor y los procesará en tiempo real. Todo funciona bien pero siempre que actualizo la página,

Ordenará todo el contenido, cada vez que intente recuperar los datos. Supongo que este es un problema de almacenamiento en caché.

Entonces, lo que quiero lograr es que cada vez que un usuario actualice la página o vaya a otro enlace, el contenido estará allí sin esperar dos segundos.

Aquí está el enlace para probarlo, intente actualizar la página https://user-testing2015.herokuapp.com/allStories

y el código

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 (ambos encuentran todos los objetos y objetos individuales)

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

Para api.js siempre que actualice la página para ‘/ all_stories’ o vaya a ‘/: story_id’, cargará los datos en segundos divididos.

allStories.html

 

Recent Stories

78

El problema de carga que ve es que los datos se recuperan después de crear la vista. Puede retrasar la carga de la vista usando la propiedad de resolve de la ruta:

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

Angular retrasará la carga de la vista hasta que se hayan resuelto todas las propiedades de resolución. A continuación, inyecta la propiedad en el controlador:

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

Creo que deberías usar almacenamiento local. módulo adecuado – almacenamiento local-angular

Los datos se guardan mientras usted o el usuario cliente limpian los datos,

El uso es fácil:

bower install angular-local-storage --save

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

En un controlador:

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

Haga coincidir este uso con su escenario (por ejemplo, coloque la matriz de historias y solo agregue actualizaciones)