Postagens

Mostrando postagens com o rótulo Angular JS

AngularJS - detectando o evento Enter através de uma diretiva ngEnter

O AngularJS tem inúmeras diretivas e funções para criar rapidamente uma aplicação porém uma que não existe no pacote do framework e que faz bastante falta é um evento ' on-Enter ' para chamar uma função ou método. Por exemplo se estou desenvolvendo um formulário e quero que ao preencher um campo e apertar o Enter uma função seja chamada, seja para validar algum dado, seja para efetuar um login. Apesar de não existir um evento deste tipo o AngularJS permite a criação de diretivas personalizadas. Assim podemos criar a nossa própria diretiva ng-Enter . Abaixo está uma diretiva simples que permite incluir em sua aplicação um ng-enter e, através deste, chamar uma função qualquer. /* Esta diretiva permite chamar uma função qualquer ao pressionar a tecla Enter. */ app.directive('ngEnter', function () { return function (scope, element, attrs) { element.bind("keydown keypress", function (event) { if(event.which === 13) { ...
Postar um comentário
Leia mais

AngularJS - Como gerenciar requisições assíncronas em Ajax e não perder o fluxo de dados

Imagem
Se por um lado a tecnologia Ajax de requisições assíncronas foi uma revolução para a Web, permitindo aplicações mais leves, rápidas, robustas e ágeis seu gerenciamento exige cuidados. É muito comum perder dados entre requisições ou então efetuar cálculos ou procedimentos sem ter o cuidado de garantir que os dados requisitados através de um http Post ou Get tenham chegado a tempo. Talvez o maior segredo para trabalhar com requisições assíncronas é ter sempre em mente que os dados não chegam em uma sequência como a da programação estruturada mas sim na ordem em que as consultas feitas nos web services e fontes de dados são concluídas. Desta forma uma consulta que foi feita primeiro em uma fonte de dados 'A' não necessariamente será concluída antes de uma consulta feita logo depois em uma fonte de dados 'B'. Se o server 'B' for mais rápido que o 'A', por exemplo, a sequência é invertida. Este cenário é interessante na medida em que não precisamos aguar...
Postar um comentário
Leia mais

AngularJS - Aplicando filters através do Controller

Trabalhar com data pode ser bem chato, porém com o Angular JS é muito tranquilo. Vamos criar um script que pega a data atual e a formata no padrão brasileiro, ou seja, Dia/Mês/Ano hora:minuto:segundo. Segue abaixo o exemplo: <html ng-app="app"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script> <script> var appModule = angular.module('app', []); function General($scope, $element, $http, $filter) { $scope.datahora = $filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss'); } </script> </head> <body ng-controller="General"> <p>Data</p> <span>{{datahora}}</span> </body> </html> 'General' é nosso controller. O detalhe aqui é incluir o parâmetro ' $filter ' na declaração da função do controller. Com isso poderemos trabalhar com os filtr...
Postar um comentário
Leia mais

Angular.js - Montando listas ou tabelas usando loops com ng-repeat

Imagem
No artigo anterior vimos como trabalhar com estilos CSS e classes além de conhecer algumas novas diretivas e como elas são uma espécie de atalho para os desenvolvedores . Hoje vamos avançar um pouco mais e trazer um assunto bem útil, que é a criação de listas e tabelas dinamicamente, através de loops. É comum as listas ou tabelas serem criadas do lado servidor, fazendo-se loops dos dados vindos de um banco de dados ou array mas fazer esta mesma ação do lado cliente é menos comum. Como a ideia do Algular.js é trabalhar dados fornecidos no formato Json, devemos ter em mente que criar uma lista ou tabela pode ser feita sim do lado cliente de maneira fácil e, além disto, contribuir para a prática da programação baseada em MVC, ou seja, que separa as camadas de layout das demais. Além disto vamos aproveitar a oportunidade e tratar também de uma outra maneira de aplicar as técnicas de estilos CSS. O exemplo abaixo será nossa base de estudos neste artigo. <html ng-app> ...
Postar um comentário
Leia mais

Angular.js - Trabalhando com classes e estilos CSS de modo mais limpo

Imagem
O Angular traz modos interessantes de se trabalhar com estilos CSS, tornando mais automatizadas e limpas certas operações e interação cliente/aplicação. Vamos aproveitar para ver um pouco sobre diretivas do Angular também. As diretivas são propriedades inseridas nas Tags que nos ajudam a trabalhar com as interações do usuário. O Angular.js possui inúmeras diretivas que substituem a prática muito utilizada no Jquery de atribuir eventos a classes ou ids. Se no Jquery precisávamos ligar um evento a uma classe ou id e depois ligar estes a uma função para executar a operação desejada, no Angular.js isto é feito diretamente, atribuindo-se a função diretamente a um evento dentro da Tag desejada, sem a necessidade de utilizar outros tipos de truque. O exemplo abaixo considera dois diferentes modos de se trabalhar com classes e estilos. <html ng-app> <head> <title>Classes</title> <style> .menu-true { color: green; } .outro-estilo ...
Postar um comentário
Leia mais

Angular.js - Duas formas diferentes de imprimir valores

Imagem
Uma dica rápida sobre Angular são as formas de se imprimir valores no HTML de sua aplicação. A maneira mais "visual" é utilizando chaves duplas {{}}. O que for inserido dentro destas chaves duplas será considerado como uma variável e seu conteúdo, se este existir, será impresso. <html ng-app> <head> <title>Dois tipos de input</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script> </head> <body ng-controller='TextController'> <h1>Exemplo</h1> <div> <p>{{content}}</p> </div> <script> function TextController($scope) { $scope.content = "Com chaves"; } </script> </body> </html> No exemplo acima {{content}} é uma variável. A função  TextController() seta o valor de content para  "Com chaves". Temos como saída: Exemplo Com ch...
2 comentários
Leia mais

Uma introdução ao Angular.js

Imagem
Pesquisando sobre novas tecnologias me deparei com o Angular JS , um projeto suportado pelo Google. A ideia do Angular JS é oferecer uma alternativa ao Jquery, Ember e outros frameworks. Esta pesquisa me levou também a muitos caminhos sem saída e desinformação. Para evitar que os leitores do blog também fiquem confusos resolvi fazer um post explicando o básico para iniciar no Angular JS. Bom, em primeiro lugar você não precisa de nenhuma configuração ou instalação no servidor. Trabalhar com Angular JS depende apenas da carga de um arquivo .js, que pode ser (aliás é recomendado) linkado diretamente do Google. É basicamente o mesmo procedimento que você faria para carregar a biblioteca do Jquery O serviço está disponível em: http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js Vamos a um exemplo bem básico, o cálculo de uma soma com Angular JS. Chamaremos este arquivo de angular.html: <html> <head> <script src="http://ajax.googleapis....
Postar um comentário
Leia mais