每次刷新页面时都会加载内容

Question

我正在使用 MEAN 堆栈开发一个简单的 CRUD 应用程序。所以场景是一个用户post一个数据到服务器，它会实时渲染数据。一切正常，但每当我刷新页面时，

每次尝试获取数据时，它都会加载所有内容。我想这是一个缓存问题。

所以我想要实现的是，每次用户刷新页面或转到另一个页面时link，内容都会在那里，而无需等待瞬间。

这里是 link 进行测试，尝试刷新页面 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

我认为你应该使用本地存储。适合的模块 - angular-local-storage

只要您或客户端用户清理数据，数据就会保留，

用法很简单：

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

}]);

将此用法与您的场景相匹配（例如 - 放置故事数组并向其追加更新）

Answer 2

您看到的加载问题是在创建视图后获取数据。您可以使用路由的 resolve 属性来延迟视图的加载：

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

Angular 将延迟视图的加载，直到所有解析属性都已解析。然后将属性注入控制器：

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

每次刷新页面时都会加载内容

content is loading everytime I refresh the page

javascript

angularjs

node.js

mean-stack