Uma boa maneira de começar a aprender AngularJS é criar o aplicativo clássico "Hello World!":
1. Crie um arquivo HTML usando seu editor de texto favorito, por exemplo: helloworld.html.
2. Copie o seguinte código -fonte para o seu arquivo HTML.
3. Abra este arquivo HTML em um navegador da web.
código -fonte:
A cópia do código é a seguinte:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<Body>
Olá {{'World'}}!
</body>
</html>
Por favor, execute o código acima no seu navegador para ver o efeito.
Agora vamos dar uma olhada no código e ver o que está acontecendo. Quando a página é carregada, o tag ng-app diz ao AngularJS para processar toda a página HTML e inicializa o aplicativo:
A cópia do código é a seguinte:
<html ng-app>
Esta linha carrega o script AngularJS:
A cópia do código é a seguinte:
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
(Para detalhes sobre o AngularJS lidando com toda a página HTML, consulte o Bootstrap.)
Finalmente, o corpo na etiqueta é o modelo para o aplicativo, mostrando nossas saudações na interface do usuário:
A cópia do código é a seguinte:
Olá {{'World'}}!
Observe que o conteúdo do {{}} marcado com aparelho duplo é a expressão ligada na saudação, que é uma string simples 'mundo'.
Abaixo, vejamos um exemplo mais interessante: vincule uma expressão dinâmica ao nosso texto de saudação usando o AngularJS.
Olá AngularJS World!
Este exemplo demonstra ligação de dados bidirecionais para AngularJS:
1. Editar o documento Helloworld.html criado anteriormente.
2. Copie o seguinte código -fonte para o seu arquivo HTML.
3. Atualize a janela do navegador.
código -fonte:
A cópia do código é a seguinte:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<Body>
Seu nome: <input type = "text" ng-model = "yourname" placeholder = "mundo">>
<HR>
Olá {{YourName || 'Mundo'}}!
</body>
</html>
Por favor, execute o código acima no seu navegador para ver o efeito.
Este exemplo tem as seguintes notas importantes:
1. Instruções de entrada de texto <Entrada ng-model = "yourname" /> está vinculada a uma variável de modelo chamada YourName.
2. Marca de suporte duplo Adicione a variável do modelo de nome para saudar o texto.
3. Você não precisa registrar um ouvinte de evento ou adicionar um manipulador de eventos para o aplicativo!
Agora tente digitar seu nome na caixa de entrada e o nome que você digita será atualizado imediatamente e exibido na saudação. Este é o conceito de ligação de dados bidirecionais do AngularJS. Quaisquer alterações na caixa de entrada são imediatamente refletidas na variável do modelo (One Direction), e quaisquer alterações na variável do modelo são imediatamente refletidas no texto da saudação (a outra direção).
Análise de aplicação de AngularJS
Esta seção descreve os três componentes dos aplicativos AngularJS e explica como eles são mapeados para o padrão de design do Model-View-Controller:
Modelos
Um modelo é um arquivo que você escreve no HTML e CSS para apresentar a visualização do aplicativo. Você pode adicionar novos elementos e atribuir tags ao HTML como diretivas para o AngularJS Compiler. O compilador AngularJS é totalmente extensível, o que significa que, com o AngularJS, você pode criar suas próprias tags HTML no HTML!
Lógica e comportamento do aplicativo
A lógica e o comportamento do aplicativo são os controladores que você define no JavaScript. O AngularJS é diferente dos aplicativos Ajax padrão, você não precisa escrever um ouvinte ou controlador DOM, pois eles já estão incorporados em AngularJs. Esses recursos facilitam a lógica do seu aplicativo, testam, mantenham e entendem.
Dados do modelo (dados)
O modelo é estendido das propriedades dos objetos angulares do AngularJS. Os dados no modelo podem ser um objeto JavaScript, uma matriz ou um tipo primitivo, e não importa, é importante que todos pertencem a objetos com escopo de AngularJs.
AngularJS mantém a sincronização bidirecional entre o modelo de dados e a interface da interface de exibição através do escopo. Quando o estado do modelo mudar, o AngularJS atualizará imediatamente o reflexo na interface de exibição e vice -versa.
Além disso, o AngularJS também fornece alguns recursos de serviço muito úteis:
1. Os serviços subjacentes incluem injeção de dependência, XHR, cache, roteamento de URL e serviços abstratos do navegador.
2. Você também pode se estender e adicionar seus próprios serviços de aplicativos específicos.
3. Esses serviços podem tornar muito conveniente para você escrever aplicativos da Web.