Vamos dar continuidade ao nosso projeto com o Yo (ou Yeoman se prefere) com o Angular.js iniciado na postagem anterior. Quando nosso projeto foi criado com o Yo a estrutura criada foi utilizando as rotas do Angular (arquivo angular-route.js). Existem programadores que preferem trabalhar sem seu uso para facilitar, porém isso atrapalha muito a estrutura do projeto, exigindo um uso excessivo da tag ng-controller e a perda da visão do projeto.
Uma estrutura de rotas facilita a navegação entre as visões, sabemos exatamente qual controlador pertence a qual visão e para onde vai seu link de acesso. Lembre-se que segundo a metodologia REST esse controle é fortemente necessário.
Antes de criarmos uma nova rota, existe um detalhe que me incomoda no Bootstrap: seus ícones. Me desculpe quem gosta, pessoalmente acho-os feios e prefiro utilizar os do Font Awesome.
Para adicionar este pacote ao nosso projeto, acesse o site, baixe o pacote, descompacte e nele encontramos duas pastas essenciais. Na pasta \css copie o arquivo font-awesome.css e coloque na pasta \app\styles do projeto. Copie a pasta \fonts (inteira) para a pasta \app (resultando em \app\fonts). Edite o arquivo index.html na pasta \app e na tag head adicione a seguinte linha.
Agora podemos retornar as rotas. Vamos implementar uma página que mostrará os locais aonde podemos encontrar um bom Café. Não pretendo ainda usar o banco de dados, então os dados ficarão armazenados em memória.
Não pense no Yo apenas como um gerador da estrutura de projetos, uma de suas melhores vantagens é a geração de artefatos para o projeto. Obviamente isto dependerá do gerador utilizado. No caso do gerador do Angular temos a nossa disposição a geração de vários artefatos que incluem: constantes, controladores, decoradores, diretivas, padrão factory, filtros, provedores, rotas, serviços, valores, visões e alguns outros que veremos no decorrer dessas postagens.
Vamos iniciar pelo gerador de rota (route). Na janela de comandos, interrompa o servidor Grunt e digite o seguinte comando:
Modifique o controlador de contato para a seguinte codificação:
Primeira Parte - Superior da Tela
Segunda Parte - Dados da Tela
Terceira Parte - Formulário da Tela
E nossa tela está conforme a seguinte figura:
E já podemos visualizar e adicionar alguns contatos. Pronto, simples assim.
Obrigado e até a próxima
Fernando Anselmo
Uma estrutura de rotas facilita a navegação entre as visões, sabemos exatamente qual controlador pertence a qual visão e para onde vai seu link de acesso. Lembre-se que segundo a metodologia REST esse controle é fortemente necessário.
Antes de criarmos uma nova rota, existe um detalhe que me incomoda no Bootstrap: seus ícones. Me desculpe quem gosta, pessoalmente acho-os feios e prefiro utilizar os do Font Awesome.
Para adicionar este pacote ao nosso projeto, acesse o site, baixe o pacote, descompacte e nele encontramos duas pastas essenciais. Na pasta \css copie o arquivo font-awesome.css e coloque na pasta \app\styles do projeto. Copie a pasta \fonts (inteira) para a pasta \app (resultando em \app\fonts). Edite o arquivo index.html na pasta \app e na tag head adicione a seguinte linha.
<link href="styles/font-awesome.css" rel="stylesheet"></link>Pronto, agora já podemos utilizar esta biblioteca com 605 ícones a nossa disposição e de fácil pesquisa no site.
Agora podemos retornar as rotas. Vamos implementar uma página que mostrará os locais aonde podemos encontrar um bom Café. Não pretendo ainda usar o banco de dados, então os dados ficarão armazenados em memória.
Não pense no Yo apenas como um gerador da estrutura de projetos, uma de suas melhores vantagens é a geração de artefatos para o projeto. Obviamente isto dependerá do gerador utilizado. No caso do gerador do Angular temos a nossa disposição a geração de vários artefatos que incluem: constantes, controladores, decoradores, diretivas, padrão factory, filtros, provedores, rotas, serviços, valores, visões e alguns outros que veremos no decorrer dessas postagens.
Vamos iniciar pelo gerador de rota (route). Na janela de comandos, interrompa o servidor Grunt e digite o seguinte comando:
yo angular:route contatoSerão realizadas as seguintes ações:
- Criação do controlador contato.js em \app\scripts\controllers
- Criação da classe de teste contato.js em \test\spec\controllers
- Criação da visao contato.html em \app\views
- Modificação do arquivo app.js com a adição da nova rota
Ou seja, está tudo pronto para trabalharmos o código das páginas em si, sem termos de nos preocupar com a estruturação do projeto devido a criação de um novo artefato e sua implementação na rota. Reinicie o servidor Grunt e vamos realizar a chamada desta rota no menu principal do sistema. Edite novamente o arquivo index.html na pasta \app e modifique o link descrito em Contact para o seguinte:
<li><a ng-href="#/contato">Contatos</a></li>Agora temos acesso a página criada a partir do menu.
Modifique o controlador de contato para a seguinte codificação:
'use strict';
/**
* @ngdoc function
* @name coffeshopApp.controller:ContatoCtrl
* @description
* # ContatoCtrl
* Controller of the coffeshopApp
*/
angular.module('coffeshopApp')
.controller('ContatoCtrl', function ($scope) {
$scope.contatos = [
{nome: 'Belini Pães e Gastronomia', endereco: 'SCLS 113, Bloco D, Loja 35', telefone: '(61) 3345-0777'},
{nome: 'Casa de Biscoitos Mineiros', endereco: 'SCLS, Bloco A -21', telefone: '(61) 3242-2922'},
{nome: 'Café Daniel Briand', endereco: 'SCLN 104 Loja 26', telefone: '(61) 3326-1135'}
];
$scope.adicionarContato = function () {
$scope.contatos.push({nome: $scope.contato.nome,
endereco: $scope.contato.endereco,
telefone: $scope.contato.telefone});
$scope.contato.nome = $scope.contato.endereco = $scope.contato.telefone = '';
};
});
Criamos o JSon que responderá a página com alguns contatos e criamos um método para adicionar um novo contato. Para melhor explicar vou dividir a codificação da visão em 3 partes.Primeira Parte - Superior da Tela
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<div class="row">
<div class="col-md-12">
<h5><span class="fa fa-coffee"></span> Locais para Tomar um Café</h5>
</div>
</div>
</div>
</div>
Acredito que o único problema aqui seja essa complexidade de tags div. Uma simples regra para o Projeto Web Responsivo é quanto ao uso das tags table, tr e td que são trocadas por estrutura de divisões. O Bootstrap provê classes muito bem definidas para que possamos realizar essa troca, e é basicamente isso que estamos estruturando.Segunda Parte - Dados da Tela
<div class="panel-body">
<div class="row" ng-repeat="contato in contatos">
<div class="col-md-4 col-xs-12">
<strong>{{contato.nome}}</strong>
<small>
<span class="fa fa-home" style="opacity:0.5"></span> {{contato.endereco}}
<br />
<span class="fa fa-phone" style="opacity:0.5"></span> {{contato.telefone}}
</small>
</div>
</div>
</div>
Mostramos os dados que estão armazenados no JSon com a tag do Angular ng-repeat.Terceira Parte - Formulário da Tela
<div class="panel-footer">
<form style="padding: 0 10px 10px 5px" name="frmContato">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-male fa-fw"></i></span>
<input class="form-control" type="text" ng-model="contato.nome" placeholder="Nome" />
</div>
<div class="input-group" style="padding-top:5px;">
<span class="input-group-addon"><i class="fa fa-home fa-fw"></i></span>
<input class="form-control col-xs-12" type="text" ng-model="contato.endereco" placeholder="Endereço" />
</div>
<div class="input-group col-lg-6" style="padding-top:5px;">
<span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
<input class="form-control" type="text" ng-model="contato.telefone" placeholder="Telefone" />
</div>
<div style="text-align:right;padding-top:10px;">
<button class="btn btn-success" ng-click="adicionarContato()">Adicionar Contato</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Na parte final criamos um formulário para adicionarmos um novo contato, através da chamada a função adicionarContato(). Como as tags input possuem o parâmetro ng-model o Angular poderá reconhecer os campos digitados e passá-los através do $scope.E nossa tela está conforme a seguinte figura:
E já podemos visualizar e adicionar alguns contatos. Pronto, simples assim.
Obrigado e até a próxima
Fernando Anselmo
