Nesse artigo você irá aprender:
· Como fazer o download do AngularJS e configurar uma estrutura simples de projeto;
· Como importar e inicializar o AngularJS em uma página HTML;
· O que são e para que servem as diretivas ng-app, ng-model, ng-controller, ng-repeat, ng-submit e ng-click;
· Como criar um controller com o AngularJS;
· Como criar um carrinho de compras simples com o AngularJS.
1 – Efetuando o dowload do AngularJS e criando uma estrutura simples de projeto
Antes de mais nada precisaremos escolher um diretório onde nosso projeto será criado, no meu caso criei uma pasta chamada app no meu desktop.
Dentro do diretório app criaremos um arquivo chamado index.html ( utilize seu editor de texto favorito para isso ), e uma pasta chama lib, onde colocaremos os arquivos do AngularJS.
Uma vez criada a estrutura acima, acesse http://angularjs.org e clique no botão de Download. Na modal que será exibida clique emDownload para baixar o arquivo angular.min.js.
Copie o arquivo angular.min.js para o diretório app/lib do seu projeto.
A estrutura final do projeto deverá estar assim:
app
—- index.html
—- lib
——– angular.min.js
—- index.html
—- lib
——– angular.min.js
2 – Como importar e inicializar o AngularJS
Chegou a hora de começarmos a codificar e criarmos nosso primeiro código com o AngularJS, para isso abra o arquivo index.html no seu editor de texto favorito e insira o seguinte código HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS - Olá Mundo!</title>
<script src="lib/angular.min.js"></script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>Insira algo na caixa de entrada:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p>Olá {{name}}!</p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS - Olá Mundo!</title>
<script src="lib/angular.min.js"></script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>Insira algo na caixa de entrada:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p>Olá {{name}}!</p>
</div>
</body>
</html>
Executando o código a seguir no navegador de sua preferência você visualizará uma tela conforme a seguir:
Como você pode perceber a maioria do código acima deve ser familiar e consiste basicamente de HTML, exceto o uso de três recursos do AngularJS, que são as diretivas ng-app, ng-model e {{ … }}, que serão explicadas a seguir.
Antes de explicar o que são as diretivas citadas acima, vale salientar que a única configuração necessária para utilizar o AngularJS em nossa aplicação é a importação do arquivo angular.min.js na página, código encontrado na linha 6.
Bom, vamos então explicar o que significam as diretivas ng-app, ng-model e o operador {{ … }}.
A diretiva ng-app é responsável por inicializar uma aplicação AngularJS. Geralmente ela é colocada na tag HTML ou BODY, e ela será responsável por criar o escopo da aplicação, dai a necessidade dela ser adicionada em um elemento de maior escopo do que o restante do código adicionado.
A diretiva ng-model é responsável por fazer o bind de um elemento da view em um model, tornando o elemento disponível no escopo da aplicação, permitindo manipularmos o seu valor diretamente pelo AngularJS.
O operador {{ … }} é equivalente a diretiva ng-bind, e serve para exibir o conteúdo de algum item contido no escopo da aplicação, como por exemplo o valor atribuído a um item ng-model.
3 – Criando um carrinho de compras simples
Aproveitando os conceitos aprendidos anteriormente, vamos além do simples ‘Olá Mundo!’ e vamos aproveitar para aprender sobre mais alguns recursos interessantes do AngularJS.
Para isso iremos construir um carrinho de compras simples, que permitirá listar os itens do carrinho na tela, assim como adicionar e remover um produto do carrinho. Os dados serão armazenados um uma array de objetos JSON, que é um padrão excelente para trabalhar com dados no AngularJS.
Segue o código do carrinho de compras:
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Carrinho de Compras</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} Produtos</span>
[ <a href="" ng-click="todoList.archive()">remover item</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="Adicionar no Carrinho">
</form>
</div>
</body>
<script>
angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
{text:'learn AngularJS', done:true},
{text:'build an AngularJS app', done:false}];
todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = '';
};
todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});
</script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
</style>
</html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Carrinho de Compras</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} Produtos</span>
[ <a href="" ng-click="todoList.archive()">remover item</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="Adicionar no Carrinho">
</form>
</div>
</body>
<script>
angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
{text:'learn AngularJS', done:true},
{text:'build an AngularJS app', done:false}];
todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = '';
};
todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});
</script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
</style>
</html>
Testar código: http://jsfiddle.net/kazaleit/mxQvU/
No código acima podemos destacar alguns recursos novos, como ong-controller, ng-repeat, ng-click, ng-submit, assim como a criação de uma function será utilizada como o nosso controller.
Vamos explicar as novas diretivas apresentadas:
A diretiva ng-controller é responsável por associar um controller na view da aplicação, o que significa que o código do controller estará disponível no escopo abaixo onde a diretiva ng-controller foi definida.
A diretiva ng-repeat permite iterar e exibir os dados de uma array na nossa view, ela funciona como um foreach existente nas linguagens de programação. Para todo item iterado é disponibilizada a variável$index, que contém o índice do item na array.
A diretiva ng-click representa uma ação de clique utilizada em um objeto de ação, como um link ou um botão. Para que ele funcione é necessário passar uma função contida no escopo de um controller, como veremos mais abaixo.
A diretiva ng-submit é igual ao ng-click, porém é utilizada para o envio e processamento de formulários. Ele também evita que o formulário seja efetivamente enviado ao clicar no botão submit, o que faria a página ser recarregada.
Por fim, temos a função HelloController, que representa nossa classe controller e foi associada a diretiva ng-controller.
Repare que nossa função HelloController recebe um parâmetro, o$scope, que é o escopo do nosso controller, ou seja, tudo que está na hierarquia de onde definimos nossa diretiva ng-controller. Essa variável $scope é passada por injeção de dependência pelo próprio AngularJS.
Injeção de dependência é um design pattern utilizado para prover recursos de forma simples e intuitiva entre recursos, assim o AngularJS criar o escopo do controller e nos fornece através da variável $scope pronta para utilização.
Perceba que todos os atributos e funções estão associados com a variável $scope no controller, o que significa que elas podem ser acessadas na view, assim quando declaramos a diretiva ng-repeatcom a variável carrinho, o AngularJS saberá onde encontrar os valores a serem exibidos. O mesmo vale para as funções utilizadas em ng-click e ng-submit, responsáveis por processarem as ações da página.
Nenhum comentário:
Postar um comentário