content is loading everytime I refresh the page

Question

I'm developing a simple CRUD application with MEAN stack. So the scenario is a user post a data to the server and it will render the data in real-time. Everything works fine but whenever I refresh the page ,

It will sort of loads all the content, every time it tries to fetch the data. I guess this is a caching problem.

So what I want to achieve is, every time a user refresh the page or go to another link, the content will be there without waiting for split seconds.

Here's the link to test it on, try to refresh the page https://user-testing2015.herokuapp.com/allStories

and the code

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 (both find all object and single object)

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

For api.js whenever I refresh the page for '/all_stories' or go to a '/:story_id' it will load the data for split seconds.

allStories.html


    


    

    

    
        


        

        

            
                
                    
                    
                        Recent Stories
                        
                            78
                        
                        
                            
                                
                                    
                                        
                                            
                                                
                                                     {{ each.createdAt | date:'MMM d, yyyy' }}
                                                
                                            
                                            
                                                {{ each.content }}

noj · Accepted Answer

The loading problem you see is that the data is fetched after the view has been created. You can delay the loading of the view by using the resolve property of the route:

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

Angular will delay the loading of the view until all resolve properties have been resolved. You then inject the property into the controller:

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

content is loading everytime I refresh the page

Answers (2)

Related Questions