AngularJS vs jQuery

agvsjq
Should you be using AngularJS or jQuery? Today we will talk about the difference between the two.

Let’s start by going over what AngularJS really is.
AngularJS is built and maintained by dedicated (and highly talented) Google engineers. It is not a framework made by hobbyists in the open source community. AngularJS is a flexible JavaScript MVC framework for building rich client-side applications. AngularJS is a framework, not a JavaScript library like jQuery. You still may need to have a server-side backend, but most of the user-interactivity logic will be delegated to the client-side. Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.


AngularJS has the following features:

  1. Two way data binding
  2. MVW pattern (MVC-ish)
  3. Template
  4. Custom-directive (reusable components, custom markup)
  5. REST-friendly
  6. Deep Linking (set up a link for any dynamic page)
  7. Form Validation
  8. Server Communication
  9. Localization
  10. Dependency injection
  11. Full testing environment (both unit, e2e)

If you are developing a heavy web applications, AngularJS is for you. AngularJS can use jQuery if it’s present in your app when the application is being bootstrapped. If jQuery is not present in your script path, AngularJS falls back to its own implementation of the subset of jQuery that we call jQLite.

Web Applications (not Websites)

When you build a website using AngularJS, a major question to ask yourself is: Is this a website that requires valid HTML or is this a web application that focuses on functionality more than markup? AngularJS works with templated HTML code and JSON data. The major impact of the approach of how AngularJS and all other client-side MVC frameworks handle its logic means that structure and data are designed to be separated from each other. This results in templates (HTML) and data (which is fetched as JSON) bound together to provide a working and interactive webpage. Hence the markup fetched from the server is pointless on its own without AngularJS parsing it and you need to have a client that supports JavaScript. Therefore, search engines need to work extra in order to get a full representation of the data-so for now it’s not a good idea to use AngularJS if you’re building a website that relies on search engines to function. So if you’re building a web application, then AngularJS will be a great tool to do the job.

Now, let’s talk about jQuery. jQuery is a free, fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler. jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents.
The jQuery library contains the following features:
  1. HTML/DOM manipulation
  2. CSS manipulation
  3. HTML event methods
  4. Effects and animations
  5. AJAX
  6. Utilities
And to top it off, jQuery has plugins for almost any task out there.

AngularJS Example

index.html

Below is a live example of AngularJS at work. Example:

jQuery Example

index.html

Below is a live example of jQuery at work. Example:

I hope this answers some, if not all of your questions about the difference between AngularJS and jQuery.Thanks for reading!

Tagged with:

View all contributions by

Website: http://rrpowered.com

Related Articles

Advertisement

Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates

FEEDBACK2

  1. Piotr Nalepa
    1

    Well, it’s not good example to show how we can replace jQuery with AngularJS. I would not recommend using AngularJS for such things like you showed in the example above.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">