Uma das piores características sobre um sistema HTML, é um sistema HTML feio. Existem milhares de possibilidades através do CSS3 e não é necessário ser/ter um maravilhoso Artista Gráfico para conseguir compor algo decente. O projeto Bootstrap é um daqueles que aparecem para salvar a alma de muitos projetos medíocres. Contém arquivos em formato CSS3 para criar um layout bem definido.
Para o nosso segundo trabalho com o AngularJS, baixe o Bootstrap e crie o nosso projeto conforme o seguinte conjunto de pastas:
\exemplo
\css
bootstrap.min.css
\script
angular.min.js
Na pasta exemplo, crie um arquivo chamado "notas.html", com a seguinte codificação:
<!doctype html>
<html ng-app>
<head>
<title>Anotações do Dia</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="script/angular.min.js"></script>
<script src="script/notas.js"></script>
<style type="text/css">
.feito-true {
text-decoration: line-through;
color: red;
}
</style>
</head>
<body>
<div class="container" ng-controller="NotasController">
<div class="row">
<div class="page-header">
<h1>Lista de Coisas a Fazer</h1>
</div>
</div>
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th>Título</th>
<th>Horário</th>
<th>Realizado?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="nota in notas" class="feito-{{ nota.feito }}">
<td><strong>{{ nota.titulo }}</strong></td>
<td>{{ nota.horario }}</td>
<td><input type="checkbox" ng-model="nota.feito"></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<form class="form-inline" name="frmNota">
<input type="text" ng-model="nota.titulo" placeholder="Título">
<input type="text" ng-model="nota.horario" placeholder="Horário">
<button class="btn btn-primary" ng-click="adicionarNota()">Adicionar Nota</button>
</form>
</div>
</div>
</body>
</html>
E na pasta script crie um arquivo chamado "notas.js" com a seguinte codificação:
function NotasController($scope) {
$scope.notas = [
{titulo: 'Bater o Ponto', horario: '08:00 AM', feito: false},
{titulo: 'Tomar Café', horario: '09:20 AM', feito: false}
];
$scope.adicionarNota = function () {
$scope.notas.push({titulo: $scope.nota.titulo,
horario: $scope.nota.horario,
feito: false});
$scope.nota.titulo = $scope.nota.horario = '';
};
}
O AngularJS cria uma lista com base em um array de elementos, sejam estes quais forem, no caso teremos 3 campos: titulo, horario e feito (realizado). Na página HTML montamos uma tabela usando a tag ng-repeat que percorre cada elemento da lista. Criamos um formulário que ao ser executado chama a função adicionarNota que insere um novo elemento a partir dos dados do formulário com o comando push e limpa os dados da tela.
Um exercício para ajudar a desenvolver seu potencial. O campo "horário" ficou um tanto estranho na tela já que o ideal seria mais interativo. Recomendo que conheça o projeto AngularStrap, uma mistura entre o AngularJS e o Bootstrap com algumas séries de novas tags criadas para facilitar alguns trabalhos. Na página, encontramos uma série de exemplos e entre eles um elemento chamado Timepicker.
Obrigado e até a próximaFernando Anselmo
0 comentários:
Postar um comentário