What are the main differences between jQuery and AngularJS?

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

jQuery example:

Selecting the

Javascript: document.getElementByID('mydiv')

jQuery: $('#mydiv')

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

Two-way data binding. Example.

You define a data type (called a Model) and any changes to these occur throughout the application, wherever they appear.

Development pattern [MVVM] (similar to MVC).

Integrated template engine

Eg: You receive a JSON object with several items from a server and assign them to a Model called People in Angular. This is our

object that we attach to the model through an Angular controller:

people = [
        {name: 'David', lastname: 'Zoch', characteristic: 'Pretty'},
        {name: 'John', lastname: 'Smith', characteristic: 'Ugly'}
]

Para listar todos os itens do objeto/model, você pode, por exemplo, fazer o seguinte:


    {{people.name}} is {{people.characteristic}} and your name is
    {{people.lastname}}

And AngularJS will display the following:

-David is Pretty and his lastname is Zoch

-John is ugly and his lastname is Smith

Custom directives (like reusable components, creating custom 'html').

You can, for example, create a text element, which will render a complete snippet that you define, "pretend":

Ready to work with REST APIs (which normally deliver the content in JSON)

Client-side Form Validation

Communication with the server

Localization Ready (ready for multi-language translation)

Dependency injection (not really a feature, but a difference from jQuery, which doesn't have that)

TDD (Test Driven Development)

Note: It is worth remembering that AngularJS USES jQuery. It comes with a Lite version of jQuery built in. You can even use jQuery within Angular (Although it is not recommended to change the DOM via jQuery within an Angular application, as this must be done via custom directives).

References:

https://pt.stackoverflow.com/questions/21482/quais-as-principais-diferen%c3%a7as-entre-jquery-e-angularjs

http://pt.wikipedia.org/wiki/AngularJS

http://pt.wikipedia.org/wiki/JQuery