Home / AngularJS / Wall post system with reactions using AngularJS

Wall post system with reactions using AngularJS

In this tutorial, let’s see how to create a wall post system using AngularJS only. Using angular it is quite easy to achieve unlike using jQuery. I have taken a look at various articles which are very effective and neatly written but the code size! With angular it is only half the work and time. Let’s quickly get started

Requirements

* jQuery
* AngularJS
* Angular Sanitize
* Angular Elastic
* Autoheight
* Angular Timeago
* Sweetalert
* ngSweetalert

Mark up

* The timelineCtrl is instantiated in the parent

* The class timeline will contain all the necessary elements for posting such as post composer and posts

The post composer will have a textarea and a share button only

Let us first define require scope variables

Data binding

The two important elements are the textarea and the share button. The textarea has a model timeline.composerText using which we will fetch the user’s post text and the share button has the ng-click which will call the sharePost function

Posting

When the Share button is clicked check if the model timeline.composerText is either or undefined if condition satisfied show an alert to notify user that the post text is empty. If condition fails create a post array and push it to timeline.posts.

In the postInfo json you can notice that I have hard coded all items except time and postBody. I have simulated the process in this tutorial but you can bring your data from the database forming the above structure and it will work fine. comments is an array that will contain the list of comments.

$scope.timeline.posts.push(postInfo); will render the post in the page using the ng-repeat directive as you can see in the Mark up above.

Reactions

The mark up for reactions is straight forward everything is defined in the HTML itself its just that we show/hide using ng-if (condition)

Comments

The ng-repeat directive of the post will generate the index of the array using which we will add comments to its parent post.

On every keypress in the comment textarea check if Enter key alone is pressed.

$event will hold all information of the keypress event (keycode for Enter key is 13)
$index is the index of the array

When Enter key is pressed simply push the json to the appropriate post’s comment array

That’s it! I will be actively monitoring this post so feel free to ask questions and provide suggestions.

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!