 |
|
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Diretivas AngularJS |
Usando as diretivas ng-show e ng-hide do AngularJS para exibir ou ocultar elementos HTMLQuantidade de visualizações: 3333 vezes |
As diretivas ng-show e ng-hide do AngularJS são usadas para exibir ou ocultar elementos HTML. A diretiva ng-show define o valor display da propriedade style do elemento como 'block' e ng-show define o valor como 'none'. Veja o exemplo completo:----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('MinhaApp', []);
// vamos criar o controller ExibirOcultarElemento
app.controller('ExibirOcultarElemento', function ($scope){
// define a visibilidade inicial
$scope.visivel = true;
// função para exibir o elemento
$scope.exibir = function(){
$scope.visivel = true;
};
// função para ocultar o elemento
$scope.ocultar = function(){
$scope.visivel = false;
};
});
</script>
<div ng-app="MinhaApp" ng-controller="ExibirOcultarElemento">
<h1 ng-show="visivel">Você está me vendo?</h1>
<button ng-click="exibir()">Exibir</button>
<button ng-click="ocultar()">Ocultar</button>
</div>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
AngularJS ::: Angular / AngularJS + JavaScript ::: AngularJS Services (Serviços AngularJS) |
Aprenda a ler dados de um servidor remoto usando o serviço $http do AngularJSQuantidade de visualizações: 1480 vezes |
|
O serviço $http do AngularJS pode ser usado quando precisamos ler informações vindas de um servidor remoto. Esta comunicação é feita por meio do objeto XMLHttpRequest ou via JSONP. A funcionalidade deste serviço é semelhante às requisições AJAX do jQuery. Vamos ver um exemplo no qual enviamos dois números para uma página PHP e ela nos retorna a soma destes números como uma resposta JSON. Primeiro veja o código PHP que gera o JSON: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header('Content-type: application/json');
$numero1 = $_GET["numero1"];
$numero2 = $_GET["numero2"];
$soma = $numero1 + $numero2;
// vamos gerar o JSON com a soma
$res = json_encode(array("soma" => $soma));
// vamos retornar o JSON para a página que chamou esta
echo $res;
?>
Salve este código como somar.php e experimente chamá-la no seu navegador fornecendo os dois valores a serem somados. Veja: http://localhost/somar.php?numero1=37&numero2=3 Se tudo correr bem, o seguinte resultado será exibido: {"soma":40} Aqui eu usei PHP no servidor remoto, mas você pode usar Java, Perl, Node.js, ASP.NET, etc, desde que o retorno seja JSON. Agora vamos à aplicação AngularJS. Veja o código completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('MinhaApp', []);
// vamos criar o controller HttpTesteController
app.controller('HttpTesteController', function($scope, $http){
// vamos fazer a conexão remota
$http.get("http://localhost/somar.php?numero1=37&numero2=3")
.then(function(response){
$scope.resultado = response.data.soma;
}
);
});
</script>
<div ng-app="MinhaApp" ng-controller="HttpTesteController">
<h1>A soma dos valores é: {{resultado}}</h1>
</div>
</body>
</html>
Abra esta página no seu navegador web. Você deverá ver um resultado parecido com: A soma dos valores é: 40 Note que usamos o método get() do serviço $http para fazer uma requisição GET para a página PHP. Em dicas dessa seção mostro como fazer requisições POST e também tratar os possíveis erros que podem ocorrer nesta operação. |
AngularJS ::: Angular / AngularJS + JavaScript ::: Diretivas AngularJS |
Tutorial AngularJS - Como usar a diretiva ng-init do AngularJSQuantidade de visualizações: 2213 vezes |
A diretiva ng-init do AngularJS é usada quando queremos criar uma varíável no escopo atual e inicializá-la com algum valor. Veja um exemplo de seu uso:----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<div ng-app="" ng-init="codigo=350">
<h1>O próximo código é: {{codigo + 1}}</h1>
</div>
Quando você executar este exemplo, verá escrita a saída: O próximo código é: 351 Isso aconteceu porque usamos a diretiva ng-init para criar uma variável chamada "codigo" e definimos o seu valor inicial como 350. Então, dentro do elemento <h1>, nós acessamos a variável e aumentamos o seu valor em 1 antes de exibí-la. É importante observar que esta diretiva só é usada em situações nas quais queremos apenas fazer protótipos, exemplos ou testar alguma funcionalidade. Na prática, variáveis do escopo são inicializadas usando-se Components ou Controllers. Um outro uso da diretiva ng-init é para declarar e inicializar variáveis dentro do escopo de um ng-repeat. Veja: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
// vamos criar uma nova aplicação AngularJS
var app = angular.module('MinhaApp', []);
// vamos criar um novo controller
app.controller('MeuController', function($scope){
$scope.Livros = [
{titulo: "Java para a web", autor: "Osmar J. Silva"},
{titulo: "Aprenda AngularJS", autor: "José de Angelis"}
];
});
</script>
<div ng-app="MinhaApp" ng-controller="MeuController">
<div ng-repeat="livro in Livros" ng-init="ordem = ($index + 1)">
<h1>Ordem: {{ordem}} - Título: {{livro.titulo}} - Autor: {{livro.autor}}</h1>
</div>
</div>
Quando você abrir esta página, verá a seguinte saída: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- Ordem: 1 - Título: Java para a web - Autor: Osmar J. Silva Ordem: 2 - Título: Aprenda AngularJS - Autor: José de Angelis |
AngularJS ::: Angular / AngularJS + JavaScript ::: Controllers AngularJS |
Como adicionar funções (ou métodos) ao seu controller AngularJSQuantidade de visualizações: 1922 vezes |
|
Nesta dica mostrarei como adicionar comportamento ao seu controller AngularJS, ou seja, adicionar funções ou métodos para acessar e/ou modificar as variáveis contidas no escopo. Para este exemplo criaremos um controller chamado "VolumeTV". Este controller terá uma variável chamada "volume" e dois botões para aumentar ou diminuir o volume. Note que, tanto a variável quanto as duas funções são colocadas no $scope para facilitar o acesso destes a partir da view. Veja o exemplo completo, sem usar AngularJS CLI nem TypeScript, somente JavaScript e HTML: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('MinhaApp', []);
// vamos criar o controller VolumeTV
app.controller('VolumeTV', function ($scope){
// define o volume inicial
$scope.volume = 5;
// função para aumentar o volume
$scope.aumentarVolume = function(){
$scope.volume++;
};
// função para diminuir o volume
$scope.diminuirVolume = function(){
$scope.volume--;
};
});
</script>
<div ng-app="MinhaApp" ng-controller="VolumeTV">
<h1>Volume atual: {{volume}}</h1>
<button ng-click="aumentarVolume()">Aumentar Volume</button>
<button ng-click="diminuirVolume()">Diminuir Volume</button>
</div>
</body>
</html>
|
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
|
JavaScript - Como remover o primeiro elemento de um array em JavaScript - Como usar a função shift() do objeto Array do JavaScript |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
