In this post, I am going to teach you How To Create Like & Dislike Button in AngularJS. today’s world, almost everybody surf Facebook. When we post an image, then our friend likes and dislikes it and we are going to create these type of button in this post, with the help of an AngularJS. as we know AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. many developers like to work on AngularJS.
Creating Index Page
in this step, we are going to create an index page and as we all know if working on AngularJS, then its library file should be linked to our page. You can download library file from Angularjs official website and if you do not want to download it, then use it’s CDN.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>How To Create Like & Dislike Button in AngularJS</title>
<meta charset = "UTF-8" name = "viewport" content = "width-device=width, initial-scale=1"/>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
<style type="text/css">
body{
margin-top:15px;
font-size:20px;
}
.well{
-webkit-box-shadow: 9px 7px 52px -6px rgba(133,133,133,1);
-moz-box-shadow: 9px 7px 52px -6px rgba(133,133,133,1);
box-shadow: 9px 7px 52px -6px rgba(133,133,133,1);
background-color: rgb(251, 188, 5);
}
</style>
</head>
<body ng-app = "webModule">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well" ng-controller = "webController">
<br />
<table class ="table">
<thead>
<tr>
<th>Websites</th>
<th>Like</th>
<th>Dislike</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="website in website">
<td>{{website.name}}</td>
<td>{{website.Likes}}</td>
<td>{{website.Dislikes}}</td>
<td>
<button class = "" ng-click = "incrementUp(website)">
<img src="img/like.png" width="25px">
</button>
<button class = "" ng-click = "decrementDown(website)">
<img src="img/dislike.png" width="25px">
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src = "js/angular.js"></script>
<script src = "js/script.js"></script>
</body>
</html>
Creating a Script File
in this step we are going to create script.js file to perform the like and dislike button using AngularJS function
var myApp = angular.module("webModule", [])
.controller("webController" , function($scope){
var website =[
{name: "GOOGLE", Likes: 0, Dislikes: 0},
{name: "FACEBOOK", Likes: 0, Dislikes: 0},
{name: "TWITTER", Likes: 0, Dislikes: 0},
{name: "PINTEREST", Likes: 0, Dislikes: 0},
{name: "TUMBLER", Likes: 0, Dislikes: 0},
{name: "INSTAGRAM", Likes: 0, Dislikes: 0},
{name: "MIDIUM", Likes: 0, Dislikes: 0},
{name: "QOURA", Likes: 0, Dislikes: 0},
{name: "REDDDIT", Likes: 0, Dislikes: 0},
];
$scope.website = website;
$scope.incrementUp = function(website){
website.Likes++;
}
$scope.decrementDown = function(website){
website.Dislikes++;
}
});
$scope.incrementUp This Function will increment the Like button when user clicked.
$scope.decrementDown This Function will decrement the Dislike button when user clicked.
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.