Aplicaciones de AngularJS

Es hora de crear una aplicación real de AngularJS.

Crear lista de compras

Vamos a usar algunas características de AngularJS para crear una lista de compras donde puedes agregar o eliminar productos:

Descripción de la aplicación

Paso 1: Comenzar

Primero crear un nombre myShoppingList la aplicación y agregar una llamada myCtrl controlador.

El controlador nombrado products para agregar el array actual a $scope en.

En HTML, usamos ng-repeat la instrucción para mostrar la lista de elementos del array.

Ejemplo

Hasta ahora, hemos creado una lista HTML basada en los elementos del array:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

Prueba por tu cuenta

Paso 2: Añadir productos

En HTML, agregar un campo de texto y usar ng-model la instrucción para绑定了应用程序。

En el controlador, creamos una función llamada addItem la función y usar addMe El valor del campo de entrada agregará el producto a products en el array.

Añadir un botón y especificar una ng-click Instrucción, esta instrucción se ejecutará al hacer clic en el botón. addItem Función.

Ejemplo

Ahora podemos agregar productos a la lista de compras:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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()">Agregar</button>
</div>

Prueba por tu cuenta

Paso 3: Eliminar productos

También queremos poder eliminar productos de la lista de compras.

En el controlador, creamos una función llamada removeItem La función que recibirá como parámetro el índice del artículo que desea eliminar.

En HTML, creamos un <span> para cada artículo <span> y le proporciona un ng-click Directiva, que utiliza el elemento actual $index Llamada removeItem Función.

Ejemplo

Ahora podemos eliminar productos de la lista de compras:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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()">Agregar</button>
</div>

Prueba por tu cuenta

Paso 4: Manejo de errores

La aplicación tiene algunos errores, por ejemplo, si intenta agregar el mismo producto dos veces, la aplicación se colapsa. Además, no debería permitirse agregar productos vacíos.

Resolvemos este problema verificando el valor antes de agregar un nuevo producto.

En HTML, agregaremos un contenedor para el mensaje de error y escribiremos el mensaje de error cuando alguien intente agregar un producto existente.

Ejemplo

Lista de compras, puede escribir mensajes de error:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "该商品已经在您的购物清单中。";
    }
  }
  $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()">Agregar</button>
  <p>{{errortext}}</p>
</div>

Prueba por tu cuenta

Paso 5: Diseño

La aplicación puede ejecutarse, pero se puede utilizar un diseño mejor. Usamos las tablas de estilo W3.CSS para diseñar nuestra aplicación.

Añada las tablas de estilo W3.CSS e incluya las clases apropiadas en toda la aplicación, el resultado será el mismo que la lista de la cesta en la parte superior de esta página.

Ejemplo

Use las tablas de estilo W3.CSS para diseñar su aplicación:

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

Prueba por tu cuenta