Olá, pessoal!

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

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 é tão simples, uma vez que ele não está em um local simples e tem bastante coisa separado. O ideal era oferecerem o .js de uma maneira mais 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 artigo. Vou colocar apenas o código relacionado  ao objetivo do artigo.

Passo 01

Adicione o Angular-ui.js  ao projeto

Passo 02

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:

<script src="js/lib/angular-ui.js"></script>

Passo 03

Crie um controller:

var blacklistController= function($scope){
	//criando meu black list, um array. 
	$scope.blacklist= ['satanas', 'biba'];
	//verifica se a palavra digitada corresponde ao que temos no blacklist
	$scope.notBlackListed = function(value){
		return $scope.blacklist.indexOf(value)===-1;
	};
	
	
};

Passo 04

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

<form name="form">
<label> first name</label>
<input name="firstname" type="text" ng-model="user.firstname" required
ui-validate="{blacklisted:'notBlackListed($value)'}"/>
 <button ng-disabled="form.$invalid" class="btn">Submit</button>
</form>

Passo 05

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:

when("/angularui",{templateUrl:"angularui.html",controller:blacklistController}).

Testando

Vamos testar agora:

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

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!