Aplicação AngularJS

É hora de criar um verdadeiro aplicativo AngularJS.

Criar lista de compras

Vamos usar algumas funcionalidades do AngularJS para criar uma lista de compras onde você pode adicionar ou remover produtos:

Descrição do aplicativo

Passo 1: Iniciar

Primeiro, crie um chamado myShoppingList aplicativo, e adicione um chamado myCtrl controlador.

controlador chamado products adicionar o array atual ao $scope no qual.

No HTML, usamos ng-repeat instrução para exibir a lista de itens do array.

Exemplo

Até agora, já criamos uma lista HTML com base nos itens do array:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["leite", "pão", "queijo"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

Experimente por Si Mesmo

Passo 2: Adicionar produtos

No HTML, adicione um campo de texto e use ng-model instrução para associá-la ao aplicativo.

No controlador, crie um chamado addItem função e use addMe O valor do campo de entrada adicionará o produto ao products no array.

Adicione um botão e atribua um ng-click Instrução, essa instrução será executada ao clicar no botão. addItem função.

Exemplo

Agora podemos adicionar itens à lista de compras:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["leite", "pão", "queijo"];
  $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()">Adicionar</button>
</div>

Experimente por Si Mesmo

Passo 3: Exclusão de itens

Também gostaríamos de poder excluir itens da lista de compras.

No controlador, crie um chamado removeItem função, que passará como parâmetro o índice do item que você deseja excluir.

No HTML, criaremos um para cada item <span> e fornece um ng-click instrução, que usa o elemento atual index atual chamada removeItem função.

Exemplo

Agora podemos excluir itens da lista de compras:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["leite", "pão", "queijo"];
  $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()">Adicionar</button>
</div>

Experimente por Si Mesmo

Passo 4: Tratamento de erros

O aplicativo tem alguns erros, por exemplo, se você tentar adicionar o mesmo produto duas vezes, o aplicativo pode travar. Além disso, também não deve ser permitido adicionar produtos vazios.

Vamos resolver isso adicionando uma verificação de valor antes de adicionar um novo produto.

No HTML, adicionaremos um contêiner para a mensagem de erro e escreveremos a mensagem de erro quando alguém tentar adicionar um produto existente.

Exemplo

Lista de compras, pode inserir uma mensagem de erro:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["leite", "pão", "queijo"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "O produto já está na sua lista de compras.";
    }
  }
  $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()">Adicionar</button>
  <p>{{errortext}}</p>
</div>

Experimente por Si Mesmo

Passo 5: Design

A aplicação pode ser executada, mas pode usar um design melhor. Usamos a tabela de estilos W3.CSS para projetar nossa aplicação.

Adicione a tabela de estilos W3.CSS e inclua as classes apropriadas em toda a aplicação, o resultado será o mesmo que a lista de compras no topo desta página.

Exemplo

Use a tabela de estilos W3.CSS para projetar sua aplicação:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

Experimente por Si Mesmo