Neste tutorial iremos utilizar o angularjs juntamente com o PHP para o envio de emails de um formulário de contatos.

Requisitos para esse Tutorial

• O projeto Anterior pode ser visto aqui.
• WAMP, LAMP, MAMP e/ou Plano de Hospedagem.
• Conhecimento básico de PHP.

Instalação do Wamp

A instalação passo-à-passo pode ser vista neste link.

Desenvolvimento da Página de Contato

Primeiramente, iremos mover os arquivos do Tutorial anterior para a pasta www do seu wamp. Geralmente, localiza-se em c:\wamp\www . Em seguida, criaremos uma pasta com o nome ‘tutorial’ e a sua estrutura ficará parecida com esta:

• www
  •  tutorial
    • css
    • fonts
    • img
    • js
    • templates
    • index.html

Ao acessar http:\localhosttutorial em seu navegador, conforme nosso exemplo anterior, uma página semelhante à imagem abaixo deverá aparecer:

O primeiro passo será atualizar a versão do nosso angular, que referenciamos no arquivo index.html, conforme exemplo abaixo:

Feito isso, iremos editar o arquivo templatesheader.html, para acrescentarmos ao menu o link para contato.

A seguir iremos acrescentar a rota, para carregarmos tanto o modelo da página de contatos como o seu controller. Para isso iremos editar o arquivo jsmain.js

Logo abaixo nesse mesmo arquivo, iremos criar o controller que será o responsável por pegar os dados preenchidos pelo usuário e enviar para o servidor, onde o mesmo encarregar-se-á de enviar o email de contato.

Iremos criar o HTML da página de contatos e posteriormente atualizar este controller. Para isso vamos criar o arquivo contato.html na pasta templates.

Verificamos que neste código HTML encontram-se algumas “tags” que naturalmente não fazem parte do HTML-Standard, pois são tags especiais do AngularJS. Abaixo, uma breve descrição de cada uma delas:

ng-if

A documentação oficial <https://docs.angularjs.org/api/ng/directive/ngIf> , nos demonstra a seguinte definição:

A diretiva ngIf remove ou recria uma parte da árvore DOM com base em uma {expressão}. Se a expressão for atribuída a ngIf e avaliada como um valor falso, então o elemento é removido do DOM, caso contrário, um clone do elemento é reinserido no DOM.

Ou seja, nas linhas 9, 14, 19, 24, estamos usando o ng-if para mostrarmos o alerta, caso cada “input” contenha erro e ele não esteja válido.

ng-show

A documentação oficial <https://docs.angularjs.org/api/ng/directive/ngShow> nos demonstra a seguinte definição:

A diretiva ngShow exibe ou oculta o elemento HTML baseado na {expressão} fornecida. O elemento é exibido ou ocultado pela remoção da classe CSS. ng-hide . Essa classe do AngularJS define “display: none !important” no elemento.

Ou seja, ao contrário do ngIf que não cria o elemento, o ngShow cria o elemento e apenas altera a visibilidade do elemento conforme as expressões nas linhas 9, 14, 19, 24 . Usamos o ngShow para exibir o erro quando o campo html for alterado;

ng-class

Na documentação oficial <https://docs.angularjs.org/api/ng/directive/ngClass> a seguinte definição é apresentada:

A diretiva ngClass permite definir dinamicamente classes CSS em um elemento HTML por ligação de dados (databinding). Uma expressão que representa todas as classes a serem adicionados.

Ou seja, as classes de estilo são adicionadas ou removidas do elemento conforme as expressões. Nas linhas 35, 41, 47, 53 o ngClass é utilizado para adicionar a classe css ‘has-error’ caso o input contenha algum erro.

ng-model

A documentação oficial <https://docs.angularjs.org/api/ng/directive/ngModel> oferece a seguinte definição:

A diretiva ngModel se liga (bind) a um input , select , textarea (ou controle de formulário personalizado), para uma propriedade no ‘scope’ usando NgModelController, que é criado e exposto por esta diretiva.

Com isso, posteriormente é através dos ngModel que poderemos pegar os dados digitados em cada input e poderemos enviar para o servidor. Posteriormente, enviará para o email de contato.

ng-click

Na documentação oficial <https://docs.angularjs.org/api/ng/directive/ngClick> encontramos a seguinte definição:

A diretiva ngClick permite que você especifique o comportamento personalizado quando um elemento é clicado.

Na linha 61, usamos o ng-click para chamarmos a função que será responsável pelo envio dos dados do formulário para o servidor.

ng-input, ng-required, ng-minlenght e ng-maxlenght

Na documentação oficial <https://docs.angularjs.org/api/ng/input/input%5Btext%5D> a seguinte definição sobre ng-input é apontada:

Entrada de texto padrão HTML com ligação de dados angular, herdados pela maioria dos elementos input.

ngRequired

Adiciona o atributo required, necessário para restrição de validação do elemento, quando a expressão ngRequired avaliada como verdadeira. Use ngRequired em vez de required quando você quiser validar o required.

ngMinlenght

Atribui minLength (mínimo). Erro de validação se o valor for menor do que minlength.

ngMaxlenght

Seta maxLength (máximo). Erro de validação se o valor for maior do que maxlength.

Validação

Para podermos criar a validação o elemento <form> tem que ter o atributo name, e cada input também deve ter o atributo name. Ex: nomeForm.nomeInput

Com isso podemos acessar algumas propriedades:

• $error -> retorna true se existe erro
• $valid -> retorna true quando está válido
• $dirty -> quando o campo foi modificado (geralmente na digitação)

Na propriedade $error, podemos acessar os filhos que compõe a validação como required, minlenght, maxlenght, entre outros. Na linha 9 usamos no ngIf para verificarmos se no frmContato.nome$error existem erros. Já na linha 10 exibiremos a mensagem de obrigatório, caso o frmContato.nome.$error.required estiver vazio após a edição do campo.

Controller

Agora iremos trabalhar no controller que criamos anteriormente no main.js

No início do controller, definimos as 3 variáveis de controle de nossa página de contato, onde $scope.formData terá os dados preenchidos no formulário. Podemos perceber que no html contemos nos input formData.nome pelo fato de ser um objeto e no angular a palavra $scope não é necessária no template html. O mesmo vale para as outras duas variáveis que usamos para mostrar ou não a mensagem de envio, ou se houve algum erro de envio do formulário.

Em seguida temos 2 funções. A primeira é responsável por incluir os dados do formData no formato que iremos pegar no php. A segunda função é que vinculamos ao botão de envio, ele prepara os dados e envia para a url que definimos, e seu correspondente método, nesse caso POST. Isso porque usamos um serviço que o AngularJS possui, o $http, que permite a comunicação com algum servidor. Nesse caso estamos enviando os dados do formulário que será processado e enviado por email.

Este serviço é denominado promise ou promessa, que envia uma solicitação e aguarda este retorno para dar continuidade, neste caso, ao envio de dados. Duas funções são atribuídas a este processo: O success que significa basicamente que o processo obteve êxito em encontrar a url desejada e proceder com o envio de dados, recebendo true como resposta. Caso o retorno seja de fato um true, o email será enviado. Em caso de false, algum problema ocorreu no processo. E o error que neste caso, significa que ele não conseguiu achar essa url, ou de fato encontrou, mas retornou com um erro 404.

Parte do Servidor

E agora criaremos na raiz do projeto onde temos o arquivo index.html, criaremos o arquivo email.php

Na linha 10 você coloca o email que deseja receber as mensagens. Com isso poderemos testar, porém no servidor local não conseguiremos enviar email. Ao enviar os arquivos do projeto no servidor poderemos realizar este teste, e veremos a mensagem informando que o formulário foi enviado com sucesso. para saber como enviar os arquivos para o servidor veja este artigo. Até a próxima!

Download do Projeto