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

Question

我正在使用 MEAN 堆栈开发一个简单的 CRUD 应用程序。因此，场景是用户将数据发布到服务器，服务器将实时呈现数据。一切正常，但每当我刷新页面时，

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

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

这是测试它的链接，尝试刷新页面 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

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

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

Angular 将延迟 View 的加载，直到所有解析属性都已解析。然后将该属性注入(inject)到 Controller 中:

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