O que é angularjs?
AngularJS é uma estrutura estrutural projetada para aplicativos da Web dinâmicos. Ele permite que você use o HTML como uma linguagem de modelo e, ao estender a sintaxe HTML, você pode criar seus componentes de aplicativo com mais clareza e concisa. Sua inovação é que ele usa a ligação de dados e a injeção de dependência, o que elimina a necessidade de escrever muito código. Tudo isso é implementado por meio de JavaScript do lado do navegador, o que também o torna perfeitamente combinado com qualquer tecnologia do lado do servidor.
O AngularJS foi projetado para superar as deficiências do HTML em aplicações de construção. O HTML é uma boa linguagem declarativa projetada para exibição de texto estático, mas será fraco se você deseja criar aplicativos da Web. Então, eu fiz algum trabalho (você pode pensar que foi um pequeno truque) fazer com que o navegador faça o que eu quero. formatdate
Geralmente, usamos as seguintes tecnologias para resolver as deficiências da tecnologia da Web estática na criação de aplicativos dinâmicos:
1. Biblioteca de classes - Biblioteca de classes é uma coleção de funções que podem ajudá -lo a escrever aplicativos da Web. É o seu código que o leva e cabe a você decidir quando usar a biblioteca de classes. As bibliotecas de classe incluem: jQuery, etc.
2. Framework - O Framework é um aplicativo Web especial e implementado, você só precisa preencher a lógica de negócios específica. A estrutura desempenha uma função de liderança aqui e chama seu código com base na lógica de aplicativo específica. Os quadros incluem: knockout, sprutcore, etc.
O AngularJS usa uma abordagem diferente, que tenta compensar as deficiências do próprio HTML na construção de aplicações. O AngularJS permite que os navegadores reconheçam a nova sintaxe usando uma estrutura que chamamos de identificadores. Por exemplo:
1. Use aparelho duplo {{}} sintaxe para ligação de dados;
2. Use a estrutura de controle DOM para iterar ou ocultar fragmentos DOM;
3. Formulários de suporte e verificação de formulário;
4. Seja capaz de associar o código lógico a elementos DOM relacionados;
5. Pode dividir o HTML em componentes reutilizáveis.
Soluções de ponta a ponta
O AngularJS está tentando se tornar uma solução de ponta a ponta em aplicativos da Web. Isso significa que não é apenas uma pequena parte do seu aplicativo da Web, mas uma solução completa de ponta a ponta. Isso fará com que o AngularJS pareça "teimoso" ao criar um aplicativo que possui CRUD (adicione Criar, consultar recuperar, atualizar atualizar, excluir delete) (o texto original é opinativo, o que significa que não há muitas outras maneiras). Mas, apesar de sua "teimosia", ainda garante que sua "teimosia" esteja apenas no ponto de partida da criação de sua aplicação e que você ainda pode mudar de maneira flexível. Alguns dos recursos excelentes do AngularJS são os seguintes:
1. Todos os conteúdos possíveis que podem ser usados para criar um aplicativo CRUD incluem: ligação de dados, identificadores básicos de modelo, verificação de formulários, roteamento, vinculação profunda, reutilização de componentes e injeção de dependência.
2. Aspectos de teste incluem: testes de unidade, testes de ponta a ponta, simulação e estruturas de teste automatizadas.
3. Aplicação de sementes com layout de diretório e scripts de teste como ponto de partida.
A fofura dos angulares
AngularJS simplifica o desenvolvimento de aplicativos, apresentando um nível mais alto de abstração para os desenvolvedores. Como outras técnicas abstratas, isso também perde alguma flexibilidade. Em outras palavras, nem todas as aplicações são adequadas para uso com o AngularJS. O AngularJS considera principalmente a construção de aplicações CRUD. Felizmente, pelo menos 90% dos aplicativos da Web são aplicativos CRUD. Mas, para entender o que é adequado para construir com o AngularJS, você deve entender o que não é adequado para construir com o AngularJS.
Como jogos e editores de interface gráfica, aplicativos com operações DOM frequentes e complexas são muito diferentes dos aplicativos CRUD. Eles não são adequados para construir com o AngularJs. Pode ser melhor usar algumas técnicas mais leves e mais simples, como jQuery como este.
Uma instância simples angularjs
Abaixo está um aplicativo CRUD típico que contém um formulário. O valor do formulário é primeiro verificado e depois usado para calcular o valor total, que é formatado no estilo local. Aqui estão alguns conceitos comuns para os desenvolvedores, você precisa entender primeiro:
1. Associe o modelo de dados (modelo de dados) à visualização (UI);
2. Escreva, leia e verifique a entrada do usuário;
3. Calcule novos valores com base no modelo;
4. Localize o formato de saída.
index.html:
A cópia do código é a seguinte:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<Body>
<div ng-controller = "Invoicecntl">
<b> Fatura: </b>
<br>
<br>
<tabela>
<tr> <td> quantidade </td> <td> custo </td> </tr>
<tr>
<Td> <input type = "Integer" min = "0" ng-model = "qty" necessário> </td>
<Td> <input type = "número" ng-model = "custo" necessário> </td>
</tr>
</tabela>
<HR>
<b> TOTAL: </b> {{qty * custo | moeda}}
</div>
</body>
</html>
script.js:
A cópia do código é a seguinte:
Função Invoicecntl ($ SCOPE) {
$ scope.qty = 1;
$ scope.Cost = 19,95;
}
Teste de ponta a ponta:
A cópia do código é a seguinte:
It ('deve mostrar a ligação angular', function () {
Espere (encadernação ('qty * custo')). ToEqual ('$ 19,95');
input ('qty'). enter ('2');
entrada ('custo'). Enter ('5.00');
Espere (encadernação ('qty * custo')). ToEqual ('$ 10,00');
});
Função Invoicecntl ($ SCOPE) {$ SCOPE.QTY = 1; $ SCOPE.COST = 19,95;}
Efeito de corrida:
A cópia do código é a seguinte:
Fatura:
Custo de quantidade
TOTAL: {{qty * custo | moeda}}
Experimente o exemplo acima e vamos dar uma olhada em como esse exemplo funciona juntos. Na tag ``, usamos um identificador `ng-app` para indicar que este é um aplicativo AngularJS. Este identificador `ng-app` fará com que o AngularJS ** inicialize automaticamente seu aplicativo. Usamos a tag `` para carregar o script angularjs: <script src = "http://code.angularjs.org/angular-1.1.0.min.js">
Ao definir a propriedade NG-modelo na tag <input>, o AngularJS vinculará automaticamente os dados em duas vias. Também realizamos algumas verificação simples de dados ao mesmo tempo:
A cópia do código é a seguinte:
Quantidade: <input type = "integer" min = "0" ng-model = "qty" necessária>
Custo: <input type = "número" ng-model = "custo" necessário>>
O widget desta caixa de entrada parece comum, mas não é comum se você reconhecer os seguintes pontos:
1. Quando a página é carregada, o AngularJS gerará variáveis com o mesmo nome de acordo com o nome do modelo (Qty, custo) declarado no widget. Você pode pensar nessas variáveis como m (modelo) no padrão de design do MVC;
2. Observe que a entrada no widget acima possui habilidades especiais. Se você não inserir dados ou os dados de entrada forem inválidos, esta caixa de entrada de entrada ficará automaticamente vermelha. Esse novo recurso da caixa de entrada facilita para os desenvolvedores implementar as funções de verificação de campo comum em aplicativos CRUD.
Finalmente, podemos dar uma olhada no misterioso aparelho duplo:
A cópia do código é a seguinte:
TOTAL: {{qty * custo | moeda}}
Esta tag {{Expression}} é a ligação de dados do AngularJS. As expressões nele podem ser uma combinação de uma expressão e um filtro ({{Expression | filter}}). AngularJS fornece filtros para formatar dados de entrada e saída.
No exemplo acima, a expressão em {{}} pede que o AngularJS multiplique os dados obtidos a partir da caixa de entrada e formate o resultado da multiplicação para o estilo de moeda local e a produza para a página.
Vale ressaltar que não chamamos nenhum método AngularJS nem escrevemos uma lógica específica como o uso de uma estrutura, mas concluímos as funções acima. Por trás dessa implementação está que o navegador faz mais trabalho do que antes para gerar páginas estáticas, permitindo que ele atenda às necessidades de aplicativos dinâmicos da Web. O AngularJS reduz o limite de desenvolvimento para aplicativos dinâmicos da Web, até o ponto em que não há necessidade de bibliotecas ou estruturas de classe.
"Zen Tao (conceito) de AngularJS"
Angular acredita que, ao criar vistas (UIS) e escrever lógica de software, o código declarativo será muito melhor que o código imperativo, embora o código imperativo seja muito adequado para expressar a lógica de negócios.
1. Desarrar as operações DOM e a lógica de aplicativos é uma ideia muito boa, que pode melhorar bastante a ajuste do código;
2. É uma idéia muito, muito boa tratar o teste e o desenvolvimento igualmente. A dificuldade de teste depende em grande parte da estrutura do código;
3. Desarrar o lado do cliente e do servidor é uma prática particularmente boa. Pode permitir que ambos os lados se desenvolvam em paralelo e permitir a reutilização de ambos os lados;
4. Se a estrutura puder orientar os desenvolvedores em todo o processo de desenvolvimento: desde a criação da interface do usuário, a redação da lógica de negócios e, em seguida, testem, será de grande ajuda para os desenvolvedores;
5. É sempre bom "simplificar o complexo em simplificação e simplificá -lo em zero".
AngularJS pode libertá -lo do pesadelo seguinte:
1. Use retornos de chamada: o uso de retornos de chamada interromperá a legibilidade do seu código, tornará seu código fragmentado e é difícil ver a lógica de negócios original. É bom remover algum código comum, como retornos de chamada. Uma redução drasticamente do código que você deve escrever devido ao design da linguagem JavaScript pode permitir que você veja a lógica do seu aplicativo com mais clareza.
2. Escreva manualmente o código para operação de elementos DOM: Operações DOM é uma parte muito básica dos aplicativos Ajax, mas é sempre "pesado" e propenso a erros. A interface da interface do usuário descrita de maneira declarativa pode mudar com a mudança de status do aplicativo, permitindo que você se liberte de escrever um código de operação de baixo nível. Na maioria das aplicações escritas no AngularJS, os desenvolvedores não precisam mais escrever códigos que operam DOM sozinhos, mas você ainda pode escrevê -los, se quiser.
3. Leia e escreva dados na interface da interface do usuário: grande parte dos aplicativos AJAX são operações CRUD. Um processo clássico é formar os dados do servidor em objetos internos, compilar o objeto em formulários HTML e o usuário modificar o formulário e verificar o formulário. Se houver algum erro, ele exibirá o erro e reorganizará os dados em objetos internos e o retornará ao servidor. Há muito código a ser repetido nesse processo, fazendo com que o código sempre pareça descrever todo o processo de execução do aplicativo, em vez da lógica de negócios específica e detalhes de negócios.
4. Antes de começar, você deve escrever muito código básico: geralmente você precisa escrever muito código básico para implementar um aplicativo "Hello World". Com o AngularJS, ele fornecerá alguns serviços que permitem que você comece a escrever seu aplicativo facilmente, e esses serviços são adicionados automaticamente ao seu aplicativo com uma injeção de dependência de injeção de dependência de injeção de dependência de Guice, que permite que você insira rapidamente o desenvolvimento específico do seu aplicativo. O que é especialmente verdadeiro é que você pode entender completamente o processo de inicialização dos testes automatizados.