|
May 17, 2017
|

Criando uma aplicação com AngularJS

Introdução

A necessidade de desenvolver aplicações leves e desacopladas do backend fez com que muitos frameworks de frontend se popularizassem e, dentre eles, se destaca o AngularJS.

Para quem não conhece, o AngularJS é um framework JavaScript, com base no modelo de arquitetura Model View Whatever (MVW). Nasceu dentro do Google, em meados de 2009, mais precisamente pelas mãos de Misko Hevery.

Uma das principais características do AngularJS é a forma como ele sincroniza os dados do model com os componentes de visão. Essa feature é conhecida como Two-way-databind, na qual os componentes são atualizados automaticamente pelo framework sempre que um dado é alterado.

 

Two-Way Data Binding do AngularJS

 

Iniciando uma aplicação

Após conhecer um pouco mais o AngularJS, vamos aprender a desenvolver um sistema simples de cadastro de usuário, conforme figura abaixo. Como bônus, vamos adicionar o framework Bootstrap na aplicação, para que ela fique responsiva e possa ser utilizada em qualquer dispositivo, seja ele mobile ou desktop.

Cadastro de Usuário

Cadastro de Usuário

Vamos iniciar o desenvolvimento utilizando o template html abaixo. Percebam que nele há um atributo ng-app no elemento html. Na verdade, esse atributo é uma diretiva do AngularJS, responsável por inicializar o contexto do framework a partir do elemento em que foi inserido:

<!DOCTYPE html>
<html ng-app="cadastro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Totalcross - Cadastro de Usuários</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .usuario-conteudo {
            background-color: #EEE;
            padding: 20px 20px 10px 20px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <div class="usuario-conteudo">
                <h1>Cadastro de Usuários</h1>
                <form name="formulario">
                    <div class="form-group">
                        <label for="nome">Nome*</label>
                        <input type="text" class="form-control" id="nome" placeholder="Nome do usuário"
                               maxlength="20" required>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="senha">Senha*</label>
                        <input type="password" class="form-control" id="senha" placeholder="Informe a senha do usuário"
                               maxlength="10" required>
                        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                        <p class="help-block">ADICIONAR MENSAGEM DE VALIDAÇÃO DE SENHA</p>
                    </div>
                    <button type="submit" class="btn btn-primary">Cadastrar</button>
                </form>
                <hr>
                <h1>Lista de Usuários</h1>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Nome</th>
                        <th>Senha</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Aqui serão exibidos os dados do usuários cadastrados -->
                    <tr >
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Criando o Controller

Agora que o template foi preparado, é necessário adicionar a lógica de negócio ao sistema de cadastro. Para isso, é preciso criar o controlador (controller) que será o responsável pelo gerenciamento do fluxo dos dados apresentados na view. 

Vamos criar um arquivo JavaScript de nome app.js. Nele, será adicionado o módulo do Angular com o mesmo nome (cadastro) que definimos no html. Em seguida, criaremos o controller com o nome UsuarioController.

(function () {
    'use strict';

    angular.module('cadastro', [])

        .controller('UsuarioController', function ($scope) {

            // lista de usuários pré cadastrados
            $scope.usuarios = [
                {nome: 'Fulano', senha: '1234'},
                {nome: 'Maria', senha: '12345'},
                {nome: 'Zé', senha: '12345678'}
            ];

            //inicialização de um usuário vazio
            $scope.usuario = {nome: '', senha: ''};

            //método para adicionar o usuário a lista
            $scope.cadastrar = function () {

            };

            //método para validar a senha do usuário
            $scope.validarSenha = function () {
                
            };
        });

})();

Observem que o controlador recebe uma função com um parâmetro chamado $scope. Esse parâmetro faz parte do contexto do AngularJS e é inserido dentro do UsuarioController por meio do mecanismo de injeção de dependência. Será por intermédio do $scope que os dados na view serão atualizados, ele será o fará o bind entre o model e a view.

Além de definir o controlador do cadastro, é preciso adicionar a diretiva ng-controller em algum elemento da view. Com essa diretiva,  indicamos que todo o conteúdo do elemento será gerenciado pelo UsuarioController. Então, adicionaremos essa diretiva ao html <div class=”usuario-conteudo” ng-controller=”UsuarioController”>.

Listando dados na tabela

A primeira ação será exibir à lista de usuários pré cadastrados. Para realizar essa tarefa, será adicionada na tabela a diretiva ng-repeat, responsável por ler todos os elementos da lista e exibi-los na tela.

...
<tr ng-repeat="usuario in usuarios">
    <td>{{usuario.nome}}</td>
    <td>{{usuario.senha}}</td>
</tr>
...

Nesse passo, o ng-repeat está iterando os elementos do array. Para cada elemento, uma nova tr será criada. Já as expressões {{usuario.nome}} e {{usuario.senha}} serão substituídas pelos valores dos objetos que estão dentro do array.

Bem simples, não? =)

Cadastrando o usuário

Agora que já sabemos como listar os usuários em uma tabela vamos aprender a cadastrar o usuário. Mas primeiro, tente dar um click no botão de cadastro, sem preencher os campos de nome e senha, e veja o que acontece. Vá em frente, eu espero!!!

Se você foi curioso, percebeu que uma mensagem de validação de campo obrigatório foi exibida. Verifique no template html que os inputs de nome e senha estão com o atributo required. Assim, o formulário só será submetido se os campos forem preenchidos.

Dito isto, vamos adicionar aos campos de input a diretiva ng-model. Ela será a responsável por ligar o atributo $scope.usuario, que está no controlador, com a view. Então, com essa alteração, os inputs ficarão da seguinte forma: <input id=”nome” … ng-model=”usuario.nome”> e <input id=”senha” … ng-model=”usuario.senha”>

Para finalizar as alterações no html, adicionaremos a diretiva ng-submit no elemento form. Assim, quando o formulário for submetido, a diretiva será invocada. O código ficará assim: <form name=”formulario” ng-submit=”cadastrar()”>.

Agora estamos quase lá, só precisamos alterar o método de cadastro no controlador para que ele adicione o usuário à lista de usuários.

//método para adicionar o usuário a lista 
$scope.cadastrar = function () {
    $scope.usuarios.push($scope.usuario);
    $scope.usuario = {nome: '', senha: ''};
};

Voilá! Com pouquíssimas linhas de código estamos cadastrando e listando os usuários da nossa aplicação.

Para finalizar o nosso sistema, que tal informar ao usuário se a sua senha é forte ou fraca?

Validando a senha do usuário

Faremos uma validação bem simples com a senha informada na hora do cadastro. Nesta regra de negócio, uma senha é considerada fraca se possuir menos que seis caracteres. Então, vamos codificar o método de validação de senha no controlador:

//método para validar a senha do usuário
$scope.validarSenha = function () {
    $scope.statusSenha = {
        classe: '',
        icone: '',
        mensagem: ''
    };

    if($scope.usuario.senha && $scope.usuario.senha.length >= 6) {
        $scope.statusSenha.classe = 'has-success';
        $scope.statusSenha.icone = 'glyphicon-ok';
        $scope.statusSenha.mensagem = 'Senha forte';
    }else {
        $scope.statusSenha.classe = 'has-error';
        $scope.statusSenha.icone = 'glyphicon-remove';
        $scope.statusSenha.mensagem = 'Senha fraca';
    }
};

Agora precisamos modificar o html para que, ao digitar a senha, o usuário seja informado se ela é adequada. Vamos adicionar ao input da senha a diretiva ng-change. Assim, todas as vezes que o usuário modificar o valor do input de senha, o método será chamado e uma mensagem será exibida na tela com a informação do status da senha.

<div class="form-group has-feedback {{statusSenha.classe}}">
    <label for="senha">Senha*</label>
    <input type="password" class="form-control" id="senha" placeholder="Informe a senha do usuário"
           maxlength="10" required ng-model="usuario.senha" ng-change="validarSenha()">
    <span class="glyphicon form-control-feedback {{statusSenha.icone}}" aria-hidden="true"></span>
    <p class="help-block">{{statusSenha.mensagem}}</p>
</div>

Pudemos notar que o AngularJS é um framework bem poderoso. E olha que este post é só uma pequena amostra do que ele é capaz.

Você encontra o código fonte completo no nosso github.

Por hoje é isso pessoal, espero que tenham gostado.

Abraços e até a próxima!

Comments

More articles

Afinal, é possível criar app sem saber programação?

November 16, 2018

Como transformar um website em aplicativo?

November 14, 2018

Aplicativos: O que conhecer antes de criar um

November 13, 2018

É possível instalar aplicativos Android no Windows?

November 9, 2018