AngularJS & Facebook Wall System, can we do that ? OFCOURSE YES. I love wall system because we can cover multiple Angular Js operations in a single web page and Multiple Bindings.
This post will be on the concept of AngularJS Multiple Bindings. Meul Tech Classes.com is most popular for AngularJs Tutorial as we provide Demo and Download Link for most complex projects. Let’s have a look on how to make ‘Facebook Wall System Using Angular JS with Multiple Bindings Tutorial’.
STEP 1: Create a HTML Page index.php
Include Angular JavaScript library in HEAD tag of index.php page.
[code]<!DOCTYPE html>
<html>
<head>
<title>Wall System</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fwall.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel="stylesheet" type="text/css" href="css/wall.css" />
</head>
<body>
<div id="container">
// Wall Grid Code
</div>
</body>
</html>[/code]
STEP 2:
Create a wall.js JavaScript file using favorite text editor. Include a Angular model myApp and controller myWall. We are going to use built-in service called $http (communicate with http requests), $timeout (setTimeout) and $scope (application object).
[code]var app=angular.module("myApp",[]);
app.controller(‘myWall’, function($scope, $http, $timeout)
{
// All the code comes here.
};[/code]
STEP 3: Angular Implementation:
Apply Angular code to the HTML by using ng-app and ng-controller. This Wall System divided into multiple HTML blocks.
1) Wall Update Form:
HTML code for updating user status message.
[code]
<form>
<textarea id="updateBox" ></textarea>
<input type="submit" value="Post" id="wallPost">
</form>
[/code]
2) Wall Feed Grid
Complete news feed grid, this part contains multiple operations.
[code]
<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>
[/code]
2.1) Wall Feed Update:
User update status.
[code]<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>
[/code]
2.2) Wall Feed Comment Link:
Comment link for accessing Comment form.
[code]
<div class="feedLinks"><a href="#1" class="commentLink">Comment</a></div>
[/code]
2.3) Wall Feed Comments Grid :
Comments Grid.
[code]
<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>
[/code]
2.4) Wall Feed Comment Form:
Comment form
[code]
<div class="feedCommentForm" >
<textarea class="commentInput" id="commenInput1"></textarea>
<input type="submit" value="Comment" class="commentSubmit"/>
</div>
[/code]
STEP 4: 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.
[code]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
……..
……..
}[/code]
HTML Data Binding
Using np-repeat directive bind the JSON data to HTML template.
[code]
<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>
[/code]
newsFeed.php
Here you have to implement database connection and get the user information in JSON format.
[code]{"updates": [
{
"user_id": "1",
"name": "Mehul Prajpati",
"profile_pic": "user1.png",
"update_id": "62",
"user_update": "The Wall Script http://www.whatacode.com",
"comments": [
//Comments Data
]
},
{
"user_id": "3",
"name": "Mohnish Vaishnav",
"profile_pic": "user10.jpg",
"update_id": "50",
"user_update": "Best Android Tutor http://www.androidcoursemumbai.in",
"comments": [
//Comments Data
]
}
]}[/code]
2.1) Wall Feed Update #Angular
Implement Angular expressions based on about JSON objects.
[code]<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>
[/code]
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)
[code]$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);
}
});
}
}[/code]
HTML Code
Using ng-click call the controller function, here $index is referred to data set object.
[code]<a href="#delete{{data.update_id}}" class="feedDelete" ng-click="deleteFeed(data.update_id, $index)">X</a>[/code]
Comment HTML
Toggling comment form on comment link, here changing the commentForm value based on clicks.
[code]
<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>
[/code]
Comment Toggle Function
Change commentForm value , focusing the input after 200 milli seconds.
[code]$scope.commentForm = {};
$scope.commentToggle=function(index)
{
$scope.commentForm[index] = !$scope.commentForm[index];
// Comment Input focus
$timeout(function () {
document.getElementById(‘commenInput’+index).focus();
}, 200);
}[/code]
Comments JSON
newsFeed.php will generate following JSON.
[code]{"updates": [
{
"user_id": "1",
"name": "Mehul Prajapati",
"profile_pic": "user1.png",
"update_id": "62",
"user_update": "The Wall Script http://www.whatacode.com",
"comments": [{
"com_id": "62",
"uid_fk": "80",
"comment": "olx",
"name": "ramesh gandhi",
"profile_pic": "user80.jpg"
},
{
"com_id": "72",
"uid_fk": "221",
"comment": "its birthday",
"name": "karma",
"profile_pic": "user221.jpg"
}]
}
]
}[/code]
Comment Binding Data
Binding data with comments HTML grid.
[code]
<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>
[/code]
Delete Comment
Delete function, this will send updateID and commentID values to deleteComment.php
[code]// 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);
}
});
}
}[/code]
Delete Comment HTML
Using ng-click button triggering to deleteComment function.
[code]<a href="#{{data.update_id}}{{$index}}" class="commetDelete" ng-click="deleteComment($index, $parent.$index, data.update_id, commentData.com_id)">X</a>[/code]
Update Comment
Comment submit using JavaScript push function, appending data in comments grid.
[code]// 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();
});
}
}[/code]
Update Comment HTML
[code]
<div class="feedCommentForm" ng-show="commentForm[$index]">
<textarea class="commentInput" id="commenInput{{$index}}" ng-model="commentSubmitData.commentValue" ></textarea>
<input type="submit" value="Comment" class="commentSubmit" ng-click="updateComment(commentSubmitData, $index, data.update_id)"/>
</div>
[/code]
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.
[code]//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();
});
}
}[/code]
Wall Update Form
Using Angular ng-click directive, submit action is triggered to updateFeed()
[code]
<form>
<textarea ng-model="feedValue" id="updateBox" ></textarea>
<input type="submit" value="Post" id="wallPost" ng-click="updateFeed()" />
</form>
[/code]
Text to Link Filter
Using regular expression, converting test to link. Here $sce means strict contextual escaping services to AngularJS.
[code]var app=angular.module("myApp",[]);
// Text to link filter
app.filter(‘textToLink’, function ($sce)
{
var urlReg = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/gi;
return function (text)
{
var htmlData= text.replace(urlReg, ‘<a target="_blank" href="$&">$&</a>’);
return $sce.trustAsHtml(htmlData);
};
});
app.controller(‘myWall’, function($scope, $http, $timeout)
{
// Wall control code.
};[/code]
Applying Filter to Data Objects
Just replace HTML code in following way.
[code]<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>
[/code]
So finally our Facebook Wall System is complete and ready to run.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Angular Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.
5. IOS Training Institute in Mumbai.