Na verdade, não sei quem deve ser alvo ou por onde começar a escrever, então começarei a escrever de acordo com uma idéia simples.
1.angular.Element
2.angular.bootstrap
Estamos muito claros que o NG-App é aplicado a nós e o Angular ajuda automaticamente a inicializar. O processo de inicialização é dividido nas seguintes etapas
1. Ongular será inicializado automaticamente quando a carga do documento e, primeiro, o nó especificado pela diretiva NG-APP será encontrado.
2. Instruções relacionadas ao módulo de carregamento
3. Crie um injetor relacionado ao aplicativo (Gerenciador de dependência)
4. Comece a compilar DOM com o NG-App estabelecido como o nó raiz
Agora, inicializamos isso e fazemos algo equivalente à diretiva NG-APP. Angular.Element Este é o invólucro, envolvendo o elemento DOM original ou a sequência HTML como elemento jQuery. Angular.Cootstrap pode inicializar manualmente o script, usamos esses dois para inicializar este script
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> bootstrap-manual </ititle>
<style type = "text/css">
.ng-cloak {
Exibir: Nenhum;
}
</style>
</head>
<Body>
Aqui está o exterior do ng-app ~~ {{1+2}}
<div id = "widuu"> isso está em ng-app ~~~ {{1+2}} </div>
<script src = "angular.min.js" type = "text/javascript"> </sCript>
<script type = "text/javascript">
Angular.Element (documento) .ready (function () {
Angular.BootStrap (Angular.Element (document.getElementById ("widuu")));
});
</script>
</body>
</html>
2.Compiler
Vemos claramente que o documento oficial do AngularJS está cheio de nomenclatura de camelo, como NGAPP, NGMODULE, NGBIND, etc., são instruções relacionadas. Entre eles, o HTML Compiler nos permite definir atributos e tags de elemento por nós mesmos. Angular chama essas diretivas de comportamentos adicionais.
A documentação oficial explica o compilador como este
A cópia do código é a seguinte:
Compilador
O compilador é um serviço angular que atravessa o DOM procurando atributos. O processo de compilação ocorre em duas fases.
Compile: atravesse o DOM e colete todas as diretivas. O resultado é uma função de vinculação.
Link: combine as diretivas com um escopo e produza uma vista ao vivo. Quaisquer alterações no modelo de escopo são refletidas na visualização e quaisquer interações do usuário com a visualização são refletidas no modelo de escopo. Isso torna o modelo de escopo a única fonte de verdade.
Algumas diretivas, como o clone ng-repetição, os elementos DOM uma vez para cada item em uma coleção. Ter uma fase de compilação e link melhora o desempenho, pois o modelo clonado só precisa ser compilado uma vez e depois vinculado uma vez para cada instância do clone.
O compilador é um serviço angular, responsável por atravessar os nós DOM e encontrar propriedades. A compilação é dividida em duas etapas:
1. Compilação: atravesse os nós e colete todas as diretivas, retorne 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. Crie sua própria diretiva passo a passo
1. Entenda a diretiva
Primeiro de tudo, entendemos que a diretiva é baseada na nomenclatura de camelo, como o ngmodule. Ao compilar, a partida é assim, por exemplo:
A cópia do código é a seguinte:
<Entre ng-model = "foo">
<Data de entrada de dados: model = "foo">
A diretiva pode usar o X- ou dados como prefixo e pode usar o delimitador :,- ou _ etc para converter métodos de nomeação de camelos, como segue:
A cópia do código é a seguinte:
<span ng-bind = "name"> </span> <br/>
<span ng: bind = "name"> </span> <br/>
<span ng_bind = "name"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
Geralmente, usamos NG-Bind para corresponder a Ngbind, este formato
$ compile pode corresponder à diretiva com base no nome do elemento, atributo, nome da classe e comentário
A cópia do código é a seguinte:
<meu-Dir> </ meu-Dir>
<span my-Dir = "exp"> </span>
<!-Diretiva: My-Dir Exp->
<span> </span>
Durante o processo de compilação, o compilador corresponde ao texto com expressões incorporadas em atributos (como {{algo}}) através do serviço $ interpolate. Essas expressões serão registradas como relógios e serão atualizadas juntas como parte do ciclo Digest. Aqui está uma interpolação simples:
<img src = "img/{{nome de usuário}}. jpg"/> hello {{userrame}}!
2. Etapas de compilação
Três etapas para "compilar" HTML:
1. Primeiro, converta HTML em objetos DOM através da API padrão do navegador. Este é um passo muito importante. Porque o modelo deve ser parsável (compatível com as especificações). Isso pode ser comparado com a maioria dos sistemas de modelos, que geralmente são baseados em strings, não em elementos DOM.
2. A compilação do DOM é feita chamando o método $ comply (). Este método atravessa o DOM e corresponde à diretiva. Se a correspondência for bem -sucedida, ela será adicionada à lista de diretivas juntamente com o DOM correspondente. Enquanto todas as diretrizes associadas ao DOM especificado forem identificadas, elas serão classificadas em prioridade e executarão sua função compilation () nessa ordem. A função de compilação da diretiva tem a oportunidade de modificar a estrutura DOM e é responsável por gerar a análise da função Link (). O método $ compile () retorna uma função de vinculação combinada, que é uma coleção de funções vinculadas retornadas pela função de compilação da própria diretiva.
3. Conecte o modelo ao escopo através da função de vinculação retornada na etapa anterior. Por sua vez, isso chama a função de vinculação da Diretiva, permitindo que eles registrem alguns ouvintes no elemento e crie alguns relógios com escopo. O resultado disso é uma ligação bidirecional e instantânea entre o escopo e o DOM. Quando o escopo mudar, o DOM receberá a resposta correspondente.
A cópia do código é a seguinte:
var $ compile = ...; // injetado em seu código
var scope = ...;
var html = '<div ng-bind =' exp '> </div>';
// Etapa 1: analisar html no elemento DOM
var modelo = angular.Element (html);
// Etapa 2: Compile o modelo
var linkfn = $ compile (modelo);
// Etapa 3: vincule o modelo compilado com o escopo.
linkfn (escopo);
NGATTR Atributo Ligação
A cópia do código é a seguinte:
<Svg>
<círculo ng-attr-cx = "{{cx}}"> </circle>
</svg>
Isso é tudo hoje e comece a escrever para criar diretiva amanhã ~~~ O comprimento de controle não deve demorar muito, há muitos conceitos principais neste capítulo ~~~