 |
|
||||
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Diretivas AngularJS |
Tutorial AngularJS - Como usar a diretiva ng-init do AngularJSQuantidade de visualizações: 2259 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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 para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- Ordem: 1 - Título: Java para a web - Autor: Osmar J. Silva Ordem: 2 - Título: Aprenda AngularJS - Autor: José de Angelis |
 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: 1517 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<?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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!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 ::: Controllers AngularJS |
Como adicionar funções (ou métodos) ao seu controller AngularJSQuantidade de visualizações: 1959 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!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>
|
Vamos testar seus conhecimentos em Python |
Qual o resultado da execução do seguinte código Python?
soma = 0
for i in range(0, 10):
soma = soma + 3
if i > 4:
break
print("A soma é: {0}".format(soma))
A) A soma é: 9 B) A soma é: 19 C) A soma é: 24 D) A soma é: 18 E) A soma é: 28 Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Pilares centrais: dimensionamento e detalhes construtivos Em relação aos detalhes construtivos dos pilares centrais, pode-se afirmar que: A) não deve-se deixar vãos nas formas, pois pode ocorrer perda de nata. B) no mercado, existem apenas as formas metálicas para concretagem de pilares. C) quando o pilar não está no prumo, deve-se utilizar teodolito. D) As tensões de deformação em um material dúctil são lineares. E) O desmoldante não influencia a desmolagem dos pilares. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Sistema domiciliar de abastecimento de água Se alguém mergulha numa piscina, a água exerce uma pressão sobre o corpo. Da mesma forma, a água exerce uma pressão sobre outros fluidos ou sobre uma superfície. Essa pressão não depende do volume de água contido em determinado recipiente, mas da altura do nível da água. Assim, ao se dimensionar as tubulações, deve-se considerar as pressões máximas e mínimas que serão suportadas pelas tubulações. Dessa forma, a pressão máxima que a instalação de água fria pode apresentar durante o funcionamento dos aparelhos é: Selecione a resposta: A) 0,5mca. B) 60mca. C) 20mca. D) 40mca. E) 5mca. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Madeiras A madeira desempenha um papel significativo na construção civil, sendo empregada em uma variedade de aplicações, desde montagem de canteiros de obras, escoramentos e formas até esquadrias e estruturas de cobertura. Essa versatilidade da madeira na construção civil está diretamente relacionada às suas propriedades físicas e mecânicas, que determinam suas diversas funcionalidades. Com relação às propriedades das madeiras, assinale a resposta correta: A) A resistência à flexão da madeira é uma das propriedades físicas que permitem que esse material seja usado na construção civil. B) O módulo de elasticidade das madeiras varia em função da espécie, da direção considerada e da umidade da madeira. C) A fluência na madeira é inversamente proporcional ao tempo em que o carregamento atua. D) A resistência das madeiras é a mesma, independentemente da direção na qual a peça será mobilizada. E) A estabilidade dimensional da madeira está relacionada à resistência da madeira à penetração ou ao desgaste. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fundações |
| Fundações profundas A infraestrutura de fundação de qualquer empreendimento desempenha papel importante no suporte de cargas decorrentes do peso próprio da superestrutura e de sua utilização. As fundações são convencionalmente separadas em dois grandes grupos: superficiais e profundas. Com base no que foi exposto, assinale com V (verdadeiro) ou F (falso) as proposições a seguir. ( ) Estaca escavada mecanicamente é a estaca com a qual um operador, lançando mão de um trado manual, perfura o solo. Isso é feito exclusivamente com revestimento. ( ) Estacas são elementos de fundação profunda com auxílio de ferramentas ou equipamentos. O procedimento pode ser feito por cravação à percussão, prensagem, vibração ou escavação, ou ainda de forma mista, envolvendo mais de um desses processos. ( ) O elemento que transmite a carga proveniente da superestrutura ao terreno pela resistência de ponta ou resistência do fuste, ou ainda pela combinação das duas formas, é classificado como estaca. Assinale a alternativa que indica, de cima para baixo, a ordem correta. A) V, V, V. B) F, F, F. C) V, F, V. D) F, V, F. E) F, V, V. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
