Visão geral
O compilador HTML do AngularJS permite que o navegador reconheça a nova sintaxe HTML. Ele permite que você associe comportamentos a elementos ou atributos HTML e até permite criar novos elementos com comportamentos personalizados. AngularJS chama esse comportamento estendido a "instruções"
O HTML possui muitas estruturas declarativas para controlar o formato ao escrever páginas estáticas. Por exemplo, se você deseja centralizar um conteúdo, não precisa dizer ao navegador para "encontrar o ponto médio da janela e combiná -lo com o meio do conteúdo". Você só precisa adicionar um atributo align = "Center" ao elemento que precisa ser centrado. Este é o poder da linguagem declarativa.
Mas os idiomas declarativos também têm algo que não pode ser alcançado, e uma das razões é que você não pode usá -lo para permitir que os navegadores reconheçam a nova sintaxe. Por exemplo, se você não centralizar o conteúdo, mas para 1/3 da esquerda, ele não poderá fazê -lo. Portanto, precisamos de uma maneira de permitir que o navegador aprenda nova sintaxe HTML.
Os alunos do AngularJS vêm de algumas instruções que são muito úteis para criar aplicativos. Também esperamos que você possa criar algumas instruções úteis para seus próprios aplicativos. Essas instruções estendidas são o "idioma específico do domínio" que você cria o aplicativo.
O processo de compilação ocorrerá no lado do navegador; O lado do servidor não participará de nenhuma etapa, nem será pré -compilado.
Complier
O compilador é um serviço fornecido pelo AngularJS. Ele procura propriedades relacionadas a ele atravessando o DOM. Todo o processo de compilação é dividido em dois estágios.
1. Compilação: atravesse o DOM e colete todas as instruções relevantes para gerar uma função de link.
2. Link: vincule um escopo à diretiva e gerar uma visualização dinâmica. Quaisquer alterações no modelo de escopo serão refletidas na visualização e quaisquer ações do usuário na visualização serão refletidas no modelo de escopo. Isso torna o modelo de escopo a única coisa com a qual você precisa se preocupar na lógica da sua empresa.
Existem algumas instruções, como o NG-REPEAT, que clão todos os elementos DOM no conjunto de dados uma vez. A prática de dividir todo o processo de compilação em dois estágios: a compilação e a ligação melhora o desempenho geral, porque o modelo clonado só precisa ser compilado uma vez no total e depois vinculado às suas respectivas instâncias modelo.
instrução
A diretiva indica "a ação que deve ser realizada quando a estrutura HTML associada entra na fase de compilação". As diretivas podem ser escritas em nome do elemento, no atributo, no nome da classe CSS e nos comentários. Abaixo estão vários exemplos de uso da diretiva NG-Bind com a mesma função.
A cópia do código é a seguinte:
<span ng-bind = "exp"> </span>
<span> </span>
<ng-bind> </ng-bind>
<!-Diretiva: ng-bind exp->
As diretrizes são essencialmente apenas funções que precisam ser executadas quando o compilador compila com o DOM relevante. Você pode encontrar informações mais detalhadas sobre as diretivas na documentação da API da diretiva.
Abaixo está um comando que torna os elementos arrastáveis. Observe o atributo draggable no elemento <span>.
index.html:
A cópia do código é a seguinte:
<! doctype html>
<html ng-app = "arrastar">
<head>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<Body>
<span draggable> me arraste </span>
</body>
</html>
script.js:
A cópia do código é a seguinte:
Angular.Module ('Drag', []).
Diretiva ('Draggable', função ($ document) {
var startx = 0, starty = 0, x = 0, y = 0;
Função de retorno (escopo, elemento, attr) {
element.css ({
Posição: 'relativa',
fronteira: '1px vermelho sólido',
BackgroundColor: 'Lightgrey',
Cursor: 'Ponteiro'
});
Element.Bind ('Mousedown', função (evento) {
startx = event.screenx - x;
starty = event.screeny - y;
$ document.bind ('mousemove', mousemove);
$ document.bind ('mouseup', mouseup);
});
função mousemove (evento) {
y = Event.Screeny - Starty;
x = event.screenx - startx;
element.css ({
topo: y + 'px',
Esquerda: x + 'px'
});
}
function mouseup () {
$ document.unbind ('mousemove', mousemove);
$ document.unbind ('mouseup', mouseup);
}
}
});
Esse novo comportamento pode ser alcançado adicionando o atributo draggable. A beleza de nossa melhoria é que fornecemos ao navegador novos recursos. Usamos uma maneira natural de expandir a capacidade do navegador de entender novos comportamentos e novas sintaxes, desde que o desenvolvedor esteja familiarizado com as regras HTML.
Entenda a visão
Existem muitos sistemas de modelo online. A maioria deles "liga modelos e dados estáticos de caracteres, gera novos caracteres e insira -os nos elementos da página através do InnerHTML".
Isso significa que quaisquer alterações nos dados farão com que os dados sejam recombinados com o modelo para gerar novos caracteres e depois inseridos no DOM. Os problemas que surgem incluem: a entrada do usuário precisa ser lida e combinada com dados do modelo, a entrada do usuário precisa ser substituída, todo o processo de atualização precisa ser gerenciado manualmente e a falta de expressões ricas.
AngularJS é diferente. O compilador AngularJS usa DOM com instruções, em vez de modelos de string. Ele retorna uma função de link, que combina com o modelo de escopo para gerar uma visualização dinâmica. O processo de ligação dessa visão e modelo é "transparente". O desenvolvedor não precisa fazer nada sobre atualizar a visualização. E o aplicativo não usa o InnerHTML, portanto, não precisamos substituir a entrada do usuário. Mais particularmente, as diretrizes do Angular podem não apenas usar a ligação das cordas, mas também usar algumas estruturas que indicam comportamento.
A compilação AngularJS gerará um "DOM estável". Isso significa que as instâncias dos elementos DOM vinculados ao modelo de dados não mudarão durante o ciclo de vida da ligação. Isso também significa que o código pode obter referências de instância dos elementos DOM e eventos de registro, sem se preocupar que essa referência seja perdida quando o modelo e os dados forem combinados.