Angular.js

AngularJS vs jQuery Example

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: The ng-app directive is a starting point. If the AngularJS framework finds the ng-app directive anywhere in the HTML document, it bootstraps (i.e. initializes) itself and compiles the HTML template
  • ng-model: The ng-model directive binds an HTML element to a property on the $scope object. It also binds the values of AngularJS application data to the HTML input controls.
  • ng-bind: The ng-bind directive binds the AngularJS application data to the HTML tags

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.

ConceptDescription
TemplateAn HTML with additional markups.
DirectivesExtend the HTML with the custom attributes (or markers) and elements.
ModelIt is the data shown to the user in the view with which the user interacts.
ScopeA Scope is a context where the model is stored so that controllers, directives, and expressions can access it.
ExpressionsAn expression executes the JavaScript code inside the double curly braces such as {{ expression }}.
CompilerThe Compiler parses the template and instantiates the directives and expressions.
FilterA Filter formats the value of an expression for display to the user.
Data BindingThis sync the data between the model and the view.
ControllerController maintains the application data and business logic.
ModuleModule is the container for different parts of an application including the controllers, services, filters, and directives which configures the Injector.
ServiceA 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.

Download
You can download the full source code of this example here: Angular_vs_jQuery

Yatin

The author is graduated in Electronics & Telecommunication. During his studies, he has been involved with a significant number of projects ranging from programming and software engineering to telecommunications analysis. He works as a technical lead in the information technology sector where he is primarily involved with projects based on Java/J2EE technologies platform and novel UI technologies.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Hien
Hien
6 years ago

What is DOM?

Mor
Mor
6 years ago

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 »

Anthonya
Anthonya
6 years ago
Reply to  Yatin

I agree this is oversimplified. From this I can’t get a comparison between the two.

Back to top button