内容加载每次我刷新页面 [英] content is loading everytime I refresh the page
本文介绍了内容加载每次我刷新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我发展，平均堆一个简单的CRUD应用程序。所以该方案是用户的数据发布到服务器，它会呈现在实时的数据。一切工作正常，但每当我刷新页面，
这将整理负载的所有内容，每次它试图获取数据的时间。我想这是一个缓存的问题。
所以我想实现的是，用户每次刷新页面或转到其他环节是什么，内容会在那里，而无需等待分裂秒。
下面是测试它的链接，请尝试刷新页面
https://user-testing2015.herokuapp.com/allStories
和code
controller.js
//开始我们的角模块，并注入我们的依赖条件
angular.module（'storyCtrl'，['storyService']）
.controller（'StoryController'，功能（故事，$ routeParams，socketio）{ VAR VM =这一点;
vm.stories = []; Story.all（）
.success（功能（数据）{
vm.stories =数据;
}）;
Story.getSingleStory（$ routeParams.story_id）
.success（功能（数据）{
vm.storyData =数据;
}）; vm.createStory =功能（）{
vm.message =''; Story.create（vm.storyData）
.success（功能（数据）{
//清除表单
vm.storyData = {}
vm.message = data.message;
}）;
}; socketio.on（'故事'，函数（数据）{
vm.stories.push（数据）;
}）;
}）
.controller（'AllStoryController'，功能（故事，socketio）{ VAR VM =这一点; Story.allStories（）
.success（功能（数据）{
vm.stories =数据;
}）; socketio.on（'故事'，函数（数据）{
vm.stories.push（数据）;
}）;}）
service.js
angular.module（'storyService'，[]）
.factory（'故事'，函数（$ HTTP，$窗口）{ //获取所有的方法
变种storyFactory = {}; VAR generateReq =功能（方法，URL，数据）{
VAR REQ = {
方法：方法，
网址：网址，
标题：{
X-访问令牌：$ window.localStorage.getItem（'令牌'）
}，
缓存：假的
} 如果（方法==='POST'）{
req.data =数据;
}
返回REQ;
}; storyFactory.all =功能（）{
返回$ HTTP（generateReq（GET，/ API /'））;
};
storyFactory.create =功能（storyData）{
返回$ HTTP（generateReq（'POST'，'/ API /'，storyData））;
}; storyFactory.getSingleStory =功能（story_id）{
返回$ HTTP（generateReq（GET，/ API /+ story_id））;
}; storyFactory.allStories =功能（）{
返回$ HTTP（generateReq（GET，/ API / all_stories'））;
}; 返回storyFactory;}）
.factory（'socketio'，['$ rootScope'，函数（$ rootScope）{ 变种插座= io.connect（）;
返回{
于：功能（eventName的，回调）{
socket.on（eventName的，函数（）{
变参=参数;
$ rootScope。$应用（函数（）{
callback.apply（插座，参数）;
}）;
}）;
}，
发出：功能（eventName的，数据，回调）{
socket.emit（eventName的，数据功能（）{
变参=参数;
$ rootScope。$应用（函数（）{
如果（回调）{
callback.apply（插座，参数）;
}
}）;
}）;
}
};
}]）;
api.js（均找到所有对象和单个对象）
apiRouter.get（'/ all_stories'功能（REQ，RES）{ Story.find（{}功能（呃，故事）{
如果（ERR）{
res.send（ERR）;
返回;
} res.json（故事）;
}）;
}）;
apiRouter.get（'/：story_id'，函数（REQ，RES）{ Story.findById（req.params.story_id，功能（呃，故事）{
如果（ERR）{
res.send（ERR）;
返回;
} res.json（故事）;
}）;
}）;
有关每当我刷新页面'/ all_stories或去api.js。'/：story_id'，它会载入数据拆分秒
allStories.html
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-3＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 新闻源，创造了一个故事 - ＆GT; ＆LT; DIV CLASS =COL-MD-6＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =行＆GT; ＆LT; DIV CLASS =面板面板默认控件＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT;跨度类=glyphicon glyphicon注释＆GT;＆LT; / SPAN＆GT;
＆LT; H3类=面板标题＆GT;
最近的故事和LT; / H3 GT＆;
＆LT;跨度类=标签标签信息＆GT;
-78℃/跨度＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板体NG重复=每个story.stories |反向＆GT;
＆LT; UL类=列表组＆GT;
＆LT;李班=列表组项＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-XS-10 COL-MD-11＆GT;
＆LT; DIV＆GT;
＆LT; DIV CLASS =MIC-INFO＆GT;
{{each.createdAt |日期：MMM D，YYYY}}
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =注释文本＆GT;
＆所述; A HREF =/ {{story._id}}＆GT;＆下; H4＆GT; {{each.content}}＆下; / H4＆GT;＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-3＆GT;
＆LT; / DIV＆GT;
解决方案
您看到的装载问题是，鉴于已创建后的数据被取出。您可以通过使用决心延缓视图的装载路由属性：
。当（'/ allStories'，{
templateUrl：应用程序/视图/页/ allStories.html'，
控制器：'AllStoryController'，
controllerAs：'故事'，
解析：{
故事：功能（故事）{
返回Story.allStories（）;
}
}
}）
角将延迟视图的加载，直到所有的决心性能都得到了解决。然后，注入财产到控制器：
.controller（'AllStoryController'，函数（socketio，故事）{
VAR VM =这一点;
vm.stories = stories.data;
}）;
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
<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>
解决方案
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;
});
这篇关于内容加载每次我刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
