Apresentamos uma tradução de um artigo da Aditya Modi publicado em blog.bitsrc.io. Este artigo é sobre o uso do jQuery em aplicativos angulares.
Com pouca frequência, pego algo com cautela. No entanto, desta vez, a cautela não será prejudicial, pois a integração do jQuery no Angular não é tão simples.
Por que, de fato, eu escrevi este artigo? Às vezes, o jQuery é realmente necessário para o desenvolvimento no Angular, no entanto, essas estruturas JavaScript são extremamente raramente associadas a esta biblioteca. A Angular é responsável por renderizar e gerenciar o DOM e, se você fizer alterações no jQuery, corre o risco de obter um resultado extremamente inesperado.
Dica : Usando
Bit , você pode compartilhar rapidamente componentes Angular e reutilizá-los em seus aplicativos. Isso permitirá que você e sua equipe gastem menos tempo criando novos aplicativos. Experimente.
Seja como for, em algumas situações, a interferência com a estrutura é necessária, justificada, pode ser uma saída real. Esses casos não são abordados no meu blog, no entanto, talvez eu fale sobre eles nos próximos artigos. Agora, deixe-me mostrar como adicionar a biblioteca jQuery ao Angular. Neste tutorial, usarei o VS Code. Você pode escolher outro editor de código ou baixar o
Visual Studio Code para Windows, Linux e macOS .
Integração JQuery em Angular
Primeiro de tudo, precisamos criar um aplicativo Angular usando o comando
ng new . Em seguida, com a ajuda do
cd para a pasta em que a biblioteca jQuery será instalada através do npm. Vamos chamar o aplicativo resultante
angularmeetsjquery .
ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save
Parece ótimo, mas o purista do jQuery prefere fazer o download via CDN do jQuery, em vez do npm. CDN é uma maneira alternativa de adicionar uma biblioteca jQuery a um aplicativo Angular, mas eu prefiro usar o método npm. Se você consultar
https://jquery.com/download/ , encontrará as bibliotecas jQuery CDN e outras redes CDN do Google, Microsoft, CDNJS e jsDelivr. Eu recomendaria a versão oficial mais recente da CDN, pois ela suporta o mecanismo SRI (Subresource Integrity).
Para usar a CDN do jQuery, basta criar um link para o arquivo na tag de
script diretamente do domínio da CDN do jQuery. O código com a função Integridade do sub-recurso terá esta aparência. (Como você pode ver, estou usando a biblioteca jQuery versão 3.3.1.)
<script src=”https:
O script pode ser copiado do recurso code.jquery.com. Em seguida, você precisa inseri-lo no arquivo
index.html no final da tag <
body >.
Tornando a biblioteca jQuery global
O arquivo
jquery.min.js , localizado na pasta dis do módulo jQuery, não é público (o nome correto da pasta é dist. -
Aprox. Ed. ). Para tornar a biblioteca jQuery global, acesse o arquivo
.angular-cli.json e escreva nele um link para o caminho para o arquivo jQuery.
Ao transferir um link para um caminho de arquivo dentro de um aplicativo Angular, a pasta raiz é src. No entanto, a biblioteca jQuery está dentro do diretório
node_modules . Portanto, você precisa determinar o caminho correto para o
.angular-cli.json .
../node_modules/jquery/dist/jquery.min.js
Para garantir que o caminho esteja correto, acesse o
node_modules→jquery→dist→jquery.min.js . Aqui você pode ver o caminho especificado, o que significa que a biblioteca jQuery foi adicionada globalmente para este aplicativo. Não espere que a página localhost: 4200 no seu navegador seja recarregada, porque o arquivo está localizado fora da pasta src. Para que as alterações apareçam no aplicativo, você precisará reiniciá-lo.
ng serve –open
Usando jQuery em um aplicativo angular
Para começar a usar a biblioteca jQuery com a estrutura Angular, você precisa acessar os componentes do aplicativo. Mostrarei como essas duas tecnologias podem funcionar em conjunto com um simples elemento HTML de
button . Mas primeiro, exclua todas as linhas de código no arquivo
app.component.html e adicione o elemento HTML do
button .
<button> Click me </button>
A página será recarregada automaticamente e um botão aparecerá.
Precisamos definir o caractere para jQuery no arquivo
app.component.ts .
declare var $: any;
Em seguida, insira o gancho do ciclo de vida do
ngOnInit . Para fazer isso, você pode importar o OnInit do Angular Core.
import { Component, OnInit} from '@angular/core';
Adicione
ngOnInit .
export class AppComponent implements OnInit {
Independentemente da disponibilidade do DOM, você pode escrever o código jQuery dentro do método
ngOnInit , como é feito no desenvolvimento padrão de aplicativos da web. Para testar o botão criado em
app.component.html , adicione o evento
button.click ao método
button.click .
export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } }
Se você clicar no botão, “Wass Up” aparecerá.
Conclusão
Adicionar jQuery ao Angular e usar esse pacote é uma idéia duvidosa.
Sim, à primeira vista, o método parece simples. No entanto, como eu disse no começo do artigo, por mais tentador que pareça o uso conjunto dessas duas tecnologias, a ideia geralmente acaba sendo ruim. Nos aplicativos Angular do mundo real, você precisa lidar com coisas muito mais complexas do que o elemento do
button HTML relacionado ao evento. Meu conselho a todos
que trabalham com a Angular e procuram uma oportunidade de incorporar o jQuery no código TypeScript: se não for necessário, não. Desejo-lhe experiências bem-sucedidas no campo do jQuery e Angular!