O processo operacional básico de modelos e dados é o seguinte:
Página inicial do aplicativo de solicitação de usuário
O navegador do usuário inicia uma conexão HTTP com o servidor e, em seguida, carrega a página Index.html, que contém o modelo
O Angular é carregado na página, aguardando o carregamento da página e procurando a diretiva NG-App para definir os limites do modelo.
Modelos de travessia angular, encontre os relacionamentos especificados e vinculados e acionará algumas ações da coluna: registre o ouvinte, execute algumas operações DOM e obtenha dados de inicialização do servidor. Finalmente, o aplicativo será lançado e o modelo será convertido em uma visualização DOM
Conecte -se ao servidor para carregar outros dados que precisam ser exibidos ao usuário
Mostre texto
Um usa o formulário {{}}, como {{saudação}} o segundo tipo ng-bind = "saudação"
Use o primeiro tipo, páginas não rendidas podem ser vistas pelos usuários. Recomenda -se usar o segundo tipo de página de índice, e as páginas restantes podem usar o primeiro tipo
Formulário de entrada
A cópia do código é a seguinte:
<html ng-app>
<head>
<title> formulário </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
função startupController ($ scope) {
$ scope.funding = {theoutStimate: 0};
computEneeded = function () {
$ scope.funding.Needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ watch ('financiamento.startingestimate', computEneeded); // Mudanças do modelo de relógio
}
</script>
</head>
<Body>
<form ng-controller = "startupController">
Iniciando: <input ng-change = "computEneeded ()" ng-model = "finanding.startingestimate"> // chamando a função ao alterar
Recomendação: {{Funding.needed}}
</morm>
</body>
</html>
Em alguns casos, não queremos fazer movimentos imediatamente quando houver uma mudança, mas temos que esperar. Por exemplo:
A cópia do código é a seguinte:
<html ng-app>
<head>
<title> formulário </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
função startupController ($ scope) {
$ scope.funding = {theoutStimate: 0};
computEneeded = function () {
$ scope.funding.Needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ watch ('financiamento.startingestimate', computEneeded); // relógio monitora uma expressão e, quando essa expressão muda, uma função de retorno de chamada será chamada
$ scope.requestFunding = function () {
Window.alert ("Desculpe, por favor, receba mais clientes primeiro.")
};
}
</script>
</head>
<Body>
<form ng-submit = "requestFunding ()" ng-controller = "startupController"> // ng-submit
Iniciando: <input ng-change = "ComputEneeded ()" ng-model = "Funding.startingestimate">
Recomendação: {{Funding.needed}}
<but uma botão> Financie minha startup! </botão>
</morm>
</body>
</html>
Interação de envio sem forma, clique como exemplo
A cópia do código é a seguinte:
<html ng-app>
<head>
<title> formulário </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
função startupController ($ scope) {
$ scope.funding = {theoutStimate: 0};
computEneeded = function () {
$ scope.funding.Needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ watch ('financiamento.startingestimate', computEneeded);
$ scope.requestFunding = function () {
Window.alert ("Desculpe, por favor, receba mais clientes primeiro.")
};
$ scope.reset = function () {
$ scope.funding.startingestimate = 0;
};
}
</script>
</head>
<Body>
<form ng-controller = "startupController">
Iniciando: <input ng-change = "ComputEneeded ()" ng-model = "Funding.startingestimate">
Recomendação: {{Funding.needed}}
<Button ng-click = "requestFunding ()"> Financie minha startup! </botão>
<Button ng-click = "RESET ()"> Redefinir </botão>
</morm>
</body>
</html>
Listas, tabelas e outros elementos iterativos
NG-REPEAT retornará o número do elemento atualmente referenciado através do $ Index. O código de amostra é o seguinte:
A cópia do código é a seguinte:
<html ng-app>
<head>
<title> formulário </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
Var Students = [{Nome: 'Mary', Score: 10}, {Nome: 'Jerry', Score: 20}, {Nome: 'Jack', Score: 30}]
Função StudentListController ($ SCOPE) {
$ scope.students = estudantes;
}
</script>
</head>
<Body>
<tabela ng-controller = "StudentListController">
<tr ng-repeat = 'aluno em estudantes'>
<td> {{$ index+1}} </td>
<td> {{student.name}} </td>
<td> {{student.score}} </td>
</tr>
</tabela>
</body>
</html>
Esconder e mostrar
As funções NG-Show e Ng-Hide são equivalentes, mas o efeito de operação é exatamente o oposto.
A cópia do código é a seguinte:
<html ng-app>
<head>
<script type = "text/javascript" src = "angular.min.js"> </script>
<Cript>
Função DeathMenucontroller ($ SCOPE) {
$ scope.menustate = {show: false}; // Se você alterar para Menustate.show = false, o efeito não será exibido. No futuro, coloque as variáveis em {}
$ scope.toggleMenu = function () {
$ scope.menustate.show =! $ scope.menustate.show;
};
}
</script>
</head>
<Body>
<div ng-controller = 'DeathMenucontroller'>
<botão ng-click = 'TogGlemenu ()'> Menu de alternância </botão>
<ul ng-show = 'Menustate.show'>
<li ng-click = 'atlun ()'> stun </li>
<li ng-click = 'desintegrate ()'> desintegrar </li>
<li ng-click = 'EASE ()'> Apagar da história </li>
</ul>
</div>
</body>
</html>
Classe e estilo CSS
Tanto a classe NG quanto o estilo NG podem aceitar uma expressão, e o resultado da execução da expressão pode ser um dos seguintes valores:
String representando o nome da classe CSS, separado por espaços
CSS Class Name Array
Mapeamento do nome da classe CSS para o valor booleano
O exemplo do código é o seguinte:
A cópia do código é a seguinte:
<html ng-app>
<head>
<style type = "text/css">
.Error {
cor de fundo: vermelho;
}
.aviso {
cor de fundo: amarelo;
}
</style>
<script type = "text/javascript" src = "angular.min.js"> </script>
<Cript>
função headercontroller ($ scope) {
$ SCOPE.ISERROR = FALSO;
$ scope.iswarning = false;
$ scope.showror = function () {
$ scope.MessageText = "Erro !!!"
$ SCOPE.ISERROR = true;
$ scope.iswarning = false;
}
$ scope.showwarning = function () {
$ scope.MessageText = "Aviso !!!"
$ scope.iswarning = true;
$ SCOPE.ISERROR = true;
}
}
</script>
</head>
<Body>
<div ng-controller = "headercontroller">
<div ng-class = "{Erro: iserror, aviso: iswarning}"> {{MessageText}} </div>
<Button ng-click = "SHOWRROR ()"> ERRO </BOTTN>
<Button ng-click = "ShowWarning ()"> AVISO </BOTTOLL>
</div>
</body>
</html>
Mapeamento do nome da classe CSS para o valor booleano
O código de amostra é o seguinte:
A cópia do código é a seguinte:
<html ng-app>
<head>
<style type = "text/css">
.Selected {
Background-Color: Lightgreen;
}
</style>
<script type = "text/javascript" src = "angular.min.js"> </script>
<Cript>
restaurante de função ($ scope) {
$ scope.List = [{name: "The Handsome", Cozine: "BBQ"}, {Nome: "Green", Cozine: "Salads"}, {Nome: "House", Cozine: 'Seafood'}];
$ scope.selectrestaurant = function (linha) {
$ SCOPE.SELECTECTROW = ROW;
}
}
</script>
</head>
<Body>
<Tabela ng-controller = "Restaurant">
<tr ng-repeat = 'Restaurant na lista' ng-click = 'Selectrestaurant ($ index)' ng-class = '{Selected: $ index == SelectedRow}'> // mapa do nome da classe CSS para o valor booleano. Quando o valor do atributo Model SelectedRow é igual a $ índice em NG-REPEAT, o estilo selectd será definido para essa linha
<td> {{Restaurant.name}} </td>
<td> {{Restaurant.cuisine}} </td>
</tr>
</tabela>
</body>
</html>