Eu tenho usado principalmente a biblioteca jQuery e apenas comecei a usar o AngularJS. Li alguns tutoriais sobre como usar o Angular, mas não sei ao certo por que ou quando usá-lo ou quais benefícios posso encontrar em comparação ao uso do jQuery.

Parece-me que o Angular faz você pensar em MVC, o que talvez signifique que você visualize sua página da Web como uma combinação de modelo + dados. Você usa {{data bindings}}sempre que sente que teria dados dinâmicos. A Angular fornecerá um manipulador $ scope, que você poderá preencher estaticamente ou por meio de chamadas para o servidor web. Isso parece caracteristicamente semelhante ao modo JSP de criar páginas da web. Preciso do Angular para isso?

Para manipulação simples do DOM, que não envolve manipulação de dados (por exemplo: alterações de cor ao passar o mouse, ocultar / mostrar elementos ao clicar), jQuery ou vanilla JS é suficiente e mais limpo. Isso pressupõe que o modelo no mvc do angular seja qualquer coisa que reflita os dados na página e, portanto, as propriedades CSS como cor, exibição / ocultação, etc. alterações não afetam o modelo . Angular tem alguma vantagem sobre jQuery ou vanilla JS para manipulações DOM?

O que o Angular pode fazer que o torna útil para o desenvolvimento em comparação com o que o jQuery pode fazer junto com os plugins?

Ligação de dados

Você sai por aí criando sua página da web e continua colocando {{data bindings}} sempre que achar que terá dados dinâmicos. A Angular fornecerá um manipulador $ scope, que você poderá preencher (estaticamente ou por meio de chamadas para o servidor da web).

Este é um bom entendimento da ligação de dados. Eu acho que você entendeu isso.

Manipulação do DOM

Para manipulação simples de DOM, que não envolve manipulação de dados (por exemplo: alterações de cor ao passar o mouse, ocultar / mostrar elementos ao clicar), jQuery ou js da velha escola é suficiente e mais limpo. Isso pressupõe que o modelo no mvc do angular seja qualquer coisa que reflita os dados na página e, portanto, propriedades de css como cor, exibição / ocultação, etc. alterações não afetam o modelo.

Eu posso ver seu ponto aqui sobre a manipulação DOM "simples" ser mais limpa, mas apenas raramente e isso teria que ser realmente "simples". Eu acho que a manipulação do DOM é uma das áreas, assim como a ligação de dados, onde o Angular realmente brilha. Compreender isso também ajudará você a ver como a Angular considera suas visões.

Começarei comparando a maneira Angular com uma abordagem vanilla js à manipulação do DOM. Tradicionalmente, pensamos no HTML como "não fazendo" nada e o escrevemos como tal. Portanto, js embutidos, como "onclick", etc, são práticas inadequadas porque colocam o "fazer" no contexto do HTML, o que não "faz". Angular vira esse conceito em sua cabeça. Enquanto escreve sua visão, você pensa em HTML como capaz de "fazer" muitas coisas. Esse recurso é abstraído em diretivas angulares, mas se elas já existirem ou você as tiver escrito, você não precisará considerar "como" isso é feito, basta usar o poder disponibilizado neste HTML "aumentado" que angular permite que você use. Isso também significa que TODA a sua lógica de exibição está realmente contida na exibição, não em seus arquivos javascript. Novamente, o raciocínio é que as diretivas escritas em seus arquivos javascript podem ser consideradas como aumentando a capacidade do HTML, para que você deixe o DOM se preocupar em se manipular (por assim dizer). Vou demonstrar com um exemplo simples.

Essa é a marcação que queremos usar. Eu dei um nome intuitivo.

<div rotate-on-click="45"></div>

Primeiro, gostaria de comentar que, se tivermos fornecido ao nosso HTML essa funcionalidade por meio de uma diretiva angular personalizada, já estamos prontos . Isso é uma lufada de ar fresco. Mais sobre isso em um momento.

Implementação com jQuery

demonstração ao vivo aqui (clique).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Implementação com Angular

demonstração ao vivo aqui (clique).

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

Bastante leve, MUITO limpo e isso é apenas uma manipulação simples! Na minha opinião, a abordagem angular vence em todos os aspectos, especialmente como a funcionalidade é abstraída e a manipulação do dom é declarada no DOM. A funcionalidade é conectada ao elemento por meio de um atributo html, portanto, não há necessidade de consultar o DOM por meio de um seletor, e temos dois bons fechamentos - um fechamento para a fábrica de diretivas, onde as variáveis ​​são compartilhadas entre todos os usos da diretiva e um fechamento para cada uso da diretiva na linkfunção (ou compilefunção).

A vinculação de dados bidirecional e as diretrizes para manipulação do DOM são apenas o começo do que torna o Angular incrível. O Angular promove que todo o código seja modular, reutilizável e facilmente testável e também inclui um sistema de roteamento de aplicativo de página única. É importante observar que o jQuery é uma biblioteca de métodos de conveniência / entre navegadores comumente necessários, mas o Angular é uma estrutura completa para a criação de aplicativos de página única. O script angular inclui, na verdade, sua própria versão "lite" do jQuery, para que alguns dos métodos mais essenciais estejam disponíveis. Portanto, você pode argumentar que usar o Angular IS usando jQuery (levemente), mas o Angular fornece muito mais "mágica" para ajudá-lo no processo de criação de aplicativos.

Este é um ótimo post para obter mais informações relacionadas: Como "penso em AngularJS" se tenho um histórico de jQuery?

Diferenças gerais.

Os pontos acima visam as preocupações específicas do PO. Também darei uma visão geral das outras diferenças importantes. Sugiro fazer uma leitura adicional sobre cada tópico também.

Angular e jQuery não podem ser razoavelmente comparados.

Angular é uma estrutura, jQuery é uma biblioteca. Estruturas têm seu lugar e bibliotecas têm seu lugar. No entanto, não há dúvida de que uma boa estrutura tem mais poder de escrever um aplicativo do que uma biblioteca. Esse é exatamente o objetivo de uma estrutura. Você pode escrever seu código em JS simples ou adicionar uma biblioteca de funções comuns ou adicionar uma estrutura para reduzir drasticamente o código necessário para realizar a maioria das tarefas. Portanto, uma pergunta mais apropriada é:

Por que usar uma estrutura?

Boas estruturas podem ajudar a arquitetar seu código para que ele seja modular (portanto reutilizável), SECO, legível, com desempenho e seguro. O jQuery não é uma estrutura, portanto, não ajuda nesses aspectos. Todos nós vimos as paredes típicas do código espaguete jQuery. Isso não é culpa do jQuery - é culpa dos desenvolvedores que não sabem como arquitetar o código. No entanto, se os desenvolvedores soubessem como arquitetar o código, eles acabariam escrevendo algum tipo de "estrutura" mínima para fornecer a base (arquitetura, etc) que discuti há pouco, ou adicionariam algo. Por exemplo, você pode adicionar o RequireJS para atuar como parte de sua estrutura para escrever um bom código.

Aqui estão algumas coisas que as estruturas modernas estão fornecendo:

• Templating
• Ligação de dados
• roteamento (aplicativo de página única)
• arquitetura limpa, modular e reutilizável
• segurança
• funções / recursos adicionais para conveniência

Antes de discutir mais sobre o Angular, gostaria de salientar que o Angular não é o único do gênero. O Durandal, por exemplo, é uma estrutura construída sobre jQuery, Knockout e RequireJS. Novamente, o jQuery não pode, por si só, fornecer o que Knockout, RequireJS e toda a estrutura construída sobre eles podem. Simplesmente não é comparável.

Se você precisar destruir um planeta e tiver uma Estrela da Morte, use a Estrela da Morte.

Angular (revisitado).

Com base nos meus pontos anteriores sobre o que as estruturas fornecem, gostaria de elogiar a maneira como a Angular as fornece e tentar esclarecer por que isso é realmente superior ao jQuery.

Referência DOM.

No meu exemplo acima, é absolutamente inevitável que o jQuery precise se conectar ao DOM para fornecer funcionalidade. Isso significa que a visualização (html) está preocupada com a funcionalidade (porque é rotulada com algum tipo de identificador - como "controle deslizante de imagem") e o JavaScript está preocupado em fornecer essa funcionalidade. Angular elimina esse conceito via abstração. O código escrito corretamente com Angular significa que a exibição é capaz de declarar seu próprio comportamento. Se eu quiser exibir um relógio:

<clock></clock>

Feito.

Sim, precisamos ir ao JavaScript para fazer com que isso signifique algo, mas estamos fazendo isso da maneira oposta à abordagem do jQuery. Nossa diretiva Angular (que está em seu próprio mundinho) "aumentou" o html e o html conecta a funcionalidade a si mesma.

Arquitetura MVW / Módulos / Injeção de Dependências

Angular oferece uma maneira direta de estruturar seu código. Exibir coisas pertencem à exibição (html), funcionalidade aumentada da exibição pertence às diretivas, outras lógicas (como chamadas ajax) e funções pertencem aos serviços, e a conexão de serviços e lógica à exibição pertence aos controladores. Também existem outros componentes angulares que ajudam a lidar com a configuração e modificação de serviços, etc. Qualquer funcionalidade criada é automaticamente disponibilizada em qualquer lugar que você precisar, através do subsistema Injector, que cuida da injeção de dependência em todo o aplicativo. Ao escrever um aplicativo (módulo), divido-o em outros módulos reutilizáveis, cada um com seus próprios componentes reutilizáveis, e os incluo no projeto maior. Depois de resolver um problema com o Angular, você ' o resolvi automaticamente de uma maneira que é útil e estruturada para reutilização no futuro e facilmente incluída no próximo projeto. UMAENORME bônus para tudo isso é que seu código será muito mais fácil de testar.

Não é fácil fazer as coisas "funcionarem" no Angular.

OBRIGADO SENHOR. O código espaguete jQuery mencionado acima resultou de um desenvolvedor que fez com que algo "funcionasse" e depois seguisse em frente. Você pode escrever código Angular incorreto, mas é muito mais difícil fazê-lo, porque o Angular lutará contra você. Isso significa que você precisa tirar vantagem (pelo menos um pouco) da arquitetura limpa que ela fornece. Em outras palavras, é mais difícil escrever código incorreto com o Angular, mas é mais conveniente escrever código limpo.

Angular está longe de ser perfeito. O mundo do desenvolvimento web está sempre crescendo e mudando, e há novas e melhores maneiras de resolver problemas. O React e o Flux do Facebook, por exemplo, têm algumas grandes vantagens sobre o Angular, mas vêm com suas próprias desvantagens. Nada é perfeito, mas o Angular foi e ainda é incrível por enquanto. Assim como o jQuery já ajudou o mundo da web a avançar, o Angular também mudou e muitos virão.