Hello readers, in this tutorial, we will understand the differences between the AngularJS and the jQuery libraries.
1. Introduction
For this tutorial, we will be explaining the differences and the important features of both technologies. It is very simple, but before moving further let’s take a look at AngularJS, jQuery, and their features.
1.1 What is AngularJS?
Angular is a JavaScript MVC or Model-View-Controller framework developed by Google that lets developers build well structured, easily testable, and maintainable front-end applications. But before we start creating a real application using the angular library, let us see what the important parts of an angular application are.
1.1.1 Templates
In Angular, a template is an HTML with added markups. The angular library compiles the templates and renders the resultant HTML page.
1.1.2 Directives
Directives are the markers (i.e. attributes) on a DOM element that tell angular to attach a specific behavior to that DOM element or even transform the DOM element and its children. Most of the directives in the angular library start with the ng. The directives consist of the following parts:
ng-app: Theng-appdirective is a starting point. If the AngularJS framework finds theng-appdirective anywhere in theHTMLdocument, it bootstraps (i.e. initializes) itself and compiles theHTMLtemplateng-model: Theng-modeldirective binds anHTMLelement to a property on the$scopeobject. It also binds the values of AngularJS application data to theHTMLinput controls.ng-bind: Theng-binddirective binds the AngularJS application data to theHTMLtags
1.1.3 Expressions
An expression is like a JavaScript code which is usually wrapped inside the double curly braces such as {{ expression }}. AngularJS library evaluates the expression and produces a result.
The following table lists all the important concepts in the Angular library.
| Concept | Description |
|---|---|
| Template | An HTML with additional markups. |
| Directives | Extend the HTML with the custom attributes (or markers) and elements. |
| Model | It is the data shown to the user in the view with which the user interacts. |
| Scope | A Scope is a context where the model is stored so that controllers, directives, and expressions can access it. |
| Expressions | An expression executes the JavaScript code inside the double curly braces such as {{ expression }}. |
| Compiler | The Compiler parses the template and instantiates the directives and expressions. |
| Filter | A Filter formats the value of an expression for display to the user. |
| Data Binding | This sync the data between the model and the view. |
| Controller | Controller maintains the application data and business logic. |
| Module | Module is the container for different parts of an application including the controllers, services, filters, and directives which configures the Injector. |
| Service | A Service is reusable business logic which is independent of the views. |
1.2 What is jQuery?
jQuery is nothing but a JavaScript library that comes with rich functionalities. It’s small and faster than many JavaScript code written by an average web developer. By using jQuery developers can write less code and do more things, it makes web developer’s task very easy. In simple word, jQuery is a collection of several useful methods, which can be used to accomplish many common tasks in JavaScript. A couple of lines of jQuery code can do things which need too many JavaScript lines to accomplish.
The true power of jQuery comes from its CSS-like selector, which allows it to select any element from DOM and modify, update or manipulate it. Developers can use jQuery to do cool animations like fade in or fade out. They can also change the CSS class of a component dynamically e.g. making a component active or inactive. I have used this technique to implement tabbed UI in HTML. I can vouch for jQuery that once developers start using it, they will never go back to plain old JavaScript as jQuery is clear, concise, and powerful.
1.2.1 What we can handle using jQuery?
jQuery is very powerful and it provides methods and API to do almost all kinds of thing they can do with the JavaScript. jQuery is particularly good in the following area:
- HTML and DOM manipulation
- CSS manipulation
- HTML event methods
- AJAX
- Utilities
By using jQuery developers can add a new element into DOM, update existing element from DOM, and can easily remove any element. jQuery’s powerful class and id selector allow developers to select any HTML element or group of elements for the selective manipulation. jQuery also allows developers to select and modify the attributes from any HTML element in DOM.
2. AngularJS vs. jQuery Example
2.1 When to use jQuery or AngularJS?
Using the Model-View-Controller architecture, the Angular framework separates a web application into a simple and yet manageable structure, which comprises of “views”, “models” and “controllers”. The AngularJS library provides the in-build directives (or attributes) to extend the HTML inside a web page. When developers attach these directives to the HTML elements and attributes, it creates a dynamic web-page with very little coding.
While jQuery is a fast and feature-rich language which has a commendable JavaScript library and a great tool for creating the feature-rich web-pages. It has inbuilt features such as event handling, DOM manipulation, animation, and AJAX support for making the feature-rich web-pages.
Thus before utilizing any of these highly robust languages, it is necessary to frame a sound approach dedicated to either develop an advanced web application or website development.
2.2 Code Comparison
From the developer’s perspective, the code comparison is as follows. In AngularJS, we define a model <name> using the <ng-model> directive. The following code snippet shows how this is achieved.
index.jsp
<div ng-app=""> <p> Enter your name: <input type="text" ng-model="user_name"> </p> <p> <span id="greetingsText" class="cssStyling">Welcome <span ng-bind = "user_name"></span> !!</span> </p> </div>
While in jQuery, we define a simple function to show the sample text on an event trigger. Let’s see a simple code snippet to understand the implementation of jQuery.
index.js
$(document).ready(function() {
$("#demoBtn").click(function() {
$("#bClick").html("<h2 class=\"text-success\">Hurry!</h2><h3 class=\"text-secondary\">Welcome to the wonderful world of <em>jQuery</em></h3>");
});
});
2.3 jQuery with Angular library
There are scenarios where developers want to integrate the Angular application with the jQuery library. Developers can achieve this by either making the application bootstrapped or using a subset of jQuery (i.e. jqLite) in the Angular framework.
That’s all for this post. Happy Learning!!
3. Conclusion
In this tutorial, developers learned the real comparison of AngularJS with jQuery. jQuery is excellently suited for DOM manipulation while AngularJS is most suited for web application development. Developers can download the sample application as an Eclipse project in the Downloads section.
4. Download the Eclipse Project
This was a tutorial of Angular vs. jQuery.
You can download the full source code of this example here: Angular_vs_jQuery
What is DOM?
DOM is known as “Document Object Model”.
This is probably the worst case of trying to compare something to date. There are so many things wrong with this simple text, that I just think of where to start. Let’s try: – “using a subset of jQuery (i.e. jqLite) in the Angular framework” – corrent; – “can achieve this by either making the application bootstrapped” – no! AngularJS will use the full jQuery the moment it detects it. For that to happen use just have to include/require jQuery before AnguarJS and you’re set. No need to go through the whole bootstrapping process, just use what you need and… Read more »
Sure, Mor. We will try to update the article.
I agree this is oversimplified. From this I can’t get a comparison between the two.