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:
<script src="js/lib/angular-ui.js"></script>
Step 3
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;
};
};
Step 4
Agora vamos criar o arquivo HTML, que não tem nada de especial. Chamei ele 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>
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:
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. See ya!!