Como o AngularJS é diferente do jQuery

388

Eu só conheço uma biblioteca js e isso é jQuery .
Mas meus outros codificadores do grupo estão mudando o AngularJS como sua biblioteca padrão em um novo projeto.

Eu não sei nada sobre isso. Qual é a diferença do jQuery?
Eu já tenho um conjunto de funções feitas para tarefas semelhantes no jQuery. Ainda posso usar coisas de jQuery com AngularJS?

Miragem
fonte

Respostas:

414
  1. Enquanto o Angular 1 era uma estrutura, o Angular 2 é uma plataforma . ( ref )

Para os desenvolvedores, o Angular2 fornece alguns recursos além da exibição de dados na tela. Por exemplo, o uso da ferramenta angular2 cli pode ajudá-lo a "pré-compilar" seu código e gerar o código javascript necessário ( agitação da árvore ) para reduzir o tamanho do download para 35Kish.

  1. Sombra DOM emulada Angular2. ( ref )

Isso abre uma porta para a renderização do servidor que pode solucionar problemas de SEO e funcionar com o Nativescript etc., que não funcionam em navegadores.

AngularJS é uma estrutura . Possui os seguintes recursos

  1. Ligação de dados bidirecional
  2. Padrão MVW (MVC-ish)
  3. Modelo
  4. Diretiva personalizada (componentes reutilizáveis, marcação personalizada)
  5. Compatível com REST
  6. Deep Linking (configure um link para qualquer página dinâmica)
  7. Validação de formulário
  8. Comunicação do servidor
  9. Localização
  10. Injeção de dependência
  11. Ambiente de teste completo (unidade, e2e)

confira esta apresentação e esta ótima introdução

Não se esqueça de ler o guia oficial do desenvolvedor

Ou aprenda com esses incríveis tutoriais em vídeo

Se você quiser assistir a mais vídeos tutoriais, confira este post, Coleção dos melhores 60 ou mais tutoriais do AngularJS .

Você pode usar o jQuery com o AngularJS sem nenhum problema.

De fato, o AngularJS usa o jQuery Lite, o que é uma ótima ferramenta.

Do FAQ

Angular usa a biblioteca jQuery?

Sim, o Angular pode usar o jQuery se ele estiver presente no seu aplicativo quando o aplicativo estiver sendo inicializado. Se o jQuery não estiver presente no caminho do script, o Angular retornará à sua própria implementação do subconjunto do jQuery que chamamos de jQLite.

No entanto, não tente usar o jQuery para modificar o DOM nos controladores AngularJS, faça isso em suas diretivas.

Atualizar:

Angular2 é lançado. Aqui está uma ótima lista de recursos para iniciantes

maxisam
fonte
8
Eu tenho que desenvolver o aplicativo completo em js Angular ou posso usá-lo em poucas páginas e em alguns apges eu uso o jquery simples?
Mirage
8
+1 ótima resposta. Eu diria que o Angular se aproxima mais do padrão MVVM.
GFoley83
8
Tenho certeza angular é um MVW
iConnor
2
Por vários anos, foi próximo ao MVC. Mas agora, considerando o aprimoramento da API e da API, está mais próximo do MVVM. No escopo $ Angular, funciona como uma VM (consulte Modelo).
Invincible
14
Para futuras-pessoas querendo saber (como eu estava), MVW == Model-View-O que quer que , como em " m odel- v iew- w hatever-works-for-you" . Em outras palavras, MV * .
David Frye
40

Quero adicionar algo sobre a diferença do AngularJS com o jQuery da perspectiva de um desenvolvedor.

No AngularJS, você precisa ter uma visão e uma abordagem muito estruturadas sobre o que deseja realizar. Dificilmente segue uma maneira linear para concluir uma tarefa, mas as trocas entre vários objetos cuidam das solicitações e ações, o que, então, é necessário, pois angular é uma estrutura baseada em MVC . Também requer um plano pelo menos geral do aplicativo finalizado, pois a codificação depende muito de como você deseja que as interações sejam concluídas.

O jQuery é como uma poesia livre , você escreve linhas e mantém algumas relações e momentos adequados para que sua tarefa seja realizada.

Embora, no Angular JS, você deva seguir algumas regras e manter o momento e as relações adequados, talvez seja mais como o soneto clássico de Spencerian (um famoso poeta clássico) cujo poema é estrutural e está vinculado a muitas regras.

Comparado com o AngularJS, o jQuery é mais como uma coleção de códigos e funções (o que é, como já mencionado, ótimo para manipulação de DOM e obtenção de efeitos rápidos), enquanto o AngularJS é uma estrutura real que permite ao desenvolvedor criar uma Web corporativa - aplicação com muita ligação e troca de dados em um roteamento e gerenciamento soberbamente organizados.

Além disso, o AngularJS não depende do jQuery para concluir sua tarefa. Ele possui dois recursos excelentes que não são encontrados no jQuery em nenhum sentido:

1- O JS angular ensina como CODIFICAR e atingir um objetivo, e não apenas realizar um objetivo de qualquer forma. Vale ressaltar que o AngularJS utiliza totalmente o núcleo e o coração dos Javascripts e abre o caminho para você incorporar no seu aplicativo as técnicas como DI (injeção de dependência). Para trabalhar com o angularJS, você deve (ou deve) aprender técnicas mais elevadas de codificação com Javascript.

2- O Angular JS é totalmente independente para lidar com diretivas e estruturar seu aplicativo; você pode simplesmente afirmar que o jQuery pode fazer o mesmo (independência), mas, de fato, o AngularJS, como várias vezes mencionado nas linhas acima, tem independência da maneira mais excelente possível estruturalmente, com base no MVC.

Uma última observação é que, não há guerra de nomes, pois é muito perturbador ser tendencioso ou subjetivo. A magnitude e grandeza do jQuery foram comprovadas, mas seus usos e limitações (de qualquer estrutura ou software) são as preocupações da discussão e debates semelhantes.

Atualizar:

O uso do AngularJS é decisivo, pois é caro em termos de implementação, mas funda uma base sólida para futura expansão, transformação e manutenção do aplicativo. AngularJS é para o Novo Mundo da Web. Ele é voltado para a criação de aplicativos caracterizados pelo menor consumo de recursos (carregando apenas os recursos necessários do servidor), tempo de resposta rápido e alto grau de manutenção e extensibilidade envolvidos em um sistema estruturado.

Mostafa Talebi
fonte
"Para trabalhar com o angularJS, você deve (ou deve) aprender técnicas mais elevadas de codificação com Javascript" - por favor, dê-me exemplos do que você quer dizer com técnicas elevadas?
antew
@MostafaTalebi, eu estava apenas brincando, mas realmente não entendi essa parte "JavaScript é mais um conceito?" O que isto significa?? você poderia explicar mais? ehh existe mesmo assim entramos em contato ??
Azerafati 15/09/14
Quero dizer que é um script :)))
Mostafa Talebi
Eu misturei uma coisa! por exemplo, usamos php no lado do servidor e adotamos nossa estrutura com base no conceito MVC. No modelo que usamos javascript, usamos js angulares também, então aqui o js angular MVC é inútil, não é?
Farhad
28

AngularJS: O AngularJS destina-se ao desenvolvimento de aplicativos Web pesados. O AngularJS pode usar o jQuery se ele estiver presente no aplicativo da web quando o aplicativo estiver sendo inicializado. Se não estiver presente no caminho do script, o AngularJS retornará à sua própria implementação do subconjunto do jQuery.

JQuery: jQuery é uma biblioteca JavaScript pequena, rápida e rica em recursos. Isso simplifica muito o processo de passagem e manipulação de documentos HTML, manipulação de eventos, animação e Ajax. O jQuery simplifica muitas coisas complicadas do JavaScript, como chamadas AJAX e manipulação de DOM.

Leia mais detalhes aqui: angularjs-vs-jquery

kmario23
fonte
20

Penso que este é um gráfico muito bom que descreve as diferenças em resumo. Uma rápida olhada mostra a maioria das diferenças.

insira a descrição da imagem aqui

Uma coisa que eu gostaria de acrescentar é que o AngularJS pode ser feito para seguir o padrão de design do MVVM , enquanto o jQuery não segue nenhum dos padrões padrão de orientação a objetos.

Pritam Banerjee
fonte
12

Eles trabalham em diferentes níveis.

A maneira mais simples de ver a diferença, de uma perspectiva iniciante, é que o jQuery é essencialmente um resumo do JavaScript; portanto, a maneira como projetamos uma página para JavaScript é basicamente como o faremos com o jQuery . Comece com o DOM e depois crie uma camada de comportamento. Não é assim com o Angular.Js . O processo realmente começa do zero, então o resultado final é a visualização desejada.

Com o jQuery, você faz manipulações de dom; com o Angular.Js, você cria aplicativos da Web inteiros.


O jQuery foi criado para abstrair as várias idiossincrasias do navegador e trabalhar com o DOM sem precisar adicionar verificações do IE6 e assim por diante. Com o tempo, ele desenvolveu uma API boa e robusta que nos permitiu fazer muitas coisas, mas, em sua essência, destina-se a lidar com o DOM, encontrar elementos, alterar a interface do usuário e assim por diante. Pense nisso como trabalhar diretamente com porcas e parafusos.

O Angular.Js foi criado como uma camada sobre o jQuery , para adicionar conceitos de MVC à engenharia de front-end. Em vez de fornecer APIs para trabalhar com o DOM, o Angular.Js fornece componentes personalizados de ligação de dados, modelo e modelos (semelhantes à jQuery UI , mas declarativos em vez de serem acionados por JS) e muito mais. Pense nisso como trabalhando em um nível mais alto, com componentes que você pode conectar, em vez de diretamente no nível das porcas e parafusos.

Além disso , o Angular.Js fornece estruturas e conceitos que se aplicam a vários projetos, como Controladores, Serviços e Diretivas. O jQuery em si pode ser usado de várias maneiras (gazillion) para fazer a mesma coisa. Felizmente, isso é bem menos com o Angular.Js , o que facilita a entrada e saída de projetos. Ele oferece uma maneira sadia de várias pessoas contribuírem para o mesmo projeto, sem ter que reaprender um sistema do zero.


Uma breve comparação pode ser assim:

jQuery

  • Pode ser facilmente usado por quem tem conhecimento adequado sobre seletores CSS
  • É uma biblioteca usada para manipulações de DOM
  • Não tem nada a ver com modelos
  • Manipule facilmente o conteúdo de uma página da web
  • Aplique estilos para tornar a interface do usuário mais atraente
  • Passagem fácil do DOM
  • Efeitos e animação
  • Simples de fazer chamadas AJAX e
  • Utilidade dos utilitários
  • não tem um recurso de ligação bidirecional
  • torna-se complexo e difícil de manter quando o tamanho de um projeto aumenta
  • Às vezes, você precisa escrever mais código para obter a mesma funcionalidade do Angular.Js

Angular.Js

  • É um Framework MVVM
  • Usado para criar SPA (aplicativos de página única)
  • Possui recursos importantes como roteamento, diretivas, ligação de dados bidirecional, modelos, injeção de dependência, testes de unidade, etc.
  • é modular
  • Mantido quando o tamanho do projeto aumenta
  • é rápido
  • Padrão baseado em MVC compatível com REST de ligação de dados bidirecional
  • Deep Linking
  • Templating
  • Validação de formulário incorporado
  • Injeção de dependência
  • Localização
  • Ambiente de teste completo
  • Comunicação do servidor

E muito mais

insira a descrição da imagem aqui

Pense que isso ajuda.

Mais pode ser encontrado -

Abrar Jahin
fonte
3

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 its 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 its 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. Its
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
Jamshaid Kamran
fonte