Client side database problems in angular meteor
I am new to app development in angular -meteor and I am struggling to make changes to the database from the client side. I have successfully followed most of the angular-methoric tutorial , but now when I try to start a new project and adapt the concepts from the tutorial I am running into problems.
Problem. Users fill out the form, and when they click add, the form needs to save the data to the database. On the same page, I have included a list box that displays all database records (typical item-in-items loop in a html list). However, when I click "add" after filling out the form, the new entry is added to the list for a split second and then disappears . The same behavior occurs when I click the delete all button, everything disappears for a moment and then is restored. The data that is retained is everything that was in the database before adding / removing.
Attempts to troubleshoot. I can access the collection using "meteor mongo" and the values that are stored in the collection. I can add to the collection or remove it from the command line (EDIT: and the changes are reflected at the client end). Client-side records are not added to the database. I initiated the database using the conditional server side start function if (Videos.find().count() === 0)
. I thought maybe the database was just updating itself every time, but the behavior persists when the init code is commented out. Adding auto-publish to the project does not solve the problem. EDIT: Google Chrome doesn't have any errors in the console before or after submitting.
The relevant code. I am using this repository as a starting point.
/client/views/submit/submit.controller.js
angular.module("app").controller("SubmitCtrl", ['$scope', '$meteor',
function($scope, $meteor){
$scope.videos = $meteor.collection(Videos).subscribe('videos');
}
]);
/client/views/submit/submit.ng.html
<form>
<label>URL</label>
<input ng-model="newVideo.linkurl">
<label>Description</label>
<input ng-model="newVideo.description">
<button ng-click="videos.save(newVideo); newVideo='';">Add</button>
</form>
<ul>
<li ng-repeat="video in videos">
{{video.linkurl}}
<p>{{video.description}}</p>
</li>
</ul>
/model/collections.js
Videos = new Mongo.Collection("videos");
/server/publications/videos.js
Meteor.startup(function () {
if (Videos.find().count() === 0) {
var videos = [
{ 'linkurl': 'https://www.youtube.com/watch?v=O7zewtuUM_0',
'description': '1st video'},
{ 'linkurl': 'https://www.youtube.com/watch?v=KSzuiqVjJg4',
'description': '2nd video'},
];
for (var i = 0; i < videos.length; i++)
Videos.insert(videos[i]);
};
});
Meteor.publish("videos", function () {
return Videos.find();
});
The only other file I think is really relevant is /client/app.routes.js, but it's quite long and I have changed very little (from page to page post, essentially). I also haven't included a controller or view responsible for deleting items as it seems overkill.
As far as my limited knowledge is concerned, it seems like it should work; hence, I feel like the solution is probably staring me in the face. Do you have any suggestions for the next steps to resolve this issue?
source to share
a new entry is added to the list within a second and then disappears.
This is due to delay compensation . Basically, the client database processes it in front of the server to make the operations run faster. This is a very useful feature, but difficult to debug if you don't understand how it works.
Am I assuming the package insecure
has been removed? To check if this is the problem, launch meteor add insecure
and check if your application is working now.
If the app only starts on install insecure
, I think you need to allow
write to the database.
Videos.allow({
insert: function () {
// condition where user has write access, return true to allow
if (Meteor.user()) {
return true;
}
},
update: function () {},
remove: function () {}
});
Hope it works!
source to share