Endereço original: http://code.angularjs.org/1.0.2/docs/guide/concepts
continuar. .
1. Resumo
Este artigo fornece principalmente uma visão geral dos componentes angulares e explica como eles funcionam. A lista é a seguinte:
2. Startup
Aqui está como o angular é iniciado (veja o gráfico com o exemplo a seguir):
1. O navegador carrega HTML e converte tags HTML em objetos DOM;
2. O navegador carrega o script de angular.js;
3. Esperações angulares pelo evento DomContentLoaded;
4. Angular procura Ng-App, uma diretiva usada para especificar o intervalo de limites do aplicativo;
5. Se Ng-App tiver um módulo especificado (talvez ng-app = "SomeApp"), ele será usado como configuração $ injetor;
6. $ injetor é usado para criar $ compile Service (Service) e $ RootsCope;
7. O Serviço $ Compile é usado como um "compilação" (como Traversal, depois faz um pouco de coisa misteriosa) e conecta -o ao $ ROOTSCOPE correspondente.
8. Ng-Init Esta diretiva cria um atributo de nome no escopo correspondente e atribui um valor de "gatinho";
9. Insira o valor de "{{name}}" na expressão e finalmente exiba "Hello Kitty!".
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! } </style> </ad Head> <body> <div ng-init = "name = 'Kitty'"> hello {{name}}!O progresso foi lento porque discuti algo com alguém hoje à noite. . . Essa é a frase novamente. . . É tarde da noite agora. . . Angular, vejo você depois do anúncio!
================================================================
O anúncio está concluído. . . continuar
3. Tempo de execução
Este gráfico e o exemplo a seguir descrevem como o Angular interage através do loop de eventos do navegador (as funções de processamento de todos os tempos, bem como as funções executadas pelo timer, serão organizadas em uma estrutura de fila e usará um loop infinito para extrair continuamente as funções da fila para executar. http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-event-loop).
1. O loop de eventos do navegador aguarda a chegada do evento. Os eventos vêm da interação do usuário (Eventos DOM), Eventos de Timer (setTimeout), Eventos de rede (resposta ao servidor, XHR, etc.);
2. A função de retorno de chamada do evento começa a executar. Aqui entramos no contexto JavaScript (contexto). Essa função de retorno de chamada pode modificar a estrutura DOM.
3. Quando a função de retorno de chamada é executada, o navegador sai do contexto JavaScript e redesenha a visualização de acordo com as alterações do DOM.
Angular modifys o fluxo geral JavaScript criando seu próprio loop de processamento de eventos. Isso divide o JavaScript em contextos de execução tradicional e angular. Quaisquer operações realizadas no contexto de execução angular têm ligação angular de dados, manipulação de exceções, observação de propriedades e outras habilidades. Podemos inserir o contexto de execução angular usando $ aplicativo () em javascript. Mas lembre -se de que, na maioria dos lugares (angular) (como controladores, serviços), a diretiva que lida com eventos chamará $ se inscreverá para você. O cenário em que o $ aplicativo é chamado manualmente é geralmente quando você implementa um manipulador de eventos personalizado ou lida com retornos de chamada de bibliotecas de terceiros.
1. Digite o contexto de execução angular chamando o escopo. $ Aplicar (estímulo). O estímulo é uma função (incluindo escopo como argumento) ou uma expressão legal angular que queremos executar no contexto de execução angular.
2. Angular executa o estímulo, que geralmente altera o estado de aplicação.
3. Angular entra no loop $ Digest. Esse loop consiste em dois loops menores que lidam com a fila de $ avaliadas e a lista de relógios $. O loop $ Digest continuará itrando antes que o modelo seja estável, ou seja, a fila $ avaliadas está vazia e nenhuma alteração é detectada pela lista de observação $.
4. $ AvaliaSync A fila é usada como um meio para providenciar que o quadro da pilha atual deve ser saltado para fora do quadro de pilha atual (o quadro da pilha refere -se à área (ou espaço) alocada para a função atualmente em execução na função. variáveis armazenadas na pilha) estão todas na estrutura da pilha. Isso geralmente é alcançado usando o setTimeout (0). Mas o método Settimeout (0) causará lentidão ou, quando o navegador desenha a exibição após o processamento de cada evento, a visualização piscará (o angular está resolvendo esse problema? Como resolvê -lo?).
5. Lista de relógios $ é uma coleção de expressões que podem ser modificadas na iteração mais recente. Se (modelo) mudar, a função $ watch será chamada para atingir o objetivo de reatribuir um DOM específico.
6. Uma vez concluído o loop angular de $ digery (a situação mencionada nos 3 anteriores), depois de deixar o contexto angular e javascript, o navegador repintará o DOM em resposta às alterações.
A seguir, explica como o exemplo "Hello Kitty" (-_-!) Implementa o efeito de ligação a dados quando o usuário insere texto na caixa de texto.
1. Fase de compilação:
a) Os ouvintes de eventos de KeyDown de modelo NG e diretiva de entrada são especificados em <input>.
b) {{name}} espaço reservado (interpolação, não sei como traduzir) (expressão) Defina um relógio $ para responder quando o nome mudar.
2. Fase de tempo de execução:
a) Pressione o botão "X" no controle de inut para deixar o navegador acionar um evento KeyDown;
b) A diretiva de entrada captura a alteração no valor da caixa de texto e, em seguida, chama $ Aplicar ("nome = 'x';"), atualizando o modelo aplicado no contexto de execução angular.
c) Angluar aplica "nome = 'x';" para o modelo. (O modelo mudou)
d) $ DIGEST LOOP START
e) $ Lista de relógios detecta que o valor do nome foi alterado e analisa a expressão {{name}} novamente e atualiza o DOM.
f) contexto de execução de saída angular (angular) e, em seguida, saia do contexto do evento KeyDown e da execução de JavaScript;
g) O navegador redesenha a visualização e atualiza os caracteres.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! } </style> </head> <body> <input ng-model = "name"/> <p> hello {{name}}! </p> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </body> </html>4. Escopo
O escopo é responsável por detectar alterações no modelo e servir como contexto de execução da expressão. O escopo é aninhado em uma hierarquia semelhante a uma estrutura DOM (como aprendemos anteriormente, a divisão pode estar relacionada ao controlador). (Para detalhes, verifique a documentação da diretiva individual para ver qual diretiva criará um novo escopo)
O exemplo a seguir mostra que o valor da expressão "nome" é determinado com base no escopo de que depende (para o qual pertence) e também inclui a maneira de pesquisa de valor (semelhante à cadeia de escopo JS, se você não a possui, procure meu pai).
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> Scope </title> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng-antroller = "Controllera"> hello {{name}}}! <Div ng-Controller = "Controller"> Hello {{Name}}!; <Div ng-Controller = "Controllerd"> Hello {{Name}}!; </div> </div> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> functionRera ($ scope) {$ scope.name = 'kitty'; } função controlerb ($ scope) {$ scope.name = 'lclao'; } função controlerC ($ scope) {$ scope.name = 'jeffrey'; } função controlerd ($ SCOPE) {} </script> </body> </html>5. Controlador
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <tittle> controlador </title> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng --Controller = "Controllera"> Hello {{name}}! <botão ng-click = "doit ()"> doit !! </button> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </sCript> <script type = "text/javascript"> função controlina ($ scope) {scope.name = 'kitt; $ scope.doit = function () {$ scope.name = "Handsome"; }; } </script> </body> </html>O controlador é o código por trás da visualização (-_-!). Sua responsabilidade é construir o modelo e empurrá -lo para a visão através da função de retorno de chamada. A visualização é o mapa atual do escopo para o modelo (HTML) (traduzido um pouco apenas ...). O escopo é o link que direciona o modelo para a exibição e envia um evento para o controlador.
É importante separar o controlador da visualização porque:
1.Controller está escrito em JavaScript. JavaScript é imperativo. Um comando importante é uma boa maneira de descrever o comportamento de um aplicativo. Os controladores não devem conter nenhuma informação de exibição (lógica) (referências DOM ou fragmentos HTML)
2. View Modelo está escrito em HTML. HTML é declarativo. Declarativo (HTML) é uma boa maneira de descrever uma interface do usuário. As visualizações não devem conter nenhum comportamento.
3. Como o controlador não sabe para qual visualização ele precisa corresponder, um controlador pode (indiretamente) usar várias visualizações. Isso é importante para re-sinalizador (substituir peles?), Outras visualizações específicas do dispositivo (como telefones celulares e desktops) e a mensurabilidade do código.
6. Modelo
O modelo pode ser entendido como um objeto de dados. É usado como uma combinação com o modelo para produzir vistas. Para escrever o modelo para a visualização, o modelo deve ser referenciado pelo escopo. Ao contrário de muitas outras estruturas, o Angular não tem restrições ou requisitos no modelo. Não há necessidade de adicionar uma classe adicional, nem você precisa acessar ou alterar o modelo por meio de métodos privilegiados especiais. O tipo de dados do modelo pode ser um tipo primitivo (string, número ...), um objeto de valor-chave ({a: 1, b: 2}) ou uma função (function () {…}). Para simplificar, o modelo angular precisa ser um objeto JavaScript normal.
7. Ver
Visualização é algo que os usuários podem ver. A vista nasceu no modelo. Ele combina com o modelo e, eventualmente, o renderiza como um navegador DOM. A Angular exige uma maneira muito diferente de apresentar a visão para muitos outros sistemas de modelo.
Outros motores de modelo: muitos motores de modelo são implementados pela criação de seqüências de caracteres HTML com tags especiais. Geralmente, essas tags de modelo destroem a sintaxe HTML, o que significa que o código não pode ser editado por meio de um editor geral HTML (isso é ...). A sequência de modelos é passada para o mecanismo de modelo e se fundida com os dados. Finalmente gera string html. Essas strings são geralmente gravadas no DOM no .innerHtml, levando o navegador a renderizar o conteúdo do modelo. Esse processo precisa ser repetido repetidamente quando os dados mudarem. A granularidade do modelo é consistente com a granularidade da atualização DOM. A chave para esse grão é que o sistema de modelo processa strings.
Angular: A diferença entre os modelos angulares é que ele é baseado em DOM, em vez de baseado em cordas. O modelo ainda precisa escrever algumas cordas no HTML, mas ainda é HTML (não incorporando o modelo dentro). O navegador converte HTML em DOM e, em seguida, DOM se torna a entrada do compilador (motor de modelo do Angular). O compilador procura diretivas e define relógios no modelo por sua vez. O resultado é uma visão que foi atualizada o tempo todo, e não há necessidade de re-postar o modelo e o modelo. O modelo se torna a única fonte de verdade para a vista.
8. Diretivas
A diretiva é um comportamento (por exemplo, no exemplo do artigo anterior "ocultar e procurar") ou a conversão DOM (tags personalizadas, contendo um conjunto de DOMS) e colocando seu nome no atributo, nome da tag e nome da classe pode acionar a diretiva. A diretiva permite estender as tags HTML de maneira declarativa.
Ainda existem algumas perguntas nos exemplos a seguir. É assim que o $ render girage @_ @
<! Doctype html> <html lang = "zh-cn" ng-App = "myDirection"> <head> <meta charset = "utf-8"> <title> diretiva </title> <style type = "text/css"> .ng-cloak {exibição: nenhum; } </style> </ad Head> <Body ng --Controller = "myctrl"> <div ng-model = "content" contentDitable = "true"> meu pequeno dada </div> <pre> modelValue = {{content}} </pre> <butt-click = "reset ()"> reset (Model) </Model) </Model) src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> angular.module ("myDirection", []) .Dirive ("contentEditable", function () {Return {requection {requer: 'ngM). {ngmodel. $ SetViewValue (Element.Text ()); }}}) .Controller ("myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "meu pequeno dada";};}); </script> </body> </html>9. Filtros
Os filtros desempenham um papel na conversão de dados (formatação). Geralmente eles estão relacionados à região, e diferentes regiões podem ter diferentes formatos de saída. Eles estão seguindo o espírito de filtros UNIX com sintaxe semelhante: | (cano)
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> filtro </title> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng -init = "list = ['Baidu B', 'SOGOU S', '360', '3SB']"> Formatação do número: 1233211234567 -> {{1233311234567 | ng-model = "myFilterText" type = "text"/> <br/> {{list | filtro: myFilterText | json}} <br/> </div> <script src = "../ angular-1.0.1.js" type = "text/javscript"10. Módulos e o injetor
O injetor é um localizador de serviço. Cada aplicação angular terá um injetor separado. O Injetor fornece uma maneira de encontrar instâncias de objetos pelo nome. O injetor manterá todas as instâncias de objeto no cache interno; portanto, quando o mesmo nome for chamado repetidamente, a mesma instância do objeto será retornada. Se o objeto não existir, solicitará que a fábrica da instância crie uma nova instância.
O módulo é um método de configurar uma fábrica de instância de um injetor, chamado de "provedor".
// Crie um módulo var myModule = angular.module ('myModule', []) // Configure o injetor mymodule.factory ('servicea', function () {return {// em vez de {}, coloque sua criação de objeto aqui};}); // Crie um injetor e configure -o de 'myModule' var $ injector = angular.injector ('mymodule'); // recuperar um objeto do injetor pelo nome var servicea = $ injector.get ('servicea'); // sempre verdadeiro por causa do cache da instância $ injector.get ('servicea') === $ injector.get ('servicea'); // verdadeiroMas o verdadeiro X de injetor é que ele pode ser usado para chamar métodos e "instanciar" o tipo. Esse recurso maravilhoso é que ele permite que métodos e tipos solicitem os recursos de que dependem, em vez de procurá -los.
// Você escreve funções como este. função doSomething (servicea, serviçob) {// faça algo aqui. } // Angular fornece o injetor para o seu aplicativo var $ injector = ...; ,///////////////Uqui/////////u/////////////i/////////i//////////////////ados de lugares de lugares, ,///////////////Uqui/////////u/////////////i/////////i//////////////////ados de lugares de lugares, ,///////////////Uqui/////////u/////////////i/////////i//////////////////ados de lugares de lugares, ,///////////////Uqui/////////u/////////////i/////////i//////////////////ados de lugares de lugares, Chame a função doSomething (Servicea, ServiceB); // O acima é o método antigo tradicional ~ o seguinte é o método de falar angular sobre sua própria vaca X/////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////// A maneira legal de obter dependências. // O $ injetor fornecerá os argumentos à função automaticamente $ injetor.invoke (doSomething); // é assim que a estrutura chama suas funçõesObserve que a única coisa que precisamos escrever é a nossa função e podemos listar o recurso do qual o método depende nos argumentos da função! Quando as chamadas angulares funcionarem, ele usará o método "Call" para preencher automaticamente os agross de função.
Observe como as dependências estão listadas no construtor no exemplo abaixo. Quando o controlador NG instancia o controlador, os recursos de dependência serão fornecidos automaticamente. Não há necessidade de criar, pesquisar ou criar referências injetoras para carregar recursos de dependência.
<! Doctype html> <html lang = "zh-cn" ng-App = "timeExample"> <head> <meta charset = "utf-8"> <title> injetor </title> <style type = "text/css"> .ng-cloak {exibir: nenhum; } </style> </ad Head> <body> <div ng --Controller = "Clockctrl"> Hora atual é: {{time.now}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script = "" []). /** * * @param $ SCOPE * @param myClock A dependência MyClock é inserida automaticamente aqui! ! * @Constructor */ function clockctrl ($ scope, myclock) {$ scope.time = myClock; } </script> </body> </html>11. namespace angular
Para evitar conflitos de nome, o Angular adicionará o prefixo $ ao nome do objeto. Por favor, não use $ prefixo em seu código para evitar conflitos. (-_- !!)
O exposto acima são as informações sobre os conceitos do AngularJS. Continuaremos a adicionar artigos relevantes no futuro. Obrigado pelo seu apoio a este site!