A Quick Comparison Between AngularJS and JQuery

A comparison between AngularJS and JQuery is one of the noteworthy topic of present days. Most of the times developers get confused when to use JQuery and when to use AngularJS for their web application.

So, this is one of the most provisional study between the library and the framework. While JQuery is a library and AngularJS is the JavaScript framework however, it is unfair to go through a JQuery vs AngularJS comparative study because it is like comparison between Apples and Oranges.

In this blog I will tell you the dominance of both the technologies on each side.

JQuery library provides the features like HTML & CSS manipulation, AJAX & JSON support, Animation, Event handling, Cross Browser compatibility and the best part of JQuery is its a lightweight library.

On the other hand AngularJS works differently to create single page applications with the features provide like directives (extention to HTML), dependancy injection, MVC support, Two Way Data binding where JQuery has no binding structure, Restful API.

Yes however both are interdependent on one another but comparison between both of them are still comes up.

Lets take a simple example for difference between the code of JQuery and AngularJS:-

• JQuery code sample -

           <div>

                <label> Name: </label>

                <input type=”text” id=”input” />

           </div>

            <div>

                  <label> Output: </label>

                  <span id=”output” ></span>

             </div>

For Data Binding using jquery we have to create a funtion like :-

  (function(){

         //Data binding funtion

         $(‘#input’).keyup(function(event){

         $(‘#output’).html($(‘#input’).val());

         });

    })();

On the other hand in AngularJS for Data binding we just have to use “ng-model” directive, for example :-

• AngularJS code sample -

          <main ng-app=”myApp”>

              <div>

                  <label> Name: </label>

                  <input type=”text”  ng-model=”input” />

              </div>

              <div>

                  <label> Output: </label>

                  <span>{{ input }}</span>

              </div>

          </main>

There is another one more thing that is comes with out of the box in AngularJS where JQuery doesn’t offer any of these feature that is “Validation”.

In AngularJS to accessing angular form validation property we can

• Access the form : <form name>.<angular property>

• Access an input : <form name>.<input name>.<angular property>

There are different types of properties can be use, for example :

• $dirty

• $valid

• $invalid

• $pristine

• $touched

Syntax :

<p>Name:<br>
    <input type="text" name="name1" ng-model="name1" required>
    <span style="color:red" ng-show="myFormName.name1.$dirty && myFormName.name1.$invalid">
    <span ng-show="myFormName.name1.$error.required">Username is required.</span>
    </span>
</p>

By using these simple properties in AngularJS we can apply form validation but JQuery doesn’t offer these kind of feature but validation can also be possible using JQuery by using Validation Plugin or the third party plugin.

Outside of these differences and features, file size is also an important thing to consider. I mentioned in the beginning that JQuery is lightweight library so site that is based on JQuery library will always contain less file size in comparison to is the file that is based on AngularJS but which can be negligible.

Conclusion

After a view on AngularJS Framework and JQuery Library, comparing both is like compare Apples and Oranges. Both offer a satisfactory amount of funtionality.

JQuery is appropriate for DOM manipulation while AngularJS is suited for interactive projects. AngularJS provides powerful directives like ‘ng-repeat’ and other that help you to keep your project with less number of code. So after keeping in mind about optimization of our webiste the answer is AngularJS, but to add more functionality and to perform DOM manipulation on the website go with JQuery.