AngularJS

AngularJS: Diretiva para controle de acesso

Fala galera!

Semana passada, recebi um e-mail perguntando se eu tinha algum exemplo, com AngularJS, para controlar as permissões de acesso do usuário aos botões da aplicação. Pensei: porquê não juntar a fome com a vontade de comer e blogar a respeito? Então vamos nessa!

 

Diretiva

Antes de colocar a mão na massa, é importante saber que o melhor lugar para se manipular o DOM é dentro de uma directive. Isso se deve ao comportamento do Angular HTML Compiler. Pode parecer meio estranho falar sobre compilar, mas é graças ao HTML Compiler que podemos anexar comportamento a qualquer elemento HTML ou adicionar atributos.

Uma dica importante refere-se a normalização dos nomes das diretivas. O AngularJS geralmente utiliza camelCase para normalizá-las (exemplo: ngRepeat e ngModel). Porém, temos que lembrar que o HTML não é case sensitive. Por esse motivo, usamos letras minúsculas e mais um traço separando as palavras (ng-repeat e ng-model) para utilizar as diretivas no DOM .

O nome da nossa diretiva de acesso será “permissaoAcesso. Ela terá a restrição de ser utilizada unicamente como atributo em um elemento do DOM. E é aqui que pode surgir a dúvida: “mas Gabriel, tem como restringir como a diretiva vai ser utilizada?”

A resposta é sim. As diretivas possuem a opção de restringir como serão usadas. Essa opção é a restrict  e ela obedece os seguintes parâmetros:

  • A: só pode ser utilizada como atributo.
  • E: só pode ser utilizada como elemento.
  • C: só pode ser utilizada como classe (class) css.
  • M: só pode ser utilizada como comentário.

 

Mas e se eu quiser usar como elemento e atributo, como faço? Aí é só mesclar com as letras que você desejar, por exemplo ‘AECM’, que libera o uso da diretiva em todas as opções mencionadas acima.

Por default, a opção restrict será ‘AE’. Ou seja, poderá ser utilizada como elemento e atributo.

Leia Mais

localtunnel

localtunnel: Disponibilizando acesso a uma aplicação local

E aí galera, beleza?

Se você, assim como eu (sem gracinhas, viu?), já passou por perrengues para disponibilizar uma aplicação local na web, este post pode ser muito útil.

Antigamente, para acessar uma aplicação rodando na minha própria máquina, a primeira configuração que fazia era cutucar o roteador ou o modem da velox (vixxxxx!!!) e tentar liberar as portas para a máquina.

Naquele tempo, eu não sabia nem o que era configuração de portas, a sorte eram os buscadores do Yahoo, Altavista, Cadê? e depois o Google (tem gente que não vai nem saber o que é Altavista e Cadê?).

Também Já quebrei muito a cabeça com o no-ip para tentar acessar meus “códigos” da faculdade (não dá para chamar de aplicação, porque o desenvolvimento era orientado à gambiarra).

Pois bem, os seus e os meus problemas acabaram! Há alguns anos tenho utilizado com bastante facilidade módulos que me auxiliam nessa questão e hoje quero compartilhar com vocês o localtunnel.

O localtunnel é uma app bem simples de ser utilizada. Não é necessário configurar “nada” no seu firewall e nem no DNS. Acreditem, não é mágica! =)

Instalação

Para instalar o localtunnel é necessário ter, antes, o node.js. A instalação é feita através do npm:

Leia Mais

AngularJS

AngularJS: Diferenças entre $apply, $timeout, $evalAsync e $digest

Fala galera, beleza?

Após alguns meses sem nenhuma novidade por aqui, estou tentando retornar a rotina de publicações… A ausência foi por um bom motivo: estive desenvolvendo, e ainda estou, um projeto social chamado Doe Caridade. Mas em breve eu volto a falar sobre ele, pois pretendo abrir o código fonte.

O post de hoje é sobre as diferenças entre o $apply, $timeout, $evalasync e $digest. Para entendermos um pouco mais como o AngularJS funciona é importante conhecê-las e saber como e quando usá-las.

$apply()

Algumas vezes é necessário executar operações fora do escopo do AngularJS. No post sobre Socket.io e AngularJS: Comunicação em tempo real, por exemplo, falei sobre a execução do $apply para poder atualizar o escopo do AngularJS todas as vezes que o frontend recebia dados do backend através do socket.io.

Leia Mais

AngularJS

AngularJS: Validação de formulário

Fala galera!

O post de hoje vai ser bem simples e direto: validar formulário com o AngularJS. Vamos ver passo a passo como é fácil e como esse framework é potente também na validação? Simbora…

O código abaixo será a base do formulário das validações. Como podemos ver, ele é apenas um simples formulário para validar um saque em um caixa.

Algumas considerações relevantes do nosso formulário:

Leia Mais

Socket.io e AngularJS: Comunicação em tempo real

Fala galera, beleza?

No último post falei um pouco sobre refresh periódico com o AngularJS, quem ainda não leu ta perdendo, viu!? Corre e ler… =)

Após esse post, algumas pessoas falaram da questão do porquê não usei websocket!

“Pô Gabriel, websocket é muito melhor para um chat, não?”

Sim, concordo. Mas a intenção do post anterior era somente falar sobre refresh periódico. Assim, como vocês que mandam aqui mesmo, vamos falar um pouco sobre comunicação bidirecional? Oxe, e não é sobre websocket? Calma meu fi, leia o resto. =)

Já ouviu falar sobre o socket.io? É por causa dele que mencionei a comunicação bidirecional e não o websocket!

Leia Mais

%d blogueiros gostam disto: