Powered by Max Banner Ads 

Série AngularJS: Criando blackList com angular-ui validate

July 27th, 2014 No comments

Olá Pessoal,

O objetivo do post de hoje é mostrar um pouquinho do que temos no angular-ui.  E para isso vou mostrar um recurso de ui-validate que permite validar se o valor recebido está em um Blacklist ou não.

Lets go…

Starting…

O angular-ui é uma suíte baseado no angularJS com vários componentes UI implementados. Tem coisas bem bacanas e é um projeto que é tão novo quanto o angularJS. Ainda acho o angular-ui um pouco bagunçado e tem poucas informações de como getstarted por exemplo para pegar o .js, não está em um local simples, tem bastante coisa separado. O ideal era oferecerem .js de maneira mais simples e fácil de achar no site.

O código é bem simples, apenas um input e o nome do usuário. Se ele digita alguma palavra que esteja no blacklist, o botão de submit não é habilitado.

Metendo a mão na massa

Vou considerar que você já vem acompanhando a série do angularJS e tem as configurações básicas. Não seria legal repetir toda configuração a cada novo post. Vou colocar apenas o código relacionado  ao objetivo do post.

Step 1

Adicione o angular-ui.js  ao projeto

Step 2

Como estou usando rotas e o ng-view tudo fica na index.html, então vou colocar para carregar o novo arquivo angular-ui.js  lá. Veja como fica:

 Step 3

Crie um controller

 Step 4

Agora vamos criar o arquivo HTML, que não tem nada de especial. Chamei ele de angularui.html

 

Step 5

Como estou usando o recurso de rotas do angularJS, preciso atualizar para quando eu chamar a url  /angularui ele deve carregar o controller. Basta adicionar a linha abaixo:

 

 Testando

Vamos testar agora:

uivalidateinvalid

Observe que o botão de submit não ficou ativo.

uivalidatevalid

Agora sim. Simples, não?

Claro que ao clicar nada acontece. O objetivo aqui não era dar funcionalidade real, mas mostrar como o ui-validate do angular-ui facilita nossa vida. Óbvio que as palavras do nosso blacklist deveriam ser recuperadas de uma base de dados através de um serviço  REST, por exemplo.

Bom, vou ficando por aqui. Espero que tenham curtido um pouco do angular-ui e é claro que há muito mais coisas, basta acessar  http://angular-ui.github.io  e se divertir.

Abraços. See ya!!

Série AngularJS: Atualizando versão do AngularJS via Yeoman

July 24th, 2014 No comments

yeoman

Olá Pessoal,

No post de hoje vamos ver como dizer para o Yeoman usar uma versão específica do angularJS.

Lets go…

Atualizando AngularJS via Yeoman

Por default, o Yeoman na versão 1.0 vem com o AngularJS 1.0.7, mas se precisamos usar a versão mais recente ou uma específica, como atualizar? É bem simples.

Note: vou considerar que você criou seu projeto via yeoman.

Step 1

Abra o arquivo bower.json

Step 2

Altere as dependências a seguir para a versão desejada:

  Step 3

Digite bower update e aguarde atualização

bowerupdateversion

Step 4

Agora execute:

 Step 5

Precisamos atualizar o arquivo Karma.conf.js  no array files adicione:

 Step 6

Abra o arquivo apps.js  e atualize. Adicione ngRoute ficando assim:

Step 7

Abra o arquivo index.html dentro de app/index.html e adicione a linha a seguir no bloco de script/modules.js

Pronto. Veja que a estrutura do projeto foi alterada de acordo com a versão escolhida do AngularJS. Sabemos que a partir da versão 1.2 tivemos mudanças que são incompatíveis com projetos na versão 1.0.x, como já citei aqui no blog.

Vou ficando aqui e espero que tenham gostado do post.

Abraços, see ya!

Related Posts with Thumbnails