Simple Like and Dislike Button Using AngularJS

Submitted by: 
Language: 
Visitors have accessed this post 5131 times.

In this tutorial, we will create a Simple Like and Dislike Using AngularJs. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. It is mostly used by other well known site for creating a template. So let's take a look.

Creating a form

This is where we will display all the data, to do that just copy/paste the code below

  1. <!DOCTYPE html>
  2. <html lang = "en">
  3. <head>
  4. <meta charset = "UTF-8" name = "viewport" content = "width-device=width, initial-scale=1"/>
  5. <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
  6. <script src = "js/angular.js"></script>
  7. <script src = "js/script.js"></script>
  8. </head>
  9. <body ng-app = "simModule">
  10. <nav class = "navbar navbar-default">
  11. <div class = "container-fluid">
  12. <a class = "navbar-brand" href = "<a href="https://www.sourcecodester.com">Sourcecodester</a>
  13. " rel="nofollow">https://www.sourcecodester.com">Sourcecodester</a>
  14. </a> </div>
  15. </nav>
  16. <div class = "row">
  17. <div class = "col-md-3"></div>
  18. <div class = "col-md-6 well" ng-controller = "simController">
  19. <h3 class = "text-primary">Simple Like and Dislike Using AngularJS</h3>
  20. <hr style = "border-top:1px dotted #000;"/>
  21. <br /><br />
  22. <table class = "table table-bordered">
  23. <tr>
  24. <th>Programming Language</th>
  25. <th>Like</th>
  26. <th>Dislike</th>
  27. <th>Action</th>
  28. </tr>
  29. </thead>
  30. <tr ng-repeat="pLang in pLangs">
  31. <td>{{pLang.name}}</td>
  32. <td>{{pLang.Likes}}</td>
  33. <td>{{pLang.Dislikes}}</td>
  34. <td><center><button class = "btn btn-primary" ng-click = "incrementUp(pLang)"><span class = "glyphicon glyphicon-thumbs-up"></span></button> | <button class = "btn btn-danger" ng-click = "decrementDown(pLang)"><span class = "glyphicon glyphicon-thumbs-down"></span></button></center></td>
  35. </tr>
  36. </tbody>
  37. </table>
  38. </div>
  39. </div>
  40. </body>
  41. </html>

ng-app tells the AngularJS that this the root element of AngularJS application
ng-controller it initiate the function that build by an AngularJS application

Creating the script for calling the AngularJS function

This is where the angularjs function will be called to utilize the request of the user

  1. var myApp = angular.module("simModule", [])
  2. .controller("simController" , function($scope){
  3. var pLangs =[
  4. {name: "C", Likes: 0, Dislikes: 0},
  5. {name: "C++", Likes: 0, Dislikes: 0},
  6. {name: "C#", Likes: 0, Dislikes: 0},
  7. {name: "Java", Likes: 0, Dislikes: 0},
  8. {name: "HTML", Likes: 0, Dislikes: 0},
  9. {name: "PHP", Likes: 0, Dislikes: 0},
  10. {name: "VB.NET", Likes: 0, Dislikes: 0},
  11. {name: "Python", Likes: 0, Dislikes: 0},
  12. {name: "Pearl", Likes: 0, Dislikes: 0},
  13. {name: "Ruby", Likes: 0, Dislikes: 0},
  14. ];
  15.  
  16. $scope.pLangs = pLangs;
  17.  
  18. $scope.incrementUp = function(pLang){
  19. pLang.Likes++;
  20. }
  21.  
  22. $scope.decrementDown = function(pLang){
  23. pLang.Dislikes++;
  24. }
  25. });

The code above create a AngularJS module to envelop it to the targeted element in the HTML, then it calls out the common function through the AngularJS controller
$scope.incrementUp function will increment the Like button when clicked
$scope.decrementDown function will decrement the Dislike button when clicked

More on AngularJS: Learn and Understand AngularJS

There you have it we created the simple like and dislike applcation by using AngularJS framework. I hope that this tutorial help you to your projects. For more updates and tutorials just kindly visit this site. Enjoy Coding!!


Tags: 

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.