Pessoalmente, acho que você precisa entender bem o mecanismo operacional dos angulares, para evitar cair no poço o máximo possível. Neste artigo, farei uma análise mais clara e detalhada do que o AngularJS fez após o início das informações on -line e no meu próprio entendimento.
Primeiro, vamos dar uma olhada no que Angular fez passo a passo.
<! doctype html> <html ng-app> <head> <script src = "angular.js"> </sCript> </ad Head> <body> <png-init = "name = 'World'"> hello {name}}!Quando você usa o navegador para acessar o index.html, o navegador faz as seguintes coisas por sua vez:
Todo o processo pode ser representado por esta imagem:
OK, através do exemplo acima, podemos entender como o AngularJS renderiza uma página passo a passo. Então, como ele interage com o loop de eventos do navegador? Ou como você interage com os usuários? Brevemente falando, é dividido principalmente em três etapas:
1. O loop de eventos do navegador está aguardando o acionamento do evento, incluindo interação do usuário, eventos de tempo ou eventos de rede (como respostas ao servidor etc.);
2. Depois que um evento é acionado, ele entrará no contexto JavaScript e o DOM geralmente é modificado através de funções de retorno de chamada;
3. Depois que a função de retorno de chamada é executada, o navegador renderiza a nova página de acordo com o novo DOM.
Como mostrado na figura abaixo, o processo de interação é composto principalmente por vários ciclos:
O AngularJS modifica os fluxos de trabalho gerais de JavaScript e fornece seu próprio mecanismo de manuseio de eventos. Isso separa o contexto JavaScript em duas partes, uma é o contexto nativo de JavaScript e o outro é o contexto AngularJS. Somente operações no contexto do AngularJS podem desfrutar de ligação angular de dados, manuseio de exceções, observação de propriedades e outros serviços. No entanto, o Angular não é ignorado para pessoas de fora (como operações nativas de JavaScript, retornos de chamada de eventos personalizados, bibliotecas de terceiros etc.). Você pode usar a função $ APLAP () fornecida pelos AngularJs para envolver esses forasteiros no contexto do AngularJS, para que o Angular possa sentir as mudanças que eles fizeram.
Em seguida, vamos dar uma olhada em como esses ciclos funcionam durante o processo de interação?
1. Primeiro de tudo, o navegador estará no estado de escuta. Depois que um evento for acionado, ele será adicionado a uma fila de eventos e os eventos na fila de eventos serão executados um por um.
2. Se o evento na fila de eventos for embrulhado por $ apply (), ele entrará no contexto do AngularJS. O fn () aqui está a função que queremos executar no contexto dos angulares.
3. AngularJS executará a função fn (). Geralmente, essa função altera alguns estados do aplicativo.
4. Em seguida, o AngularJS entrará no loop $ DIGEST, composto por dois pequenos loops. Um loop é usado para processar a fila $ avaliAnc (usada para agendar algumas operações que precisam ser processadas antes de renderizar a visualização, geralmente implementada através do setTimeout (0), que será mais lento e pode causar a visualização de visualização). Um loop é usado para processar a lista de relógios $ (uma coleção de algumas expressões. Quando ocorre uma alteração, a função $ Watch será chamada). O loop $ Digest continuará iterando quando souber que a fila $ avaliadas está vazia e a lista de relógios $ também está vazia, ou seja, o modelo não mudará mais.
5. Uma vez que o loop $ Digest of AngularJS termine, toda a execução deixará o contexto de AngularJS e JavaScript e, em seguida, o navegador renderá a visualização após a alteração dos dados.
Em seguida, vamos analisá -lo em combinação com o código:
<! doctype html> <html ng-app> <head> <script src = "angular.js"> </sCript> </ad Head> <body> <input ng-model = "name"> <p> hello {{name}}!A única diferença entre este código e o código anterior é que há uma entrada para receber a entrada do usuário. Ao acessar este arquivo HTML com um navegador, a diretiva NG-Model na entrada vinculará o evento KeyDown à entrada e recomendará um $ relógio à variável de nome para receber a notificação da alteração do valor da variável. Durante a fase interativa, ocorre a seguinte série de eventos:
1. Quando o usuário pressiona uma tecla no teclado (por exemplo, a), o evento KeyDown na entrada é acionado;
2. A instrução sobre a entrada detecta a alteração no valor na entrada e as chamadas $ aplicar ("nome = 'a'") para atualizar o modelo no contexto AngularJS;
3. AngularJS atribui 'a' para nomear;
4. O loop $ Digest inicia, a lista de relógios $ detecta uma alteração no valor do nome e notifica a expressão {{name}} para atualizar o DOM;
5. Saia do contexto dos angulares e, em seguida, saia do evento KeyDown no contexto do JavaScript;
6. O navegador renderiza a vista.
O exposto acima é uma coleção de informações sobre o princípio de trabalho dos angulares. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!