Angular JS Facebook Wall System with Multiple Bindings Tutorial

Today, I am here to introduce a new Advanced Javascript series in 9Lessons.info. Basically, I love wall system because we can cover multiple operations or features in a single web page. 9Lessons.info is most popular for its articles designed on wall system. This article is based on this wall system concept using Angular js 1.4. Future posts will be on the same concept where I will be introducing ReactJS and AngularJS 2 to 9Lessons.info. Below is the demo and hope you all enjoy this new series

Ad Blocker Detector for Blogger with JavaScript

Download Script

Live Demo

Create a HTML Page

index.php
Here you have to include Angular JavaScript library in HEAD tag.

<!DOCTYPE html>
<html>
<head>
<title>Wall System</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/wall.js"></script>
<link rel="stylesheet" type="text/css" href="css/wall.css" />
</head>
<body>
<div id="container">
// Wall Grid Code
</div>
</body>
</html>

wall.js
Create a JavaScript file using favorite text editor. Include a Angular model myApp and controller myWall.

var app=angular.module("myApp",[]);
app.controller('myWall', function($scope, $http, $timeout)
{
// All the code comes here.
};

In this we are going to use built-in service called $http(communicate with http requests), $timeout(setTimeout) and $scope (application object).

Angular Implementation
Apply Angular code to the HTML by using ng-app and ng-controller. This Wall System divided into multiple HTML blocks.

<div id="container" ng-app="myApp" ng-controller="myWall">
<div id="wallFeed">
<h1>Wall System</h1>
1) Wall Update Form
2) Wall Feed Grid
[
2.1) Wall Feed Update
2.2) Wall Feed Comment Link
2.3) Wall Feed Comments Grid
2.4) Wall Feed Comment Form
]
</div>
</div>

Read Status Message Design with CSS this post for more information.

1) Wall Update Form
HTML code for updating user status message.

2) Wall Feed Grid
Complete news feed grid, this part contains multiple operations.

<div class="feedBody">
2.1) Wall Feed Update
2.2) Wall Feed Comment Link
2.3) Wall Feed Comments Grid
2.4) Wall Feed Comment Form
</div>

2.1) Wall Feed Update
User update status.

<img src="profile.jpg" class="feedImg" />
<div class="feedText" >
<b>Demo User Name</b>
<a href="#delete1" class="feedDelete">X</a>
<span>Update Content</span>
</div>

2.2) Wall Feed Comment Link
Comment link for accessing Comment form.

<div class="feedLinks"><a href="#1" class="commentLink">Comment</a></div>

2.3) Wall Feed Comments Grid
Comments Grid.

<div class="feedCommentGrid">
<img src="commentUser.jpg" class="commentImg" />
<div class="commentText">
<b>Comment User Name</b>
<a href="#11" class="commetDelete">X</a>
<div> Comment Content</div>
</div>
</div>

2.4) Wall Feed Comment Form
Comment form

Working with Angular Controllers

Display News Feed/User Updates
Using Angular $http service, we are getting the user news feed response based on the user session id.

app.controller('myWall', function($scope, $http, $timeout){

//Default http header
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

// Newsfeed call
$http({
method : "POST",
url : "newsFeed.php",
data : ""
}).then(function(response)
{
$scope.updatesData=response.data.updates;
});

// Other code
........
........

}

More information about user news feed database design and Create a RESTful services using Slim PHP Framework

HTML Data Binding
Using np-repeat directive bind the JSON data to HTML template. Read more about AngularJS Tutorial Two Way Data Binding.

<div class="feedBody" ng-repeat="data in updatesData">
2.1) Wall Feed Update
2.2) Wall Feed Comment Link
2.3) Wall Feed Comments Grid
2.4) Wall Feed Comment Form
</div>

newsFeed.php
Here you have to implement database connection and get the user information in JSON format.

{"updates": [
{
"user_id": "1",
"name": "Srinivas Tamada",
"profile_pic": "user1_14572474701.png",
"update_id": "62",
"user_update": "The Wall Script http://www.thewallscript.com",
"comments": [
//Comments Data
]
},
{
"user_id": "3",
"name": "Arun Kumar",
"profile_pic": "user10_14547044391.jpg",
"update_id": "50",
"user_update": "Create Dynamic Subdomains using PHP and Htaccess http://www.9lessons.info/2016/03/how-to-create-dynamic-subdomains-using-php-and-htaccess.html",
"comments": [
//Comments Data
]
}
]}

2.1) Wall Feed Update #Angular
Implement Angular expressions based on about JSON objects.

<img ng-src="{{data.profile_pic}}" class="feedImg" />
<div class="feedText" >
<b>{{data.name}}</b>
<a href="#delete{{data.update_id}}" class="feedDelete">X</a>
<span>{{data.user_update}}</span>
</div>

Delete Feed
JavaScript function calls deleteUpdate.php. If the server response is true, using splice function data object will remove from the updatesData(feeds data object)

$scope.deleteFeed=function(updateID, index)
{
if(updateID>0)
{
$http({
method : "POST",
url : "deleteUpdate.php",
data : 'updateID='+updateID
}).then(function(response){
if(response){
$scope.updatesData.splice(index,1);
}
});
}
}

HTML Code
Using ng-click call the controller function, here $index is referred to data set object.

Comment HTML
Toggling comment form on comment link, here changing the commentForm value based on clicks.

<div class="feedLinks"><a href="#1" class="commentLink" ng-click="commentToggle($index)">Comment</a></div>

<div class="feedCommentGrid">
// 2.3.1 Comment Code
</div>

<div class="feedCommentForm" ng-show="commentForm[$index]">
<textarea class="commentInput" ></textarea>
<input type="submit" value="Comment" class="commentSubmit"/>
</div>

Comment Toggle Function
Change commentForm value , focusing the input after 200 milli seconds.

$scope.commentForm = {};
$scope.commentToggle=function(index)
{
$scope.commentForm[index] = !$scope.commentForm[index];
// Comment Input focus
$timeout(function () {
document.getElementById('commenInput'+index).focus();
}, 200);
}

Comments JSON
newsFeed.php will generate following JSON.

{"updates": [
{
"user_id": "1",
"name": "Srinivas Tamada",
"profile_pic": "user1_14572474701.png",
"update_id": "62",
"user_update": "The Wall Script http://www.thewallscript.com",
"comments": [{
"com_id": "62",
"uid_fk": "80",
"comment": "ola",
"name": "eliasfarias",
"profile_pic": "user80_14688066161.jpg"
},
{
"com_id": "72",
"uid_fk": "221",
"comment": "its a party",
"name": "rpg",
"profile_pic": "user221_14690532461.jpg"
}]
}
]
}

Comment Binding Data
Binding data with comments HTML grid.

<div class="feedCommentGrid" ng-repeat="commentData in data.comments">
<img ng-src="{{commentData.profile_pic}}" class="commentImg" />
<div class="commentText">
<b>{{commentData.name}}</b>
<a href="#{{data.update_id}}{{$index}}" class="commetDelete">X</a>
<div>{{commentData.comment}} </div>
</div>
</div>

Delete Comment
Delete function, this will send updateID and commentID values to deleteComment.php

// Delete comment
$scope.deleteComment=function(commentIndex, parentIndex, updateID, commentID)
{
if(updateID>0)
{
$http({
method : "POST",
url : "deleteComment.php",
data : 'updateID='+updateID+'&commentID='+commentID
}).then(function(response){
if(response){
$scope.updatesData[parentIndex].comments.splice(commentIndex,1);
}
});
}
}

Delete Comment HTML
Using ng-click button triggering to deleteComment function.

Update Comment
Comment submit using JavaScript push function, appending data in comments grid.

// Update comment
$scope.updateComment=function(commentSubmitData,index,updateID)
{
if(commentSubmitData.commentValue)
{
$http({
method : "POST",
url : "updateComment.php",
data : 'updateID='+updateID+'&user_comment='+commentSubmitData.commentValue
}).then(function(response){
$scope.updatesData[index].comments.push(response.data.comments[0]);
commentSubmitData.commentValue='';
document.getElementById('commenInput'+index).focus();
});
}
}

Update Comment HTML

Update Wall Form
Here updateBox is ID name of the textarea tag, feedValue is the textarea ng-model value. JSON response prepend using unshift function.

//Focus update box on page load.
document.getElementById('updateBox').focus();

//Update feed.
$scope.updateFeed=function()
{
if($scope.feedValue)
{
$http({
method : "POST",
url : "updateFeed.php",
data : 'user_update='+$scope.feedValue
}).then(function(response)
{
$scope.updatesData.unshift(response.data.updates[0]);
$scope.feedValue="";
document.getElementById('updateBox').focus();
});
}
}

Wall Update Form
Using Angular ng-click directive, submit action is triggered to updateFeed()

Text to Link Filter
Using regular expression, converting test to link. Here $sce means strict contextual escaping services to AngularJS.

Appling Filter to Data Objects
Just replace HTML code in following way.

<span>{{data.user_update}}</span>
to
<span ng-bind-html="data.user_update | textToLink"></span>

<div>{{commentData.comment}}</div>
to
<div ng-bind-html="commentData.comment | textToLink"></div>