1. Estágio inicial
Todos devem saber que, quando o navegador carregar uma página HTML, ele analisará primeiro a página HMTL em uma árvore DOM e depois carregará cada nó de elemento na árvore Dom um por um. Podemos tratar o AngularJS como uma biblioteca JS semelhante ao jQuery. Nós o introduzimos no HTML através da tag <Script>. Neste momento, o Angular será um nó DOM comum, esperando o navegador analisar. Quando o navegador analisa esse nó e descobre que é um arquivo JS, o navegador interrompe a análise dos nós DOM restantes e começa a executar este JS (ou seja, Angular.js). Ao mesmo tempo, o Angular configurará um ouvinte de evento para ouvir o evento DomContent do navegador. Quando o Angular ouve este evento, o aplicativo angular será iniciado.
2. Estágio de inicialização
Após o início do Angular, ele procura a diretiva NG-APP e inicializa uma série de componentes necessários (ou seja, $ injetor, serviço de compilação e $ Rootscope) e, em seguida, inicia a análise da árvore DOM novamente.
3. Compilar e vincular
O Serviço $ Compile encontra elementos DOM com instruções declaradas atravessando a árvore Dom. Ao encontrar um elemento DOM com uma ou mais instruções, ele classifica as instruções (com base na prioridade da instrução) e, em seguida, usa o Serviço $ injetor para encontrar e coletar a função de compilação da instrução e executá -la.
Após a execução do método de compilação de cada nó, o serviço $ compilador chamará a função de link. Esta função de link define o monitoramento para obter instruções vinculadas a um escopo fechado. Esse comportamento cria uma visão ao vivo.
Finalmente, após a conclusão do serviço $ Compile, o tempo de execução do AngularJS está pronto.
4. Estágio de operação
A Angular fornece seu próprio loop de eventos. A instrução em si registra o ouvinte do evento; portanto, quando o evento for acionado, a função de instrução será executada no loop $ digery do AngularJS. O loop $ DIGEST aguardará a lista de expressão $ Watch. Quando as alterações do modelo forem detectadas, a função $ Watch será chamada e, em seguida, a lista de relógios $ é visualizada novamente para garantir que nenhum modelo tenha sido alterado.
Uma vez que o loop $ digery se estabilize e nenhuma alteração em potencial seja detectada, o processo de execução deixa o contexto angular e geralmente retorna ao navegador, e o DOM será renderizado aqui.
Desenhe as principais etapas do processo acima em um gráfico, como segue:
O acima é uma introdução detalhada ao processo de execução do AngularJS. Continuaremos a organizar informações relevantes no futuro. Obrigado pelo seu apoio a este site.