jQuery Vs AngularJs

JQuery:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jQuery features:

 

1. Easily manipulate the contents of a webpage
2. Apply styles to make UI more attractive
3. Easy DOM traversal
4. Effects and animation
5. Simple to make AJAX calls
6. Events
7. Extensibility
8. Core functionality

1.Easily manipulate the contents of a webpage

Provides functions for editing and changing documents contents and working with CSS data such as positioning info.

2.User Interface

Provides an official plug-in with commonly used interface widgets, like slider controls, progress bars, accordions and more..

3.DOM Traversal

Provides functions for finding content in documents and navigating amount the contents of the document.

Example

<p id=“”foo>This is a paragraph of text with a
<a href=“/path/to/another/page.html”>link</a></p>

 

4.Effects and animation

Provides functions for creating basic animations and effects, such as hiding and showing elements and moving objects  around.

5.AJAX calls

Provides utilities for working with Ajax, such as loading contents from pages and dealing with JSON data.

6.Events

Simplifies working with the modern DOM events and provides common event helper functions

7.Extensibility

Enables the construction of jQuery plug-ins that enhance the functionality of the base library.

8.Core functionality

Implements core jQuery functions as well as commonly used utilities.

Example:

$.trim();
$.trim( ”    Extra whitespace here   ” );
It’s returns “Extra whitespace here”.

AngularJS

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write.

AngularJS features:

1. Two-Way data binding
2. Dependency Injection
3. Deep Linking
4. MVC-based Pattern
5. Full Testing Environment
6. Directives
7. Expressions
8. Single page application
9. Form Validation
10. REST friendly
11. Localisation
12. Template
13. Server Communication

 

The Major features of AngularJs:

1. One way data binding Vs Two way data binding.

One way data binding:

jQuery template system bind data in only one direction: they merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected  in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.

One way data binding example:

Link:

 

Two-Way Data binding:

Data-binding in Angular apps is the automatic synchronization of data between model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. In two-way data binding, any change made in the view will reflect in model, similarly changes made in the model will reflect in the view. It is a two way process.

Angular ng-model directive to create a data binding process.

Two way binding  example:

Link:

 

2.Dependency injection:

Dependency injection is one of AngularJS’s best patterns. It makes testing much simpler, as well as making it more clear upon which any particular object depends. AngularJS is very flexible on how things can be injected.

 

3.Deep linking:

Angular ngRoute module provides routing and deep linking services and directives for angular app.

Deep linking allows to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Example:

angular.module(‘MyApp’).config([‘$routeProvider’, Routes]);

4.MVC Architecture:

Model

The model is where your data are. Either the data we are talking about can be a static data or dynamically fetched from a data source, tucked in a server that is miles away from the client, using JSON.

A model comprises of a simple JavaScript object called the scope. Tied to a controller, the model object receives the data (from the source) and delivers it to a view (HTML).

In the above script, the $scope is an object in the model. See how it is encapsulated inside the controller() method.

View

In Angular, the view comprises of HTML elements and directives. This is the section of application, which is visible to users (using a browser). Other than markups, every view has as an expression (with curly braces), which is tied up to the scope object.

The above piece of markup, also known as Template in Angular, when bound, complied and loaded on the browser is then called the view.

Controller

The controller actually controls the entire business logic of your application. The initial stage is set here, that is, it initializes and registers the application by creating a new Angular Module.

4.Testing:

The AngularJS team feels very strongly that any code written in JavaScript needs to come with a strong set of tests. They have designed AngularJS with testability in mind, so that it makes testing your AngularJS applications as easy as possible. So there’s no excuse for not doing it.

5.Directives:

Angular Directives are attributes applied in the View. Attached to HTML elements, the directives augment the elements with new behaviors. Did you see the above examples, each element has directives, prefixed with ng-. Whenever we attach a directive with an element, it tells AngularJS that it is a part of Angular app and Angular treats it that way.

6.Expressions:

Angular Expressions are JavaScript like expressions, however with lots of difference. Written inside two curly braces, these expressions will bind Angular application data to HTML elements.

SINGLE PAGE APPLICATION

Single page application is a web application or website that fits on single web page with the goal of providing a more fluid user experience similar to a desktop application. In a SPA, either all necessary code – HTML, JavaScript and CSS – is retrieved with a single page load.

The page does not reload at any point in the process,nor does control transfer to another page, although the location hash can be used to provide the perception and navigability of separate logical pages in the application.  

Pros:

1. No page refresh
2. When you are using SPA, you don’t need to refresh the whole page, just load the part of the page which needs to be changed. Angular allows you to pre-load and cache all your pages, so you don’t need extra requests to download them.
3. Better user experience
4. SPA feels like a native application: fast and responsive.
5. Ability to work offline

 

Even if user loses internet connection, SPA can still work because all the pages are already loaded.

Cons

1. More complex to build
2. You need to write pretty much javascript, handle shared state between pages, manage permissions, etc.
3. To index your SPA app, search engine crawlers should be able to execute javascript. Only recently Google and Bing started indexing Ajax-based pages by executing JavaScript during crawling. You need to create static HTML snapshots specially for search engines.
4. Initial load is slow
5. SPA needs to download more resources when you open it.

Where to use jQuery and  where to use AngularJS?

Most of the time, people fail to comprehend the real value of these technologies during application development. AngularJS is best suited for the web application development as it works on the HTML code and JSON data which helps in developing for interactive and robust applications but using the same for a simple website development results in slow loading and quite erratic websites.

While jQuery is a fast and feature-rich language which has a a commendable JavaScript library and a great tool for creating feature-rich websites. It has in-built features such as HTML document traversal, event handling, manipulation, animation and Ajax support and others which make it easier and simpler to develop hardcore websites. Therefore before utilizing any of these highly intuitive and robust languages, it is necessary to frame a sound approach dedicated either to develop an advanced web application or website development.

Sasikala,
Junior Developer,
Mallow Technologies.