É hora de criar um aplicativo AngularJS real.
Faça uma lista de compras
Vamos usar algumas das características AngularJS para fazer uma lista de compras, onde você pode adicionar ou remover itens:
Minha lista de compras
- {{x}} ×
{{Errortext}}
aplicação Explicado
Passo 1. Introdução:
Comece por fazer uma aplicação chamada myShoppingList , e adicionar um controlador chamado myCtrl a ele.
O controlador adiciona uma matriz chamada products à actual $scope .
No HTML, usamos o ng-repeat directiva para exibir uma lista com os itens da matriz.
Exemplo
Até agora, temos fez uma lista de HTML com base nos itens de uma matriz:
<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>
Tente você mesmo " Passo 2. Itens acrescentando:
No HTML, adicione um campo de texto, e ligá-la para o aplicativo com o ng-model directiva.
No controlador, fazer uma função chamada addItem , e usar o valor do addMe campo de entrada para adicionar um item para o products matriz.
Adicionar um botão, e dar-lhe uma ng-click directiva que irá executar o addItem função quando o botão é clicado.
Exemplo
Agora podemos adicionar itens a 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>
Tente você mesmo " Passo 3. Itens Remoção:
Nós também queremos ser capaz de remover itens da lista de compras.
No controlador, fazer uma função chamada removeItem , que leva o índice do item que deseja remover, como uma paramter
No HTML, fazer um <span> elemento para cada item, e dar-lhes uma ng-click directiva que chama a removeItem função com o atual $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>
Tente você mesmo " Passo 4. Manipulação de erro:
A aplicação tem alguns erros, como se você tentar adicionar o mesmo item duas vezes, o aplicativo falha. Além disso, não devem ser autorizados a acrescentar itens vazios.
Vamos corrigir isso, verificando o valor antes de adicionar novos itens.
No HTML, vamos adicionar um recipiente para mensagens de erro, e escrever uma mensagem de erro quando alguém tenta adicionar um item existente.
Exemplo
A 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>
Tente você mesmo " Passo 5. Projeto:
O aplicativo funciona, mas poderia usar um design melhor. Nós usamos a folha de estilo W3.CSS ao estilo de nosso aplicativo.
Adicione a folha de estilo W3.CSS, e incluem as classes próprias em todo o aplicativo, e o resultado será o mesmo que a lista de compras no topo desta página.
Exemplo
Estilo de seu aplicativo usando a folha de estilo W3.CSS:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Tente você mesmo "