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

每当我刷新＆＃39; / all_stories＆＃39;的页面时，对于api.js或者去＆＃39; /：story_id＆＃39;它会在几秒钟内加载数据。

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

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

Answer 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

}]);

将此用法与您的方案相匹配（例如 - 将故事数组置于其上并仅添加更新）

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

2 个答案: