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

【问题标题】：content is loading everytime I refresh the page每次刷新页面时都会加载内容
【发布时间】：2015-02-11 19:08:08
【问题描述】：

我正在使用 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>

【问题讨论】：

你可以使用本地存储
你能举个例子，以便我接受你的回答
您确定加载时间来自服务器请求，而不是 DOM 渲染时间？您应该记录每个步骤（console.time 和 console.timeEnd 在 Chrome 中）。由于列表很长，Angular 完全可能需要时间来创建列表的所有节点，因此这不是“缓存”或其他问题，而是优化问题。
我相信这是 DOM 渲染时间，因此问题出在角度。如果你是我来优化这个网站，你会怎么做？让它立即加载？
你可以做许多小的优化：减少你的 ng-repeat (bindence) 中的观察者，但最明显的可能是设置“无限”滚动：而不是显示所有项目，只显示像20 并随着用户滚动加载更多。你可以实现你自己的指令（看看limitTo for ng-repeat）或者在谷歌上找到一些东西（jsfiddle.net/vojtajina/U7Bz9怎么样）

标签： javascript angularjs node.js mean-stack

【解决方案1】：

您看到的加载问题是在创建视图后获取数据。您可以使用路由的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;
});

【讨论】：

谢谢你的帮助，我们可以去聊天吗？
基本上看不出有什么区别

【解决方案2】：

我认为您应该使用本地存储。适合的模块 - 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

}]);

将此用法与您的场景相匹配（例如 - 将 stories 数组放在上面并添加更新）

【讨论】：