What are the main differences between jQuery and AngularJS?

77

I'm realizing AngularJS membership and abandonment of jQuery by some developers, however I do not know the advantages of AngularJS because I've never worked with this framework .

Since some blogs (eg jeremyzerr , paulhammant ) encourage the use of AngularJS, I would like to know what the differences between these < in> frameworks , and if it's worth the trade.

Some topics:

  • All that is done in jQuery can be done in AngularJS?
  • Which uses less code?
  • Which is the fastest in processing?
  • Which is the lightest?
  • What is the easiest maintenance?
  • How is the learning curve for each?
  • What are the limitations of each?
  • What does one do better than the other?
  • Is it legal to use both at the same time?

Note: examples are welcome

    
asked by Paulo 16.06.2014 в 00:00

4 answers

64

Basically, jQuery is a Javascript library that simplifies Javascript for common activities in day-to-day development. Great for manipulating the DOM with much less code than pure JS.

jQuery example:
Selecting <div id="meudiv"></div>
Javascript: document.getElementByID('meudiv')
jQuery: $('#meudiv')

Already AngularJS is a framework , which works with data, focusing on user interaction < - > app. It has the following main points:

  • Double-Bind Data Binding Example .
    You define a data type (called Model) and any changes in them occur in every application where they appear.
  • Development Standard [MVVM] (similar to MVC ).
  • Built-in Template Engine
    Eg: You receive a JSON object from a server with multiple items and assign them to a Model called Pessoas in Angular. This is our object that we link to the model through an Angular controller:

    pessoas = [
            {nome: 'Romulo', sobrenome: 'Zoch', caracteristica: 'Lindo'},
            {nome: 'João', sobrenome: 'Do caminhão', caracteristica: 'feio'}
    ]
    

To list all of the object / model items, you can, for example, do the following:

<li ng-repeat="pessoa in pessoas" ng-model="pessoas">
    {{pessoa.nome}} é {{pessoa.caracteristica}} e seu sobrenome é
    {{pessoa.sobrenome}}
</li>


And AngularJS will display the following:

  • Romulo is beautiful and his surname is Zoch
  • John is ugly and his last name is From the truck
  • Diretrivas customizadas (like reusable components, creation of custom 'html').
    You can, for example, create a <meubotao>texto</meubotao> element, which will render a complete snippet that you set, "make account": <button class="meubotao" rel="meubtn" onclick="funcaoPadrao()">texto</button>
  • Ready to work with API's REST (which usually deliver the content to JSON )
  • Client-Side Form Validation
  • Communication with the server
  • Localization Ready (ready for multi-language translation)
  • Injection Dependencies (not quite a feature, but it's a difference from jQuery, which does not have this)
  • TDD (Test Driven Development)

Note: Remember that Angular JS USA jQuery itself. It comes with a built-in jQuery Lite version. You can even use jQuery within the Angular (Although you can not change the DOM via jQuery within an Angular application, because this must be done via custom directives).

Some pretty cool information about each one you find on Wikipedia. The information is very simple and general: Angular and jQuery >

    
16.06.2014 / 16:47
14

Regarding differences in execution of Angular vs. JQuery

Angular.js is a framework . When executing Angular.js, the load occurs, where its DOM and JavaScript tree is transformed into an angular application. This is because HTML code with special characters (directives and angular filters) is compiled and angular performs a link between Controller, Model and View (default MVC). Therefore, you need to understand these drivers, services, policies, etc. I understand that it is a moderate learning curve. It would be a good choice for an application that has CRUD for example.

Just include the ng-app property in the html element where you want to "enable" angularJS:

<html ng-app>
<head>
     <title>Lista de compras</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script></head><body>Hello<inputtype="text" ng-model="yourName"/>
    <h1>Hello {{yourName}}</h1>
 </body>
</html>

In addition to the ng-app property (line 1), we use the ng-model property for DataBind to indicate that this element will be bound to an AngularJS variable, through variable yourName, in line 8. This means that any change in the text box will update the value of the variable.

Every time a template is updated - whether through an asynchronous AJAX call, or through direct manipulation somewhere in the Controller code, Angular updates the data model and keeps it in sync with the View.

Among Objectives / Features:

  • Abstraction DOM manipulation of application logic. This improves code testing.
  • Abstracts the coupling between the client side and the server side of the application. This allows application development to evolve on both sides, in parallel, and allows reuse of code.
  • Guide developers through building the entire application: from interface design, through business rule writing, to application testing.

JQuery is a library javascript for DOM manipulation (eg changing an element's colors, onclick events, animation, etc ...). When executing JQuery, your code will make calls to functions of a library, requested by some DOM event for example.

Now to load JQuery insert the reference to the library: <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js">

ThenweinsertajQueryfunctiononthepagesothatwhenthepageisreadywecanuseJQuery:

$(function(){//QuandoapáginaestivercarregadaRealizarAlgo();})

AmongObjectives/Features:

  • Resolutionofincompatibilitybetweenbrowsers.
  • Reducingcodebyreusingcodethroughpluginscreatedbyotherdevelopers.
  • WorkswithAJAX.
  • SecureimplementationofCSSfeatures.

Regardinguse,Ifoundthislink link

    
16.06.2014 в 17:11
9

JQuery is simply an API to facilitate manipulation of the Document Object Model (DOM)

AngularJS is a complete MVC Framework with support for Data Binding, Dependency Injection, Creation of Custom HTML Elements (Directives), Module Load with Dependency Management, Routing and History Management, Services, Promises, etc. In other words, it allows the creation of a complete application in a robust and organized way, writing code that is much more expressive and easy to maintain. This is another paradigm and to be used efficiently you should study and understand these new concepts.

OBS: Angular itself uses JQuery but you can make an entire application without using a single JQuery command because in the Angular approach you use other features provided by the Framework that are more productive. When using Angular, try not to use JQuery directly, for example, instead of adding a click event handler via function .on(…) use ng-click .

    
09.07.2014 в 18:39
5

In my point of view you can not compare the 2, they are different proposals, although they have some similar implementations like:

The 2 have access to data by Ajax
The 2 modify the DOM at run time (like show and hide objects / create or destroy objects)
Jquery can even complement the Angular (although not recommended).

The ideal is for you to learn the 2, start with Jquery which is simpler and then go to the Angular.

You should keep in mind that the base of the 2 is Javascript, I advise you to know the javascript language very well.

For example: I started with Jquery before I even knew the javascript well and as time went on I discovered that I often did not even have to use Jquery to get to my goal.

Good studies.

    
03.05.2016 в 20:26