How is AngularJS different from jQuery

Question

I only know one js library and that is jQuery  But my other coders in the group are changing AngularJS as their default library in new project   I don t know anything about it  How is it different from jQuery  I already have a set of functions done for similar tasks in jQuery  Can I still use jQuery stuff with AngularJS

User · Accepted Answer

While Angular 1 was a framework  Angular 2 is a platform   ref    To developers  Angular2 provides some features beyond showing data on screen  For example  using angular2 cli tool can help you  pre-compile  your code and generate necessary javascript code  tree-shaking  to shrink the download size down to 35Kish     Angular2 emulated Shadow DOM   ref     This opens a door for server rendering that can address SEO issue and work with Nativescript etc that don t work on browsers    The official document site Day one keynote from ng-conf 2016 Resource links Original  Basically  jQuery is a great tool for you to manipulate and control DOM elements  If you only focus on DOM elements and no Data CRUD  like building a website not web application  jQuery is the one of the top tools   You can use AngularJS for this purpose as well     AngularJS is a framework  It has following features   Two way data binding MVW pattern  MVC-ish  Template Custom-directive  reusable components  custom markup  REST-friendly Deep Linking  set up a link for any dynamic page  Form Validation Server Communication Localization Dependency injection Full testing environment  both unit  e2e    check this presentation and this great introduction   Don t forget to read the official developer guide   Or learn it from these awesome video tutorials   If you want to watch more tutorial video  check out this post  Collection of best 60  AngularJS tutorials   You can use jQuery with AngularJS without any issue    In fact  AngularJS uses jQuery lite in it  which is a great tool   From FAQ     Does Angular use the jQuery library       Yes  Angular 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  Angular falls back to its own implementation of the   subset of jQuery that we call jQLite    However  don t try to use jQuery to modify the DOM in AngularJS controllers  do it in your directives   Update   Angular2 is released  Here is a great list of resource for starters

User · Answer

I want to add something regarding AngularJS difference with jQuery from a developer s perspective    In AngularJS you have to have a very structured view and approach on what you want to accomplish  It is scarcely following a linear fashion to complete a task  but rather  the exchanges between various objects take care of the requests and actions  which  then  is necessary as angular is an MVC-Based framework  It also requires an at least general blueprint of the finalized application  since coding depends much on how you want the interactions to be completed   jQuery is like a free poetry  you write lines and keep some relations and momentum appropriate for your task to be accomplished   Though  in Angular JS  you should follow some rules as well as keeping the momentum and relations proper  maybe it is more like classical Spencerian sonnet  a famous classical poet  whose poem is structural and tied to many rules   Compared against AngularJS  jQuery is more like a collection of codes and functions  which is  as already mentioned  great for DOM manipulation and fast-effect achievement   while AngularJS is a real framework which gives the developer the ability to build an enterprise web-application with a lot of data-binding and exchange within a superbly organized-routing and management   Furthermore  AngularJS has no dependency on jQuery to complete its task  It has two very superb features which are not found in jQuery in any sense   1- Angular JS teaches you how to CODE and accomplish a goal  not just accomplish a goal by any means  Worth to mention that AngularJS fully utilizes the core and heart of Javascripts and paves the way for you to incorporate in your app  the techniques such as DI  dependency-injection   To work with angularJS you should  or must  learn more elevated techniques of coding with Javascript   2- Angular JS is fully independent to handle directives and structure your app  you might then simply claim that jQuery can do the same  independence   but  indeed  AngularJS  as several times mentioned within the above lines  has independence in the most excellent possible structurally MVC-Based way    A last note is that  there is no war of Names  since it is far disturbing to be biased  or subjective  jQuery s magnitude and greatness has been proved  but their usages and limitations  of any framework or software  are the concerns of the discussion and similar debates around   Update   Using AngularJS is decisive as it is expensive in terms of implementation  but founds a strong base for future expansion  transformation and maintenance of the application  AngularJS is for the New World of Web  It is targeted toward building applications which are characterized by their least resource consumption  loading only necessary resources from the server   fast response time and high degree of maintainability and extendability wrapped around a structured system

User · Answer

Jquery  -  jQuery is a lightweight and feature-rich JavaScript Library that helps web developers by simplifying the usage of client-side scripting for web applications using JavaScript  It extensively simplifies using JavaScript on a website and it   s lightweight as well as fast   So  using jQuery  we can   easily manipulate the contents of a webpage apply styles to make UI more attractive easy DOM traversal effects and animation simple to make AJAX calls and utilities and much more       AngularJS  -  AngularJS is a product by none other the Search Engine Giant Google and it   s an open source MVC-based framework considered to be the best and only next generation framework   AngularJS is a great tool for building highly rich client-side web applications   As being a framework  it dictates us to follow some rules and a structured approach  It   s not just a JavaScript library but a framework that is perfectly designed  framework tools are designed to work together in a truly interconnected way    In comparison of features jQuery Vs AngularJS  AngularJS simply offers more features   Two-Way data binding REST friendly MVC-based Pattern Deep Linking Template Form Validation Dependency Injection Localization Full Testing Environment Server Communication

User · Answer

I think this is a very good chart describing the differences in short  A quick glance at it shows most of the differences     One thing I would like to add is that  AngularJS can be made to follow the MVVM design pattern while jQuery does not follow any of the standard Object Oriented patterns

User · Answer

AngularJS    AngularJS is for developing heavy web applications  AngularJS can use jQuery if it   s present in the web-app when the application is being bootstrapped  If it s not present in the script path  then AngularJS falls back to its own implementation of the subset of jQuery   JQuery    jQuery is a small  fast  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   Read more details here  angularjs-vs-jquery

User · Answer

They work at different levels   The simplest way to view the difference  from a beginner perspective is that jQuery is essentially an abstract of JavaScript  so the way we design a page for JavaScript is pretty much how we will do it for jQuery  Start with the DOM then build a behavior layer on top of that  Not so with Angular Js  The process really begins from the ground up  so the end result is the desired view   With jQuery you do dom-manipulations  with Angular Js you create whole web-applications      jQuery was built to abstract away the various browser idiosyncracies  and work with the DOM without having to add IE6 checks and so on  Over time  it developed a nice  robust API which allowed us to do a lot of things  but at its core  it is meant for dealing with the DOM  finding elements  changing UI  and so on  Think of it as working directly with nuts and bolts   Angular Js was built as a layer on top of jQuery  to add MVC concepts to front end engineering  Instead of giving you APIs to work with DOM  Angular Js gives you data-binding  templating  custom components  similar to jQuery UI  but declarative instead of triggering through JS  and a whole lot more  Think of it as working at a higher level  with components that you can hook together  instead of directly at the nuts and bolts level   Additionally  Angular Js gives you structures and concepts that apply to various projects  like Controllers  Services  and Directives  jQuery itself can be used in multiple  gazillion  ways to do the same thing  Thankfully  that is way less with Angular Js  which makes it easier to get into and out of projects  It offers a sane way for multiple people to contribute to the same project  without having to relearn a system from scratch     A short comparison can be this-  jQuery   Can be easily used by those who have proper knowledge on CSS selectors It is a library used for DOM Manipulations Has nothing to do with models Easily manipulate the contents of a webpage Apply styles to make UI more attractive Easy DOM traversal Effects and animation Simple to make AJAX calls and Utilities usability don t have a two-way binding feature becomes complex and difficult to maintain when the size of a project increases Sometimes you have to write more code to achieve the same functionality as in Angular Js   Angular Js   It is an MVVM Framework Used for creating SPA  Single Page Applications  It has key features like routing  directives  two-way data binding  models  dependency injection  unit tests etc is modular Maintainable  when project size increases is Fast Two-Way data binding REST friendly MVC-based Pattern Deep Linking Templating Build-in form Validation Dependency Injection Localization Full Testing Environment Server Communication   And much more    Think this helps   More can be found-   jQuery vs  AngularJS  A Comparison and Migration Walkthrough  quot Thinking in AngularJS quot  if I have a jQuery background  What are the key differences between jQuery and AngularJS  jQuery Vs AngularJS     A Good Comparison What is the difference between jQuery and AngularJS

[javascript] How is AngularJS different from jQuery

Examples related to javascript

Examples related to jquery

Examples related to angularjs