 |
|
||||
 Código-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 |
|||||
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Passos Iniciais |
||||
O que é o AngularJS, como baixar, testar e escrever sua primeira aplicaçãoQuantidade de visualizações: 1406 vezes |
||||
|
O AngularJS é um framework JavaScript de código aberto, mantido pelo Google, que auxilia na execução de single-page applications (SPAs), ou seja, aplicações de uma única página. Neste tipo de aplicação não há mudança de página por meio do recarregamento da página inteira, mas somente parte do código via chamadas ao DOM e AJAX. Seu objetivo é o desenvolvimento de aplicativos que podem ser acessados por um navegador web, e foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos. A biblioteca lê o HTML que contém atributos especiais e então executa a diretiva na qual esta tag pertence, e faz a ligação entre a apresentação e seu modelo, representado por variáveis JavaScript comuns. Os valores dessas variáveis JavaScript podem ser setados manualmente, ou via um recurso JSON estático ou dinâmico. Como baixar o AngularJS Embora seja comum baixar o AngularJS a partir do Node.js, nesta dica mostrarei como fazer o download manualmente. Para isso, acesse a URL https://code.angularjs.org e localize a versão desejada. Para esta dica eu baixei a versão 1.7.9 (angular-1.7.9.zip, com o tamanho de 7,40Mb). Finalizado o download, descompacte os arquivos na raiz do seu servidor web (ou qualquer outro diretório que você julgar necessário). Hora de testar o AngularJS Agora que você já baixou o AngularJS e já descompactou o seu conteúdo no diretório de sua preferência, chegou a hora do grande teste. Crie um novo documento HTML com o seguinte conteúdo:
Abra a página no seu navegador, digite seu nome na caixa de texto e verá algo como "Olá, Patrícia. Tudo bem com você?". E o interessante é que a frase de saudação é atualizada à medida que você vai digitando. Nesta dica não detalharei os elementos que usamos neste exemplo. Apenas note que fizemos a importação do arquivo .js do AngularJS localmente: <script src="http://localhost/angular-1.7.9/angular.min.js"></script> É possivel fazer a importação usando CDN, o que dará ainda mais velocidade ao carregamento de suas aplicações. Para a versão 1.7.9, o CDN do Google é: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script> Funcionou como esperado? Agora veja mais dicas dessa seção para aprender mais um pouco sobre AngularJS. |
||||
 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: 1945 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:
| ||||
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: 1508 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:
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:
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: 2244 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:
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:
Quando você abrir esta página, verá a seguinte saída:
| ||||||||||||
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
