Introdução aos Eventos AngularJS
O AngularJS pode ser descrito como uma estrutura JavaScript usada para estabelecer aplicativos de página única (SPA) para dispositivos móveis e também para o desenvolvimento da web. O SPA é uma página única, onde muito do conhecimento continua sendo semelhante no suporte a alguns bits de dados que podem ser personalizados conforme você clica em categorias / opções adicionais. Todo esse procedimento pode aliviar seu trabalho, simplesmente permitindo o custo, aumentando a eficiência e também o carregamento da página da Web mais rapidamente. Neste tópico, vamos aprender sobre os eventos AngularJS.
Ao usar o AngularJS, você pode trabalhar com diretivas e usar atributos HTML simplesmente vinculando dados ao HTML com as expressões. O AngularJS pode ser uma arquitetura MVC que simplifica a criação de aplicativos da Web desde o início. O AngularJS 1.0 foi lançado em 2010 e, se discutirmos hoje; a versão mais recente do AngularJS pode ser a 1.7.8, lançada em março de 2019. O AngularJS também é uma estrutura de código aberto gerenciada pelo Google simplesmente usando uma enorme comunidade de programadores.
Pré-requisitos
Antes de avançar para o AngularJS, você precisa ter um conhecimento fundamental de
- Javascript
- HTML
- CSS
Noções básicas de AngularJS
Aqui estão os conceitos básicos do AngularJS
Diretivas
O prefixo ng significa AngularJS. ng- pode ser descrito como prefixo reservado para diretivas de chave Angular. Para evitar colisões, eles podem sugerir que você nunca utilize o prefixo ng exato em suas diretivas posteriormente na versão do Angular. Ng pode ser uma abreviação de Angular.
Instâncias de algumas das diretivas no AngularJS
- A diretiva ng-new pode ser usada para produzir uma nova aplicação Angular
- A diretiva ng-update atualiza seus aplicativos incríveis e também suas dependências
- A diretiva ng-app pode ser usada para inicializar um aplicativo AngularJS.
- A diretiva ng-init inicializa as informações do aplicativo.
A diretiva ng-app também explica ao AngularJS qual elemento é um "empreendedor" com o aplicativo AngularJS.
Expressões
- As expressões através do AngularJS serão descritas entre colchetes duplos: expression.
- Para escrever uma expressão dentro de uma diretiva: ng-bind = ”expression”.
Por exemplo
Resultado:
Controlador
- A aplicação do AngularJS será controlada simplesmente por Controladores.
- O controlador de aplicativo pode ser descrito com uma diretiva ng-controller
- Um controlador é conhecido como um objeto JS, construído com um construtor de objeto JS regular.
Explain AngularJS Events
Diferentes tipos de eventos localizados no AngularJS
O AngularJS é incrivelmente cheio de eventos e inclui um modelo básico de como você pode adicionar ouvintes de eventos ao HTML. Facilita muitos eventos associados ao mouse e teclado. A maioria desses eventos será colocada em um elemento HTML. Caso você tenha escrito HTML e também eventos AngularJS simultaneamente, após a execução dos dois eventos, isso significa que um evento AngularJS nunca substituirá um evento HTML.
Alguns dos eventos essenciais são os seguintes.
- ng-copy
- ng-click
- ng-cut
- ng-dblclick
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-blur
Vamos analisar se comunicando com eventos.
O JS angular inclui um barramento de eventos global que permite gerar eventos em um escopo e permitir que outros escopos atendam esse evento e respondam a ele. Você pode passar argumentos adicionais com o evento para que outros ouvintes possam responder adequadamente ao evento. Os eventos são bastante diretos, mas existem algumas dicas para eles.
Primeiro, ouvindo um evento, você simplesmente chama o método $ on () em um escopo com um parâmetro do nome do evento. Qualquer evento com esse nome acionará seu retorno de chamada. A criação de um evento, por outro lado, requer um pouco de planejamento.
Digamos que eu tenha um evento levantado aqui, no Escopo Criança 1, mas queremos ouvir esse evento no Escopo Criança 2. Infelizmente, não podemos fazer isso acontecer.
Existem duas opções para gerar um evento no Angular JS.
A primeira é chamar o scope. $ Broadcast, que gera o evento no escopo de origem e o envia para todos os escopos filhos.
A outra opção é chamar o escopo. $ emit, que gera o evento no escopo de origem e o envia à cadeia de escopos.
Mas não existe uma maneira verdadeiramente global de transmitir do escopo de uma criança. A maneira de fazer isso acontecer é obter o $ rootScope e chamar $ broadcast nele, que o envia a todos os escopos filhos.
Agora vamos ajustar nosso código para fazê-lo funcionar com eventos em vez de escopos herdados. Portanto, o primeiro problema que percebemos que queremos resolver um evento é o fato de que aqui, no controlador Catalog, esse método registerCourse () está chamando push diretamente nos dados do planejamento. Esse não é o seu trabalho.
Adicionar itens à agenda não é algo que o controlador do Catálogo deve fazer. Em vez disso, o que deveria ser feito é notificar outra pessoa de que um curso está sendo registrado e confiar que outros objetos adicionarão as correções do curso à programação. Portanto, o objeto que deve lidar com o cronograma é o controlador de agendamento, é claro.
Então, vamos ao controlador de agendamento e adicione um ouvinte de evento. Chamaremos nosso curso de evento registrado. O primeiro parâmetro para um retorno de chamada para um evento é um objeto de evento e, em seguida, qualquer parâmetro adicional que você coloca quando gera o evento.
Então, vamos planejar o fato de que quem criou o evento também colocará o curso que o criou. Então, a partir daqui, podemos fazer a lógica que foi originalmente criada no método registerCourse () aqui.
Agora, em vez de confiarmos na programação para estar no escopo $, já vamos retirar o escopo $ e apenas trazer o serviço agendado. E como trazemos a programação aqui, não precisamos mais trazê-la para o nosso controlador de registro.
Portanto, podemos pegar essa linha aqui, movê-la para o nosso controlador de agendamento e agora remover essa dependência do controlador de registro.
Agora é ótimo que tenhamos ouvido o evento aqui, mas ninguém está promovendo esse evento. O local aqui no método registerCourse () no controlador do Catalog.
O controlador de catálogo não pode gerar um evento que possa ser ouvido pelo controlador de agendamento porque eles são irmãos. Portanto, o que precisamos fazer é trazer uma dependência do $ rootScope.
A partir daqui, podemos chamar $ rootScope. $ Broadcast () aumentamos o evento que estamos procurando e adicionamos o parâmetro que precisa estar nesse evento.
Agora temos outra coisa que podemos limpar. Bem aqui, chamamos $ scope.notify, mas já estamos promovendo o evento em que registramos o curso. Deveríamos deixar alguém lidar com a notificação sempre que qualquer curso for registrado.
Então, vamos voltar ao nosso controlador de registro e adicionar um ouvinte de evento.
E a partir daqui, podemos chamar o código para fazer a notificação. Parece muito mais apropriado fazer isso no controlador de registro, já que é o local onde definimos o método notify ().
Vamos verificar essa saída no navegador e ver como funciona.
Nossas mudanças deram certo.
Agora, vamos analisar o código e analisar os benefícios e as desvantagens do uso de eventos. O primeiro benefício que percebemos que gostamos é que a lógica em cada um dos controladores tem algo a ver com esse controlador.
O controlador do catálogo tem lógica para aumentar o evento quando alguém clica no botão Registrar curso e a lógica para marcar um curso registrado. O agendamento tem a lógica de incluir os itens no agendamento e o controlador de registro tem a lógica das notificações. Por esse motivo, não temos um controlador que traga serviço com o qual eles não têm nada a ver.
Além disso, nosso controlador raiz não está cheio de dependências com as quais não tem nada a ver. Existem algumas desvantagens. Qualquer pessoa que lida com um evento pode cancelar esse evento. Isso pode levar a erros ruins.
Se algum manipulador específico cancelar um evento e um ouvinte que ainda precisa ouvir sobre esse evento não foi processado. Estamos acoplando nosso controlador a esses eventos.
A desvantagem dos eventos é que usamos uma string para o nome do evento e é difícil evitar conflitos de nomes de eventos.
A única proteção existente é uma boa estratégia de nomeação para nomes de eventos.
Conclusão - Eventos AngularJS
- Elimina o estado do servidor
- Ativa o conhecimento do aplicativo nativo
- Coloca a lógica de visualização facilmente no JavaScript
- Requer informações inovadoras sobre habilidades, bem como procedimentos
Artigos recomendados
Este é um guia para os eventos do AngularJS. Aqui discutimos os fundamentos do AngularJS e explicamos o evento AngularJS com os exemplos. Você também pode consultar os seguintes artigos para saber mais -
- Teste de unidade AngularJS
- Arquitetura AngularJS
- Diretivas AngularJS
- Carreira no AngularJS
- Os 5 principais atributos de eventos HTML com exemplos
- Guia para diferentes eventos JavaScript