As a beginner with Angular, I am setting up a simple "submit comment" and "display list of comments" page. My goal is to automatically update the list of comments after submitting a new one, without having to manually refresh the page.
Here are my controllers:
app.controller('FormController', function($scope, CommentService) {
$scope.comment = {}; //this will be filled out by a basic form
$scope.submit = function() {
return CommentService.post($scope.comment).then(function(){
$scope.comment = ""; //clears form after submission
});
}
});
app.controller('CommentsController' function($scope, CommentService) {
CommentService.list().then(function(comments){
$scope.comments = comments.data;
});
});
And here's my service:
app.service('CommentService', function($http) {
this.post = function(comment) {
return $http.post('/api/v1/comments/', comment);
};
this.list = function() {
return $http.get('/api/v1/comments/').
success(function(data) {
return data;
});
};
//How can I link these two controllers?
});
The HTML form and list are very generic, using "ng-repeat" to display comments. Am I heading in the right direction? Is there a simple way to have the list of comments updated when a new one is submitted via the form?
Thank you for your help!