Difference between jQuery and Angular  

I did several projects where we kept all the business logic and the HTML templates on the server side and the HTML was rendered on the server itself. We just used jQuery on the client side to do the event handling, DOM traversal and manipulation, Ajax, and animation-like things. This kind of architecture means a thick server and a thin client.

Now we do projects using Angular where the client is thick. Most of the business logic and the HTML templates are written using Angular and the HTML is rendered on the client making it really fast. We seldom use jQuery. But if we need to use it, we can easily make jQuery calls from our Angular code. Angular provides the API to let us communicate with the server using REST where we simply do the database operations.

In jQuery, you write imperative code to register/bind event handlers to the DOM elements and use 'selectors' to search the elements. When an event occurs, this 'imperative' code is executed that updates the DOM. Angular encourages declarative style.

Example: jQuery imperative code

Display/Hide the content based on the checkbox state

<input id="toggleDisplay" type="checkbox"/>
<div id="content">Tick the checkbox to display the content. Uncheck the box to hide it.</div>


$(function() {
    function toggleCheckBox() {
        var isChecked = $('#toggleDisplay').is(':checked');
        var content = $('#content');
        if (isChecked) {
            content.show();
        } else {
            content.hide();
        }
    }
    $('#toggleDisplay').change(function() {
        toggleCheckBox();
    }); 
    toggleCheckBox();
});

Rewriting jQuery code using AngularJS declarative style

<input ng-model="toggleDisplay" type="checkbox"/>
<div ng-show="toggleDisplay">
    Tick the checkbox to display the content. Uncheck the box to hide it.
</div>

The ng-show directive shows or hides the content of the div element based on the toggleDisplay expression. The ng-model specifies the model property that is tied with the checkbox input element. In other words, the ng-model binds the value of the input box control to the variable, toggleDisplay. Note that the ng-model supports two-way data binding. The value of toggleDisplay variable would toggle when the checkbox is set to checked state from unchecked state and vice-versa and it is this value that helps ng-show directive to decide whether to display or hide the content.

The DOM (Document Object Model) is a tree-structure representation of all the elements of a web-page. jQuery, at its core, is a DOM manipulation library. jQuery lets you search, select, and manipulate the DOM elements in a simple way. For example, you can search an element in a document with a certain property, for example get all elements with a div tag and change its color attribute to blue. You can also use jQuery to handle events like button click, create animations, and develop Ajax apps.

On the other hand, Angular is a full-fledged client-side framework giving you a rich set of tools to write web apps and allows you to divide your app into components. It has a number of cool features such as MVC, data binding, and dependency injection. It focuses on separation of concerns, unit testing and end-to-end testing, which facilitates test-driven development.

In Angular, you write a template using HTML5 code. Angular reads in your HTML5-based web page template and compiles it into a new web page using its built in compiler. This means that in Angular, your web page is code to be compiled. But to jQuery, your web page is a DOM to be manipulated.

In fact, jQuery and Angular are two different things and it is like comparing apples with oranges. Angular doesn't replace jQuery. If jQuery.js is present on your web page, Angular will use it automatically. But if the full blown jQuery version is not there, Angular has jQuery Lite built in, which is a trim down version, and allows you to perform basic DOM manipulation.

It is really tempting for the new Angular developers to think something like this: I have this piece of DOM and I can easily use jQuery that operates on this DOM and then add the models and controllers on top of that. This is certainly not the way to do the things the Angular way. In fact, you must start from the ground up with Angular basic principles in mind. They are separation of concerns, declarative view/template, model layer separated from view, data binding, and dependency injection.

When using Angular, you design your app keeping in mind the Angular architecture. Remember that a single page application is just not a web page but a complete application. In addition to thinking like a client-side developer, the Angular developer should start thinking in terms of server-side development too. The developer has to design an application in such a way that each of its components should be complete in itself, easily extensible, and testable.

In the beginning, this clean separation of concerns seems like a little hard to do. But when the app becomes large, it pays off tremendously. You will find the code is convenient to maintain and easy to test and debug.