Aplicação AngularJS
É hora de criar um aplicativo AngularJS real.
Faça uma lista de compras
Vamos usar alguns dos recursos do AngularJS para fazer uma lista de compras, onde você pode adicionar ou remover itens:
Minha lista de compras
- Leite×
- Pão×
- Queijo×
Aplicação explicada
Etapa 1. Introdução:
Comece criando um aplicativo chamado myShoppingListe adicione um controlador chamado myCtrla ele.
O controlador adiciona um array nomeado productsao arquivo
$scope.
No HTML, usamos a ng-repeatdiretiva para exibir uma lista usando os itens do array.
Exemplo
Até agora fizemos uma lista HTML com base nos itens de um array:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
Etapa 2. Adicionando itens:
No HTML, adicione um campo de texto e vincule-o ao aplicativo com a ng-model
diretiva.
No controlador, crie uma função chamada addIteme use o valor do addMecampo de entrada para adicionar um item ao productsarray.
Adicione um botão e dê a ele uma ng-clickdiretiva que executará a addItemfunção quando o botão for clicado.
Exemplo
Agora podemos adicionar itens à nossa lista de compras:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
Etapa 3. Removendo itens:
Também queremos poder remover itens da lista de compras.
No controller, faça uma função chamada removeItem, que pega o índice do item que você deseja remover, como parâmetro.
No HTML, crie um <span>elemento para cada item e dê a eles uma ng-clickdiretiva que chama a removeItem
função com o $index.
Exemplo
Agora podemos remover itens da nossa lista de compras:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
Etapa 4. Tratamento de erros:
O aplicativo apresenta alguns erros, como se você tentar adicionar o mesmo item duas vezes, o aplicativo trava. Além disso, não deve ser permitido adicionar itens vazios.
Vamos corrigir isso verificando o valor antes de adicionar novos itens.
No HTML, adicionaremos um contêiner para mensagens de erro e escreveremos uma mensagem de erro quando alguém tentar adicionar um item existente.
Exemplo
Uma lista de compras, com a possibilidade de escrever mensagens de erro:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe)
== -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already
in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>
Etapa 5. Projeto:
O aplicativo funciona, mas poderia ter um design melhor. Usamos a folha de estilo W3.CSS para estilizar nosso aplicativo.
Adicione a folha de estilo W3.CSS e inclua as classes apropriadas em todo o aplicativo, e o resultado será o mesmo da lista de compras no topo desta página.
Exemplo
Estilize seu aplicativo usando a folha de estilo W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">