Post
Ask Question

AngularJS Vs jQuery

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

  • Data Binding

  • Routing

  • Unit Testing

  • Dependency Injection

  • We have reusable component(Directives, Custom Directives)

  • Deep linking

  • Form Validation

  • Animation support

jQuery Features

  • DOM manipulation

  • Event Methods

  • Effects and animations

  • AJAX calls

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.

  • AngularJS came with RESTful API whereas we don't have that in jQuery.

  • AngularJS supports the MVC pattern whereas jQuery doesn't.

  • AngularJS has the feature called Two Way Data Binding whereas we don't have that in jQuery.

  • Deep Linking Routing is supported by AngularJS whereas jQuery doesn't.

  • The AngularJS file size is quite heavier than that of the jQuery file size.

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!


Similar Articles