Post
Ask Question

AngularJS vs JQuery: Part 2

This is my second article on AngularJS where we’ll compare both AngularJS VS jQuery. Before that, I suggest you visit my first article to get an overview of AngularJS:

Getting Started With AngularJS: Part 1
compare

Let's first check the features of AngularJS and jQuery.

AngularJS
  • Data Binding
  • Routing
  • Unit Testing
  • Dependency Injection
  • We have reusable component (Directives, Custom Directives)
  • Deep linking
  • Form Validation
  • Animation support
JQuery
  • DOM manipulation
  • Event Methods
  • Effects and animations
  • AJAX calls
AngularJS and jQuery

JQuery and AngularJS have lots of common features too but now here's some comparison:
  1. AngularJS is mainly used to create SPA application whereas JQuery do not.
  2. AngularJS supports MVC pattern to create a web app at client side whereas JQuery is not allowed to write an application code into MVC pattern.
  3. AngularJS came with RESTFul API whereas JQuery is not allowed to do that.
  4. AngularJS is heavier then JQuery library file size.

    diffrence

  5. Deep Linking Routing is supported by AngularJS whereas jQuery doesn't.
  6. In AngularJS we have to write short code to do the same task like:

    If we need to get the value from a location or a control to different then it is very simple.

    By AngularJS

    Firstly, I just made the body tag as ng-app=”” for declaring AngularJS app, then in input type declared an ng-model=”abc” so that model can be used anywhere in this Angular app as in the following image:

    code

    Code
    1. <html xmlns="http://www.w3.org/1999/xhtml">  
    2.     <head runat="server">  
    3.         <title></title>  
    4.         <script src="Scripts/angular.min.js">  
    5.             </script>  
    6.             </head>  
    7.             <body ng-app="">  
    8.                 <form id="form1" runat="server">  
    9.                     <div>  
    10.                         <input ng-model="abc" />  
    11.                         <br/> Hello {{abc}} !!</br>  
    12.                     </div>  
    13.              </form>  
    14.          </body>  
    15.   
    16.      </html>  
    Output

    output
    By JQuery

    In JQuery, firstly I need to call a function on ready event of document object, then I’ll try  to find a textbox object with the id “#text1” and bind a function to this textbox keyup event. When it’ll call then I will get the value of this textbox and will give it to “#text2” as in the following image:

    code

    Code
    1. <!DOCTYPEhtml>  
    2. <html>  
    3.   
    4. <head>  
    5.     <title></title>  
    6.     <meta charset="utf-8" />  
    7.     <script src="Scripts/jquery-1.10.2.min.js">  
    8.         </script>  
    9.         <script type="text/javascript">  
    10.             $(document).ready(function () { $("#text1").keyup(function () { var a = $("#text1").val(); $("#text2").val(a); }); })  
    11.             </script>  
    12. </head>  
    13.   
    14. <body>  
    15.     <input id="text1" />  
    16.     <br/>  
    17.     <input id="text2" />  
    18. </body>  
    19.   
    20. </html>  
    Output by JQuery

    output

  7. AngularJS has the best way for data binding which is called “Two Way Data Binding," but JQuery does not allow “Two Way Data Binding," so if we want to do that the sameway  then we have to write extra code for that. Let’s see an example:

    By AngularJS

    No need to write any new code, just use the same model name into the     other control object where we need to apply two way data binding. In the following example I just used the same “abc” model to different text or <input />. Now run this application and you can see see that change into any textbox value will automatically update to both source to destination or may be destination to source that you can see in output image:

    code

    Code:
    1. <html xmlns="http://www.w3.org/1999/xhtml">  
    2.     <head runat="server">  
    3.         <title></title>  
    4.         <script src="Scripts/angular.min.js">  
    5.             </script>  
    6.   
    7.             </head>  
    8.             <body ng-app="">  
    9.                 <form id="form1" runat="server">  
    10.                     <div>  
    11.                         <input ng-model="abc" />  
    12.                         <br/> Hello {{abc}} !!</br>  
    13.                         <input ng-model="abc" />  
    14.                         <br/>  
    15.                     </div>  
    16.              </form>  
    17.           </body>  
    18.      </html>  
    Output by AngularJS

    output

    ByJQuery

    InJQuery we need to write extra code to bind both controls with each other. It can't be possible with it because JQuery doesn’t allow that type of binding for two way Data Binding. So follow the image and code then you too try to do the same.

    code

    Code
    1. <html>  
    2.   
    3. <head>  
    4.     <title></title>  
    5.     <meta charset="utf-8" />  
    6.     <script src="Scripts/jquery-1.10.2.min.js">  
    7.         </script>  
    8.         <script type="text/javascript">  
    9.             $(document).ready(function ()  
    10.             {  
    11.              $("#text1").keyup(function ()   
    12.               {  
    13.                 var a = $("#text1").val(); $("#text2").val(a); }); $("#text2").keyup(function ()  
    14.                                                                          {   
    15.                  var a = $("#text2").val(); $("#text1").val(a);   
    16.              });   
    17.             })  
    18.             </script>  
    19. </head>  
    20.   
    21. <body>  
    22.     <input id="text1" />  
    23.     <br/>  
    24.     <input id="text2" />  
    25. </body>  
    26.   
    27. </html>  
    Output by     JQuery

    output

    Thanks for reading the article and stay tuned for upcoming articles.

    Connect (“Nitin Pandit”);


Similar Articles