Criando um Web App do Zero usando AngularJS e Firebase: Parte 2

() translation by (you can also view the original English article)

Na primeira parte desta série, vimos como iniciar a criação de um aplicativo usando AngularJS e Firebase. Criamos nossa página de autenticação e implementamos a funcionalidade usando o Firebase como back end.

Neste tutorial, levaremos esta série ao próximo nível. Vamos criar e configurar a página de entrada e ver como efetuar validações em AngularJS.

Iniciando

Vamos começar clonando a primeira parte do tutorial a partir do GitHub.

1	git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git

Assim que o código for obtido, navegue até o diretório do projeto e instale as dependências requisitadas.

1	cd AngularJS_Firebase_Part1
2	npm install

Quando todas as dependências estiverem instaladas, inicie o servidor.

npm start

Aponte seu navegador para http://localhost:8000/app/#/home e você deverá ver o app em execução.

Criando uma tela de entrada

Vamos iniciar criando uma página para os usuários convidados efetuarem sua inscrição. Navegue até AngularJS_Firebase_Part1/app e crie uma página chamada register. Dentro da pasta register, crie os arquivos register.html e register.js. Aqui está como register.html se parece:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>AngularJS & Firebase Web App</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

    <link href="justified-nav.css" rel="stylesheet">

</head>

<body>

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign In</>
        </label>
        <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
      </form>

    </div>

</body></html>

Como visto no código HTML acima, nós usamos o Bootstrap para nosso design HTML.

Dentro do arquivo register.js, iremos declarar as rotas para que o aplicativo acesse a visão de registro. $routeProvider tem um método chamado when, que iremos usar para criar uma rota para nossa visão de registro. Ao definir uma nova rota, iremos definir uma templateUrl que seria renderizada no arquivo index.html. Juntamente com isso, iremos definir um controller para o $scope recém-criado para a visão de registro. Um controller é uma lógica que controla uma visão particular. Aqui está como deve ser o funcionamento:

'use strict';

angular.module('myApp.register', ['ngRoute'])

// Declared route 
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/register', {
        templateUrl: 'register/register.html',
        controller: 'RegisterCtrl'
    });
}])

// Register controller
.controller('RegisterCtrl', [function() {

}]);

Agora, abra o arquivo app.js e inclua o módulo de registro myApp.register no app.

'use strict';

angular.module('myApp', [
    'ngRoute',
    'myApp.home',
    'myApp.register'  // Newly added register route
]).
config(['$routeProvider', function($routeProvider) {
    // Set defualt view of our app to home

    $routeProvider.otherwise({
        redirectTo: '/home'
    });
}]);

Para mostrar a página de registro, precisamos incluir o arquivo register.js dentro do arquivo de modelo HTML do app. Abra o arquivo index.html e inclua o seguinte:

1	<script src="register/register.js"></script>

Reinicie o servidor e aponte seu navegador para http://localhost:8000/app/index.html#/register e você deverá ver a tela de registro:

A seguir, vamos criar o link para a tela de registro na tela de entrada. Nos arquivos home.html e register.html há uma tag sign up e uma sign in , respectivamente. Iremos definir os códigos de ambos href para que eles sejam acessíveis a partir de ambas páginas.

Em home.html:

1	<a href="#/register"> Sign Up<a/>

Em register.html:

1	<a href="#/home"> Sign In<a/>

Validação de formulários em AngularJS

Quando um usuário digita seu endereço de e-mail e senha na tela de registro, precisamos validar algumas coisas. Primeiro, o e-mail de ID digitado deve ter um formato de id de e-mail válido e em segundo lugar, a senha digitada deve ter um comprimento mínimo.

AngularJS disponibiliza o FormController, que controla cada elemento dentro de um formulário. Da documentação do AngularJS:

O FormController observa todos seus controles e formulários aninhados, assim como o estado de cada um, como sendo valid/invalid ou dirty/pristine.

FormController tem algumas propriedades, como $pristine, $dirty, $invalid, $valid, etc. Veremos o que são estas propriedades e iremos usar algumas delas para implementar a validação de formulários em nossa página de registro.

Primeiro, precisamos modificar nosso formulário HTML para adicionar mensagens de validação. No arquivo register.html, modifique o formulário HTML como mostrado.

<form class="form-signin" name="regForm">
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p>Enter a valid email.</p>
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="user.password">
        <p>Min password length is 8 characters.</p>
    </div>
    <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
</form>

Salve as alterações, reinicie o servidor e recarregue a página register. Você deve ver uma página como a seguinte:

Agora, como podemos ver na tela acima, as mensagens de validação estão visíveis. Precisamos mostrá-las somente quando o e-mail e a senha não forem válidos.

AngularJS disponibiliza uma diretiva chamada ngShow para mostrar HTML baseado em uma certa expressão. (Uma diretiva AngularJS é um atributo HTML estendido, disponibilizado pelo AngularJS para aumentar as capacidades dos elementos.) Então, usaremos ngShow para mostrar mensagens de validação quando o e-mail digitado contém dados inválidos. Mas como sabemos se o e-mail digitado é inválido? Bem, relembre as propriedades de FormController que discutimos anteriormente. FormController tem uma propriedade chamada $invalid que é True se um controle é inválido. regForm.email.$invalid seria verdadeiro se o e-mail digitado não fosse válido. Para isso, usaremos $invalid e ngShow para mostrar a mensagem de validação. Modifique a mensagem do e-mail como mostrada abaixo:

1	<p ng-show="regForm.email.$invalid">Enter a valid email.</p>

Salve as alterações, reinicie o servidor e navegue até a página de registro. Você verá que a mensagem de validação para o e-mail não é mais exibida. Agora, tente digitar algo no campo de e-mail e a mensagem de erro irá aparecer. Tente digitar um endereço de e-mail válido e a mensagem de validação irá desaparecer. Mas, inicialmente, a mensagem para o comprimento mínimo da senha ainda aparece. Vamos consertar.

AngularJS disponibiliza outra diretiva chamada ng-minlength para definir o comprimento mínimo para qualquer controle input. Iremos usá-la para definir o comprimento mínimo para o campo da senha e então usar ngShow para mostrar/ocultar a mensagem de validação. Modifique o campo da senha para incluir a diretiva ng-minlength como mostrado:

1	<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">

A seguir, modifique a mensagem de validação para o campo da senha, como mostrado:

1	<p ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>

Assim, se o comprimento mínimo do campo da senha não estiver conforme o comprimento mínimo definido no campo input de senha, então regForm.password.$error.minlength será definido como "true" e a mensagem de validação será exibida.

Salve todas as alterações, reinicie o servidor e navegue até a página de registro. Tente digitar um valor para a senha e a mensagem de validação irá aparecer até que o comprimento seja 8.

Agora, para destacar os elementos input inválidos, podemos usar alguns estilos. Ao usar uma diretiva AngularJS chamada ngClass, podemos destacar dinamicamente os elementos input incorretos usando a propriedade $invalid. Adicione a diretiva ngClass à div pai dos elementos de e-mail e senha.

<div class="form-group" ng-class="{ 'has-error' : regForm.email.$invalid }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email">
    <p class="help-block" ng-show="regForm.email.$invalid">Enter a valid email.</p>
</div>

<div class="form-group" ng-class="{ 'has-error' : regForm.password.$invalid }">
    <label>Password</label>
    <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
    <p class="help-block" ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>
</div>

Salve as alterações, reinicie o servidor e tente navegar até à página de registro. Agora, em entradas inválidas, as mensagens de validação aparecerão como abaixo:

Validation messages showing on registration page

Agora, como você pode ver na tela acima, em erros de validação o botão Register é habilitado. Vamos torná-lo desabilitado, a menos que o e-mail e a senha digitados sejam válidos. O AngularJS dispõe de uma diretiva chamada ngDisabled que ajuda a desabilitar elementos baseados em uma expressão. Se email e password são validados, então os modelos user.email e user.password serão definidos. Assim, iremos usar estes dois objetos para habilitar/desabilitar o botão de registro usando ngDisabled. Modifique o botão HTML de registro como mostrado:

1	<button type="button" ng-disabled="!user.email \|\| !user.password" class="btn btn-lg btn-primary btn-block">Register</button>

Como você pode ver, ng-disabled será verdadeiro se user.email ou user.password não for falso, o que acontecerá somente quando o dado for inválido.

Salve todas as alterações, reinicie o servidor e recarregue a página de registro. Como você irá notar, o botão Register está desabilitado e assim permanecerá, até que um endereço de e-mail e uma senha válidos sejam digitados.

Registration screen with Register button disabled

Validando a tela de Entrada

Implementar a validação na tela de entrada é um tanto parecido ao modo como fizemos na tela de registro. Eu sugiro que você implemente a validação na tela de entrada por si mesmo, como um exercício. Caso você perdido, veja o código HTML modificado do formulário sign in, no arquivo home.html, como mostrado abaixo:

<form class="form-signin" name="signinForm" role="form">
    <div class="form-group" ng-class="{ 'has-error' : signinForm.email.$invalid }">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p class="help-block" ng-show="signinForm.email.$invalid">Enter a valid email.</p>
    </div>
    <div class="form-group" ng-class="{ 'has-error' : signinForm.password.$invalid }">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="3">
        <p class="help-block" ng-show="signinForm.password.$error.minlength">Min password length is 8 characters.</p>
    </div>
    <label class="checkbox">
        <a href="#/register"> Sign Up</a>
    </label>
    <button ng-disabled="!user.email || !user.password" type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>
</form>

Concluindo

Nesta parte do tutorial, nós criamos a página de registro e definimos suas rotas. Nós também vimos como implementar validações usando AngularJS na página de registro.

Na próxima parte, focaremos na implementação da funcionalidade de registro e outros recursos. O código fonte do tutorial acima está disponível no GitHub.

Deixe suas considerações nos comentários abaixo.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!