 |
|
Você está aqui: 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: 1456 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. |
 Link para compartilhar na Internet ou com seus amigos: |
AngularJS ::: Angular / AngularJS + JavaScript ::: Controllers AngularJS |
Como adicionar funções (ou métodos) ao seu controller AngularJSQuantidade de visualizações: 1895 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>
|
AngularJS ::: Angular / AngularJS + JavaScript ::: Diretivas AngularJS |
Tutorial AngularJS - Como usar a diretiva ng-init do AngularJSQuantidade de visualizações: 2181 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 |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Noções de licitação pública Modalidade de licitação é a forma específica de conduzir o procedimento licitatório a partir de critérios definidos em lei. Sobre as modalidades da licitação pública, analise as afirmativas a seguir: I. São modalidades de licitação taxativamente expressas tanto no texto da Lei n.º 8.666/1993 quanto no da Lei n.º 14.133/2021: a concorrência, a tomada de preços, o convite, o concurso, o leilão e o pregão. II. Na modalidade convite, vigente na Lei n.º 8.666/1993, mas suprimida na Lei n.º 14.133/2021, o instrumento convocatório carta-convite prescinde de publicação, mas não de publicidade. III. Concurso é a modalidade de licitação que visa a selecionar candidatos concorrentes a um cargo efetivo de uma entidade governamental. IV. Leilão é a modalidade de licitação utilizada para a venda de bens. Estão corretas: A) I, II e IV. B) II e III. C) II e IV. D) I, III e IV. E) I, II, III e IV. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Hidrologia |
| As bacias hidrográficas do Brasil, em razão da sua extensão, abarcam ainda países vizinhos ao território brasileiro. São exemplos de bacias localizadas no Brasil e em partes dos países vizinhos: A) Bacia Amazônica e São Francisco. B) Bacia do Uruguai e Nordestina. C) Bacia do São Francisco e Platina. D) Bacia Amazônica e Platina. E) Bacia do Tocantins e Paraguaia. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Dimensionamento de Redes de Distribuição de Água A pergunta essencial que você tem de responder para dimensionar uma rede de abastecimento é: quantos litros de água você precisa distribuir para essa população? Quanto às redes de abastecimento podemos afirmar que: Selecione a resposta: A) O coeficiente de majoração k1 aplicado no cálculo da vazão que circula na rede, se refere ao fator de correção quanto ao dia de menor consumo. B) Pode-se obter o diâmetro mínimo da tubulação, dos condutos, ajudando a dimensionar as redes de distribuição em função das velocidades máximas e vazões máximas conforme normas técnicas. C) O coeficiente de majoração k2 aplicado no cálculo da vazão que circula na rede, se refere ao fator de correção quanto a hora de menor consumo. D) Ao dividir a vazão de distribuição pelo comprimento da rede (L), você obtém a vazão específica. E) A rede de abastecimento, e distribuição para uma região pode ser configurada em ramificada, em grelha, em cela e em diagonais. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
Analise o seguinte código JavaScriptvar a = (new Array(10)).toString(); Qual o valor da variável a após a execução desta linha de código? A) a string "10". B) um array de 10 strings vazias. C) a string ",,,,,,,,,". D) A instrução provoca um erro de execução. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
| Qual dessas coleções Python é ordenada, mutável (permite mudanças) e permite duplicação de itens? A) Dictionary B) Tuple C) List D) Set E) Nenhuma das opções anteriores Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
|
GNU Octave - Como calcular o coeficiente angular de uma reta em GNU Octave dados dois pontos no plano cartesiano |
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 |
