Let's start with the very first difference, Library and Framework.

AngularJS is a JavaScript framework, not a JavaScript library like jQuery.



Let's have a look at what these terms actually mean.

Library

A library is nothing but just a collection of functions that are useful in web applications to do tasks like DOM manipulation and HTTP requests, for example jQuery and underscore.js. Code that we write will be in charge and calls into the library.

Framework

The framework actually holds the common functionality of the application, it calls code written by the developer and makes things happens. In this case, the framework is in full charge of our code for example, backbone.js and angularjs.

Let's check the features of AngularJS and jQuery.

AngularJS Features

jQuery Features

Comparison (AngularJS and jQuery)

jQuery and AngularJS have some common features like Unit test runner, animation support, AJAX/JSONP but they also have some differences.

We can prefer AngularJS only if we are developing a heavy web application.

jQuery Example


  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>jquery example</title>
  5. <script src="js/jquery-1.11.2.js"></script>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. $(function () {
  10. $(document).keyup(function () {
  11. var name = $("#txt").val();
  12. $("#lbl").html(name);
  13. });
  14. });
  15. </script>
  16. <div>
  17. Name <input type="text" id="txt" placeholder="please enter name" />
  18. <h1 ><b id="lbl"></b></h1>
  19. </div>
  20. </body>
  21. </html>


AngularJS Example
  1. <!DOCTYPE html>
  2. <html data-ng-app>
  3. <head><title>ang example</title>
  4. <script src="js/angular.min.js"></script>
  5. </head>
  6. <body>
  7. <div>
  8. Name <input type="text" placeholder="please enter name" data-ng-model="name" />
  9. <h1>{{name}}</h1>
  10. </div>
  11. </body>
  12. </html>



Thanks!