84

Estou percebendo a adesão do AngularJS e o abandono do jQuery por parte de alguns desenvolvedores, no entanto não conheço as vantagens do AngularJS pois nunca trabalhei com este framework.

Visto que alguns blogs (ex: jeremyzerr, paulhammant) encorajam o uso do AngularJS, gostaria de saber quais as diferenças entre esses frameworks, e se vale a pena a troca.

Alguns tópicos:

  • Tudo que é feito no jQuery pode ser feito no AngularJS?
  • Qual utiliza menos código?
  • Qual é o mais rápido no processamento?
  • Qual o mais leve?
  • Qual é o de mais fácil manutenção?
  • Como é a curva de aprendizado para cada um?
  • Quais são as limitações de cada um?
  • O que um faz melhor do que o outro?
  • É legal utilizar ambos ao mesmo tempo?

Obs: exemplos são bem-vindos

10
  • 5
    Não sei se dá pra compará-los diretamente, são coisas completamente diferentes. O Angular é um framework, e o jQuery não. Geralmente são colocados em lados opostos porque o objetivo do jQuery é manipular o DOM, enquanto no Angular as views são consideradas estáticas, não se manipula o DOM da mesma maneira que com jQuery.
    – bfavaretto
    Commented 15/06/2014 às 22:11
  • @bfavaretto eu nunca trabalhei com AngularJS, mas o pouco que eu vi ele atua no HTML assim como é possível fazer com JQuery. Por isso surgiu essa dúvida sobre as diferenças entre ambos na prática.
    – Paulo
    Commented 15/06/2014 às 23:37
  • 2
    Eu também sei pouco do Angular, mas pelo que eu entendi ele trabalha com views que são inteiramente substituídas quando necessário (uma view pode ser um elemento ou vários). Com jQuery é mais comum manipular elementos individuais. Eu estava esperando que alguém respondesse ou ocmentasse para esclarecer. Tenho dúvidas sobre esse fechamento, não acho Gorilla vs. Shark; talvez baleia contra golfinho :)
    – bfavaretto
    Commented 16/06/2014 às 1:50
  • 1
    "Estou percebendo (...) por parte de alguns desenvolvedores" "Visto que alguns blogs encorajam..." [citation needed] :P (em outras palavras, favor linkar para exemplos se possível, pois isso pode ajudar a criar o contexto necessário para que essa pergunta seja respondida de forma objetiva; votei pela reabertura de qualquer forma, mas sinto que sem esse contexto as respostas podem divagar bastante, usar pontos de vista diferentes, etc)
    – mgibsonbr
    Commented 16/06/2014 às 5:08
  • 1
    @mgibsonbr editei a pergunta e adicionei 2 blogs para referência, ambos abordam alguns pontos sobre AngularJS citando jQuery.
    – Paulo
    Commented 16/06/2014 às 6:20

4 Respostas 4

70

Basicamente, jQuery é uma biblioteca Javascript, que simplifica o Javascript para atividades comuns no dia-a-dia do desenvolvimento. Excelente para manipular o DOM com muito menos código que o JS puro.

Exemplo de jQuery:
Selecionando o <div id="meudiv"></div>
Javascript:  document.getElementByID('meudiv')
jQuery:        $('#meudiv')

Já AngularJS é um framework, que trabalha com dados, focando na interação usuário <-> aplicativo. Tem os seguintes pontos principais:

  • Data Binding de mão dupla. Exemplo.
    Você define um tipo de dados (chamado Model) e quaisquer alterações nestes ocorrem em toda aplicação, onde os mesmos aparecerem.
  • Padrão de desenvolvimento [MVVM] (semelhante ao MVC).
  • Template engine integrada
    Ex.: Você recebe de um servidor um objeto JSON com vários itens e os atribui à um Model chamado Pessoas no Angular. Esse é o nosso objeto que atrelamos ao model através de um controller do Angular:

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

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

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


E o AngularJS vai exibir o seguinte:

  • Romulo é lindo e seu sobrenome é Zoch
  • João é feio e seu sobrenome é Do caminhão
  • Diretrivas customizadas (como componentes reutilizáveis, criação de 'html' personalizado).
    Você pode, por exemplo, criar um elemento <meubotao>texto</meubotao>, que irá renderizar um snippet completo que você definir, "faz de conta": <button class="meubotao" rel="meubtn" onclick="funcaoPadrao()">texto</button>
  • Pronto para trabalhar com API's REST (que, normalmente, entregam o conteúdo em JSON)
  • Validação de Form Client-side
  • Comunicação com o servidor
  • Localization Ready (pronto p/ tradução multi-línguas)
  • Injeção de dependencias (não é bem uma feature, mas é uma diferença em relação ao jQuery, que não tem isso)
  • TDD (Desenvolvimento direcionado à testes)

Obs.: Vale lembrar que o próprio AngularJS USA jQuery. Ele vem com uma versão Lite do jQuery integrada. Você pode, inclusive, usar jQuery dentro do Angular ( Embora não seja indicado alterar o DOM via jQuery dentro de uma aplicação Angular, pois isso deve ser feito via diretivas customizadas).

Algumas informações bem bacanas de cada um você encontra na Wikipedia. As informações estão bem simples e gerais: Angular e jQuery

6
  • Sua resposta fala muito, mas ao mesmo tempo não fala nada. Me parece que a única diferença entre eles é que para executar JQuery eu necessito da tag <script> e do AngularJS não. Até o momento não encontrei NADA que justifique eu dedicar minha energia e tempo para reinventar a roda. Essa é uma opinião particular, esperava encontrar um tópico me dizendo: É melhor porque {a}, {b}, {c}. Commented 11/05/2015 às 20:23
  • 8
    Acho que você realmente não entendeu nada. Angular JS serve pra uma coisa, jQuery para outra Commented 12/05/2015 às 21:40
  • 4
    @MarceloBarbosa "Basicamente, jQuery é uma biblioteca Javascript, que simplifica o Javascript" e "Já AngularJS é um framework, que trabalha com dados, focando na interação usuário <-> aplicativo. " Commented 12/05/2015 às 21:41
  • Ou seja, posso utilizar os dois em conjunto, não é uma opção "Deste" ou "Daquele". É que os modelos, exemplos e tutoriais estão muito relativos, muito simples, e apenas vejo ações que faço da mesma maneira utilizando Jquery. Atualmente trabalho com um HTML limpo, com divs e seus respectivos Id's. O Jquery carrega os objetos via ajax e gero o HTML necessário a partir do Js. Colocar tags em meio ao código html, neste primeiro momento, me causa a sensação de código sujo. Estou reescrevendo algumas coisas com Angular. Agradeço a resposta e dedicação. Commented 14/05/2015 às 19:14
  • 1
    Excelente resposta, mas estranhamente o link que citou fala de biblioteca e framework são praticamente a mesma coisa. O proprio jquery se intitula framework. O problema de hoje é que as pessoas (não estou falando de ti) tem confundido "aplicações" ou "design patterns" com framework, um exemplo são os CI, cakephp e laravel. Na verdade eles são aplicações web baseadas em frameworks (tanto que o cake e laravel separam o framework). Só uma dica ;)
    – Syzoth
    Commented 4/08/2016 às 22:55
12

No que diz respeito a diferenças na execução do Angular vs. JQuery

Angular.js é um framework. Na execução do Angular.js, ocorre o carregamento, onde sua árvore DOM e JavaScript é tranformada em um aplicativo angular. Isso ocorre pois o código HTML com caracteres especiais (diretivas e filtros angular) é compilado e angular realiza uma vinculação entre Controller, Model e View (padrão MVC). Logo, você precisa entender esses controladores, serviços, diretivas, etc. entendo que é uma curva de aprendizagem moderada. Seria uma boa opção para uma aplicativo que possui CRUD por exemplo.

Basta incluir a propriedade ng-app no elemento html em que queremos “ativar” o 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 <input type="text" ng-model="yourName"/>
    <h1>Hello {{yourName}}</h1>
 </body>
</html>

Além da propriedade ng-app (linha 1), utilizamos para DataBind a propriedade ng-model, para informar que este elemento estará ligado a uma variável do AngularJS, através da variável yourName, na linha 8. Isso significa que qualquer alteração na caixa de texto irá atualizar o valor da variável.

Toda vez que modelo é atualizado - seja por meio de uma chamada de AJAX assíncrona, ou através da manipulação direta em algum lugar no código do Controller, Angular atualiza o modelo de dados e o mantém em sincronia com a View.

Dentre Objetivos/Características:

  • Abstrair a manipulação do DOM da lógica do aplicativo. Isto melhora os testes do código.
  • Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação. Isto permite que o desenvolvimento do aplicativo evolua em ambos os lados, de forma paralela, e permite o reuso de código.
  • Guia os desenvolvedores através da construção de todo o aplicativo: desde o design de Interface, passando pela escrita das regras de negócio, até chegar aos testes da aplicação.

JQuery é uma biblioteca javascript para manipulação do DOM (ex. mudança de cores de um elemento, eventos onclick, animação, etc...). Na execução do JQuery, seu código irá realizar chamadas a funções de uma biblioteca, solicitado por algum evento DOM por exemplo.

Já para carregar o JQuery inserimos a referência a biblioteca: <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js">

Depois inserimos uma função jQuery na página para que, quando a página estiver pronta, possamos utilizar o JQuery:

$(function() { // Quando a página estiver carregada
    RealizarAlgo();
})

Dentre Objetivos/Características:

  • Resolução da incompatibilidade entre os navegadores.
  • Redução de código com a reutilização do código através de plugins criados por outros desenvolvedores.
  • Trabalha com AJAX.
  • Implementação segura de recursos do CSS.

No que diz respeito ao uso, encontrei esse link http://w3techs.com/technologies/comparison/js-angularjs,js-jquery

1
  • Excelente resposta, só discordo desta parte sobre framework != biblioteca, um framework nada mais que pode ser uma grande biblioteca, no resultado final basicamente ambos são frameworks. O proprio jquery se intitula framework. O problema de hoje é que as pessoas (não estou falando de ti) tem confundido "aplicações" ou "design patterns" com framework, um exemplo são os CI, cakephp e laravel. Na verdade eles são aplicações web baseadas em frameworks (tanto que o cake e laravel separam o framework). Só uma dica ;)
    – Syzoth
    Commented 4/08/2016 às 22:59
10

JQuery é simplesmente uma API para facilitar a manipulação do DOM (Document Object Model)

AngularJS é um Framework MVC completo com suporte a Data Binding, Injeção de Dependência, Criação de Elementos HTML Personalizados (Diretivas), Carga de Modulos com Gerenciamento de Dependências, Roteamento e Gestão de Histórico, Serviços, Promessas, etc. Ou seja permite a criação de aplicação completa de forma robusta e organizada escrevendo código muito mais expressivo e de fácil manutenção. Trata-se de outro paradigma e para ser usado eficientemente você deve estudar e entender estes novos conceitos citados.

OBS: O proprio Angular usa o JQuery mas você pode fazer uma aplicação inteira sem usar um único comando JQuery pois na abordagem do Angular você usa outras funcionalidades fornecidas pelo Framework que são mais produtivas. Quando estiver usando o Angular procure não usar JQuery diretamente, por exemplo, em vez de adicionar um tratador de evento click via function .on(…) use ng-click.

6

No meu ponto do vista não dá para comparar os 2, são propostas diferentes, apesar de terem algumas implementações parecidas como:

Os 2 tem acesso a dados por Ajax
Os 2 modificam o DOM em tempo de execução (como mostrar e esconder objetos/ criar ou destruir objetos)
O Jquery pode até complementar o Angular (apesar de não recomendado).

O Ideal é você aprender os 2, comece pelo Jquery que é mais simples e depois parta para o Angular.

Você deve ter em mente que a base dos 2 é Javascript, aconselho conhecer muito bem a linguagem javascript.

Eu por exemplo: comecei com Jquery antes mesmo de saber bem o javascript e conforme foi passando o tempo fui descobrindo que muitas vezes nem era preciso usar Jquery para chegar no meu objetivo.

Bons estudos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .