"Pensando em AngularJS", se eu tenho um fundo jQuery?

Suponha que eu esteja familiarizado com o desenvolvimento de aplicativos clientes no jQuery , mas agora gostaria de começar a usar o AngularJS . Você pode descrever a mudança de paradigma que é necessária? Aqui estão algumas perguntas que podem ajudá-lo a formar a resposta:

  • Como faço para criar e criar aplicativos da Web do cliente de maneira diferente? Qual a diferença?
  • O que devo parar de fazer / usar; O que devo começar a fazer / usar em vez disso?
  • Existe alguma consideração / limitação do lado do servidor?

Eu não estou procurando uma comparação detalhada entre jQuery e AngularJS .

4523
21 февр. definir por Mark Rajcok em 21 de fev 2013-02-21 07:09 '13 às 7:09 2013-02-21 07:09
@ 15 respostas

1. Não crie sua página e, em seguida, altere-a usando a manipulação DOM

No jQuery, você cria uma página e a cria dinamicamente. Isto é devido ao fato de que jQuery foi projetado para crescer e cresceu incrivelmente fora desta premissa simples.

Mas no AngularJS você tem que começar do zero, tendo em mente sua arquitetura. Em vez de pensar que “eu tenho essa parte do DOM, e eu quero fazer isso, faça X”, você deve começar com o que você quer, e então começar a desenvolver sua aplicação, e então finalmente começar a desenvolver sua apresentação.

2. Não aumente o jQuery com o AngularJS

Da mesma forma, não comece com a ideia de que o jQuery faz X, Y e Z, então adicionarei o AngularJS em cima disso para modelos e controladores. É realmente tentador quando você está apenas começando, então eu sempre recomendo que os novos desenvolvedores do AngularJS nunca usem o jQuery, pelo menos até que eles se acostumem com o que eles fizeram no “Angular way”.

Eu vi muitos desenvolvedores aqui e na lista de discussão criarem essas soluções complexas com plug-ins jQuery de 150 ou 200 linhas de código que são então coladas no AngularJS com um conjunto de callbacks e $apply que confundem e confundem; mas no final eles trabalham! O problema é que na maioria dos casos, quando o plugin jQuery pode ser reescrito em AngularJS em um trecho de código, de repente tudo fica claro e compreensível.

A linha inferior é que: ao resolver um problema, primeiro "pense em AngularJS"; se você não conseguir uma solução, pergunte à comunidade; se depois de tudo isso não houver uma solução simples, sinta-se à vontade para entrar em contato com a jQuery. Mas não deixe o jQuery se tornar uma muleta, ou você nunca dominará o AngularJS.

3. Sempre pense em termos de arquitetura.

É sabido primeiramente que aplicativos de uma página são aplicativos. Esta não é uma página da web. Portanto, precisamos pensar como um desenvolvedor do lado do servidor e não pensar como um desenvolvedor cliente. Precisamos pensar em como dividir nosso aplicativo em componentes separados, extensíveis e testáveis.

Então, como você faz isso? O que você acha do AngularJS? Aqui estão alguns princípios gerais, ao contrário do jQuery.

A submissão é o "registro oficial"

No jQuery, nós programaticamente alteramos a visualização. Podemos ter um menu drop-down chamado ul como:

Home </li> <li> <a href="#/menu1">Menu 1</a> <ul> <li><a href="#/sm1">Submenu 1</a></li> <li><a href="#/sm2">Submenu 2</a></li> <li><a href="#/sm3">Submenu 3</a></li> </ul> </li> <li> <a href="#/home">Menu 2</a> </li> </ul> 

Em jQuery, em nossa lógica de aplicativo, nós o ativamos com algo como:

Esses dois fazem o mesmo, mas na versão do AngularJS, qualquer um que olha o modelo sabe o que precisa acontecer. Sempre que um novo membro da equipe de desenvolvimento entra em cena, ela pode examiná-lo e, em seguida, saber que a diretiva do dropdownMenu do dropdownMenu está no lugar; ela não precisa digitar a resposta correta ou filtrar qualquer código. Um olhar nos disse o que iria acontecer. Muito mais limpo.

Desenvolvedores novatos no AngularJS frequentemente perguntam como encontrar todos os links de um tipo específico e adicionar diretivas a eles. O desenvolvedor está sempre atordoado quando nós respondemos: você não faz. Mas a razão pela qual você não faz isso é que é meio jQuery, meio AngularJS e nada de bom. O problema aqui é que o desenvolvedor está tentando "executar o jQuery" no contexto do AngularJS. Isso nunca vai funcionar bem. A submissão é uma entrada oficial. Fora da diretiva (mais sobre isso abaixo), você nunca altera o DOM. E as diretivas são aplicadas na submissão, então a intenção é clara.

Lembre-se: não crie e marque. Você tem que arquiteto e depois projetar.

Ligação de dados

Este é definitivamente um dos recursos mais incríveis do AngularJS, e elimina a necessidade de fazer os tipos de manipulações de DOM que mencionei na seção anterior. O AngularJS atualizará automaticamente sua apresentação para que você não precise! No jQuery, respondemos a eventos e, em seguida, atualizamos o conteúdo. Algo como:

 <ul class="messages" id="log"> </ul> 

Além de misturar problemas, também temos os mesmos problemas que significam intenções que mencionei anteriormente. Mas, mais importante, tivemos que invocar e atualizar manualmente o nó DOM. E se quisermos excluir uma entrada de log, também devemos copiar o código do DOM. Como testamos a lógica separadamente do DOM? E se quisermos mudar a apresentação?

É um pouco confuso e um pouco frágil. Mas no AngularJS podemos fazer isso:

 <ul class="messages"> <li ng-repeat="entry in log">{{ entry.msg }}</li> </ul> 

Mas, a esse respeito, nossa visão pode ser assim:

separação de problemas e oferece uma possibilidade muito maior de verificação.  Outras respostas mencionaram esse ponto, então vou deixar por aqui. 

Separação de problemas

E todos os links acima descrevem este tópico complexo: mantenha seus problemas separados. Sua opinião serve como um relatório oficial do que deve acontecer (na maioria das vezes); seu modelo representa seus dados; você tem um nível de serviço para executar tarefas reutilizáveis; você manipula o DOM e expande sua visão com diretivas; e você cola tudo junto com os controladores. Isso também é mencionado em outras respostas, e a única coisa que gostaria de acrescentar diz respeito à testabilidade, que discutirei em outra seção abaixo.

Ativar dependências

Para nos ajudar com a separação de problemas, injeção de dependência (DI). Se você usa uma linguagem do lado do servidor (do Java para o PHP ), provavelmente já está familiarizado com esse conceito, mas se você é um cliente da jQuery, esse conceito pode parecer algo do bobo ao desnecessário ao hipster. Mas isso não é assim: -)

De uma perspectiva ampla, DI significa que você está livre para declarar componentes e, em seguida, de qualquer outro componente, basta solicitar uma cópia e será fornecido. Você não precisa saber a ordem de inicialização, a localização dos arquivos ou algo parecido. A força pode não ser imediatamente visível, mas darei apenas um exemplo (comum): teste.

Digamos, em nosso aplicativo, precisamos de um serviço que implemente o armazenamento do servidor por meio da API REST e, dependendo do estado do aplicativo, o armazenamento também seja local. Ao realizar testes em nossos controladores, não queremos entrar em contato com o servidor - ainda testamos o controlador. Podemos simplesmente adicionar um layout de serviço com o mesmo nome do nosso componente original, e o injetor irá garantir que nosso controlador receba um falso automaticamente - nosso controlador não sabe e não deve saber a diferença.

Falando de provações ...

4. Desenvolvimento baseado em testes - sempre

Isso é realmente parte da seção 3 sobre arquitetura, mas é tão importante que eu a coloque em minha própria seção de nível superior.

De todos os plugins do jQuery que você viu, usou ou escreveu, quantos deles tinham uma suíte de testes? Não muito, porque o jQuery não é muito receptivo a isso. Mas o AngularJS é.

No jQuery, a única maneira de testar é criar um componente independentemente com uma página de amostra / demonstração, com a qual nossos testes podem executar manipulações DOM. Então, precisamos desenvolver o componente separadamente e depois integrá-lo ao nosso aplicativo. Que estranho! Tanto tempo, quando desenvolvemos com jQuery, escolhemos uma opção iterativa em vez de um desenvolvimento baseado em testes. E quem pode nos culpar?

Mas como temos uma separação de problemas, podemos testar o desenvolvimento iterativamente no AngularJS! Por exemplo, digamos que queremos que uma diretiva supersimples indique em nosso menu qual é a rota atual. Podemos dizer o que queremos do ponto de vista da nossa aplicação:

 

Bem, agora podemos escrever um teste para a diretiva inexistente when-active :

 

E quando executamos nosso teste, podemos confirmar que ele falha. Só agora temos que criar nossa diretiva:

Existem vários erros nisso:

  • Primeiro, o jQuery nunca foi necessário. Aqui nós não fizemos nada que o jQuery precisasse!
  • Em segundo lugar, mesmo que já tenhamos jQuery em nossa página, não há razão para usá-lo aqui; podemos usar apenas angular.element , e nosso componente ainda funcionará quando você entrar em um projeto que não tenha jQuery.
  • Terceiro, mesmo se for assumido que esta diretiva requer jQuery, jqLite ( angular.element ) sempre usará jQuery se tiver sido carregado! Então, não precisamos usar $ - podemos usar apenas angular.element .
  • O quarto, intimamente relacionado ao terceiro, é que os elementos jqLite não devem ser agrupados em $ - o element que é passado para a função de link já será um elemento jQuery!
  • E em quinto lugar, o que mencionamos nas seções anteriores, por que misturamos o material modelo em nossa lógica?

Esta diretiva pode ser reescrita (mesmo para casos muito complexos!) Muito mais fácil:

7185
22 февр. Resposta dada por Josh David Miller 22 de fevereiro 2013-02-22 00:26 '13 às 0:26 2013-02-22 00:26

Imperativo → declarativo

No jQuery, um seletor é usado para procurar o DOM e, em seguida, vincular / registrar manipuladores de eventos. Quando um evento é acionado, esse código (imperativo) atualiza / modifica o DOM.

No AngularJS, você quer pensar sobre views , não sobre elementos DOM. Representações em HTML (declarativas) contendo diretivas AngularJS . As diretivas configuram manipuladores de eventos nos bastidores para nós e nos dão uma vinculação de dados dinâmica. Os seletores raramente são usados, portanto, a necessidade de identificadores (e alguns tipos de classes) é significativamente reduzida. As visualizações estão vinculadas a modelos (por meio de áreas). Visualizações são uma projeção de um modelo. Modelos para alterar eventos (por exemplo, dados, propriedades de região) e exibições que criam esses modelos "automaticamente".

No AngularJS, pense nos modelos, não nos elementos DOM selecionados pelo jQuery que contêm seus dados. Pense em ideias como projeções desses modelos, em vez de registrar retornos de chamada para manipular o que o usuário vê.

Separação de problemas

O jQuery usa JavaScript não obstrutivo - o comportamento (JavaScript) é separado da estrutura (HTML).

O AngularJS usa controladores e diretivas (cada qual pode ter seu próprio controlador e / ou funções de compilação e link) para remover o comportamento da view / structure (HTML). Angular também tem serviços e filtros para ajudar a dividir / organizar sua aplicação.

border=0

Veja também levitrasi.net.site/questions/511 / ...

Design da aplicação

Uma abordagem para desenvolver um aplicativo AngularJS:

  • Pense nos seus modelos. Crie serviços ou seus próprios objetos JavaScript para esses modelos.
  • Pense em como você deseja apresentar seus modelos - seus pontos de vista. Crie modelos HTML para cada apresentação, usando as diretivas necessárias para obter a vinculação dinâmica de dados.
  • Anexe um controlador a cada visualização (usando ng-view e routing ou ng-controller). Peça ao expedidor para localizar / recuperar apenas os dados do modelo que as visualizações devem executar. Faça os controladores tão finos quanto possível.

Herança de protótipo

Você pode fazer muito com o jQuery sem saber como o protótipo da herança do JavaScript funciona. Ao desenvolver aplicativos AngularJS, você evitará alguns erros comuns se tiver uma boa compreensão da herança do JavaScript. Leitura recomendada: Quais são as nuances do volume de herança do protótipo / protótipo no AngularJS?

408
21 февр. Resposta dada por Mark Rajcok 21 de fev. '13 в 7:09 2013-02-21 07:09

AngularJS vs. jQuery