![]() |
|
||||
![]() Tenha 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 |
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Controllers AngularJS |
||||
Aprenda a criar o seu primeiro controller AngularJS (em JavaScript puro, sem CLI nem TypeScriptQuantidade de visualizações: 1199 vezes |
||||
O título desta dica pode ser exagerado, mas é isso mesmo. Mostrarei a seguir como criar o seu primeiro controller AngularJS sem precisar passar pelo processo de escrevê-lo em TypeScript e depois compilá-lo para JavaScript. Além disso, quem está aprendendo AngularJS quer ver alguma coisa logo, e não ficar disparando um monte de comando Angular CLI (Command Line Interface) sem entender muito bem o processo. Então, vamos começar. Um controller AngularJS, no final das contas, é um simples objeto JavaScript usado para controlar os dados e seus fluxos em uma aplicações AngularJS. Abra o seu editor HTML favorito e digite o seguinte código:
Ao abrir esta página no navegador você terá o seguinte resultado: Nome: Osmar J. Silva - Curso: Sistemas de Imformação Veja que primeiro nós criamos uma nova aplicação AngularJS chamada "AngularJS" com a linha: var app = angular.module('CadAlunos', []); Em seguida criamos o controller Aluno e passamos a ele o objeto $scope. É ele que nos possibilidade acessar as propriedades e métodos em um controller a partir da view. Em outras dicas desta seção eu mostro como criar métodos (funções) em um controller. Para finalizar, experimente colocar o código para a criação da aplicação AngularJS em um arquivo .js separado. Faça o mesmo com o código do controller. |
||||
![]() |
||||
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:
| ||||||||||||
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:
| ||||
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
Delphi - Como retornar o índice do item selecionado em um ComboBox do Delphi usando a propriedade ItemIndex |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |