O texto original continua e o livro continua a durar. . . Ainda se refere a http://code.angularjs.org/1.0.2/docs/guide/compiler
1. Resumo
O compilador HTML da Angular permite que os desenvolvedores personalizem a nova sintaxe HTML. O compilador nos permite anexar o comportamento a qualquer elemento ou atributo html, ou mesmo novas tags html, atributos (como <beautiful girl = "cf"> </sicleaction>). Angular chama essas diretivas de comportamentos adicionais.
O HTML possui muitas estruturas de estilo HTML predefinidas que formatam especificamente documentos estáticos (que podem dizer ao navegador como exibir o conteúdo marcado). Suponha que algo precise ser centrado, e não precisamos ensinar ao navegador como fazê -lo (n palavras omitidas aqui). Só precisamos simplesmente adicionar align = "centro" às tags que precisam ser centralizadas. Esta é a melhor coisa da linguagem declarativa.
Mas os idiomas declarativos também têm suas limitações, ou seja, você não pode dizer ao navegador como lidar com a sintaxe fora do escopo predefinido. Por exemplo, não podemos dizer muito ao navegador como alinhar o texto 1/3 do navegador. Então, precisamos de uma maneira de manter o navegador em movimento com os tempos e aprender novas gramáticas.
Angular pré-administra algumas diretivas que são úteis na construção de aplicações. Também podemos criar diretivas exclusivas para nossos próprios aplicativos. Essas extensões diretivas se tornarão a "linguagem específica do domínio" de nossos próprios aplicativos.
Essas compilações ocorrerão apenas no lado do navegador e não requerem as etapas do lado do servidor ou de pré -compilação.
2. Compilador
Como serviço angular, o compilador é responsável por atravessar a estrutura DOM e encontrar propriedades. O processo de compilação é dividido em dois estágios:
1. Compile: atravesse a árvore do nó DOM e colete todas as diretivas. O resultado é uma função de vinculação.
2. Link: vinte as diretrizes a um escopo e crie uma visão ao vivo. Qualquer alteração no escopo será refletida na visualização (atualize a visualização); qualquer atividade de qualquer usuário (alteração) para o modelo será refletida no modelo de escopo (ligação bidirecional). Isso permite que o modelo de escopo reflita o valor correto.
Algumas diretivas, como NG-REPEAT, copiam um elemento específico (combinação) uma vez para cada elemento da coleção. Compilação e vinculação são duas etapas para melhorar o desempenho. Como o modelo clonado só precisa ser compilado uma vez e vincular os elementos em cada coleção uma vez (semelhante ao cache do modelo).
3. Diretiva
A diretiva é um comportamento que é acionado quando uma estrutura HTML específica é encontrada durante a compilação. As diretivas podem ser colocadas no nome, atributo, classe e até comentários dos elementos. Aqui estão algumas maneiras de fazer referência a NG-Bind (uma diretiva interna):
<span ng-bind = "exp"> </span> <pan> </span> <ng-bind> </ng-bind> <!-Diretiva: ng-bind exp->
A diretiva é apenas uma função que é executada quando o compilador a encontra no DOM. A documentação da API da diretiva explica em detalhes como criar uma diretiva.
Aqui está uma amostra que permite que um elemento jogue esconde-esconde com seu mouse ...
<! Doctype html> <html lang = "zh-cn" ng-App = "Hideankseek"> <head> <meta charset = "utf-8"> <title> oculto e procuram </title> <style type = "text/css"> .ng-cloak {exibir: nenhum; } </style> </ad Head> <body> <span wildcat> Eu fui embora assim que toquei ~~ venha-me ~~ </span> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> angular.mcript "> função ($ document) {var maxleft = 400, maxtep = 300; "Posição": "Absoluto", "Border": "1px Solid Green"}); }Adicionar o atributo "Wildcat" a qualquer elemento fará com que o elemento tenha um novo comportamento. Dessa forma, ensinamos ao navegador a lidar com elementos que se escondem e buscam (não se preocupe, você não está em uma determinada sala, não pendurará -_-!). Expandimos o "vocabulário" do navegador nessa abordagem. Esta é uma maneira relativamente natural para quem está familiarizado com as regras HTML.
É tarde da noite agora e continuaremos amanhã. . . Vejo você depois do anúncio
======================== Linha dividida linda ================================
4. Entenda a visão (visualização)
Existem muitos sistemas de modelo fora, que geralmente se conectam aos dados através de seqüências de caracteres de modelo, geram a sequência HTML final e escreva o resultado em um elemento através do atributo InnerHTML.
Isso significa que, quando quaisquer dados mudam, os dados e modelos precisam ser mesclados novamente em seqüências de caracteres e, em seguida, são gravados no elemento correspondente como InnerHTML. Existem alguns problemas aqui: (eu realmente não consigo entender a tradução literal aqui ... apenas você) suponha que exista essa cena e o modelo contém a caixa de entrada. O usuário insere a caixa de entrada e o modelo é atualizado de maneira síncrona. Modelos normais Atualizar visualizações através do InnerHTML, Strings and Data Connections, que interromperão a entrada do usuário e terão uma experiência ruim.
Angular é único. O Angular Compiler (compilador) processa DOM através de diretivas, não processando modelos de string. O resultado do processamento é uma função de vinculação que combina com o modelo de escopo e gera um modelo em tempo real. A ligação da visão ao modelo de escopo é transparente para nós. Os desenvolvedores não precisam executar nenhuma ação para atualizar visualizações ou modelos. Além disso, como o modelo de visualização não é atualizado com o InnerHTML, a entrada do usuário não será interrompida. Além disso, as diretivas angulares podem não apenas vincular os valores de texto, mas também serem construções comportamentais.
Esse método de processamento de angular produz um DOM estável. Isso significa que, durante o ciclo de vida do elemento DOM, ele está sempre ligado a uma instância de um determinado modelo, e esse relacionamento não mudará. Isso também significa que o código pode manter uma referência a um objeto DOM, registrar funções de evento e que essa referência não será destruída pela fusão de dados de modelo.