Aplicación AngularJS
Es hora de crear una aplicación AngularJS real.
Hacer una lista de las compras
Usemos algunas de las características de AngularJS para hacer una lista de compras, donde puede agregar o eliminar elementos:
Mi lista de compras
- Leche×
- Pan de molde×
- Queso×
Explicación de la aplicación
Paso 1. Primeros pasos:
Comience creando una aplicación llamada myShoppingListy agréguele un controlador llamado myCtrl.
El controlador agrega una matriz con nombre productsal actual
$scope.
En el HTML, usamos la ng-repeatdirectiva para mostrar una lista usando los elementos de la matriz.
Ejemplo
Hasta ahora hemos hecho una lista HTML basada en los elementos de una 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>
Paso 2. Agregar elementos:
En el HTML, agregue un campo de texto y vincúlelo a la aplicación con la ng-model
directiva.
En el controlador, haga una función llamada addItemy use el valor del addMecampo de entrada para agregar un elemento a la productsmatriz.
Agregue un botón y asígnele una ng-clickdirectiva que ejecutará la addItemfunción cuando se haga clic en el botón.
Ejemplo
Ahora podemos agregar artículos a nuestra 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>
Paso 3. Eliminación de elementos:
También queremos poder eliminar artículos de la lista de compras.
En el controlador, cree una función llamada removeItem, que tome el índice del elemento que desea eliminar como parámetro.
En el HTML, crea un <span>elemento para cada elemento y dales una ng-clickdirectiva que llame a la removeItem
función con el archivo $index.
Ejemplo
Ahora podemos eliminar artículos de nuestra 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>
Paso 4. Manejo de errores:
La aplicación tiene algunos errores, como si intenta agregar el mismo elemento dos veces, la aplicación falla. Además, no se debe permitir agregar elementos vacíos.
Lo solucionaremos comprobando el valor antes de añadir nuevos elementos.
En el HTML, agregaremos un contenedor para mensajes de error y escribiremos un mensaje de error cuando alguien intente agregar un elemento existente.
Ejemplo
Una lista de compras, con la posibilidad de escribir mensajes de error:
<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>
Paso 5. Diseño:
La aplicación funciona, pero le vendría bien un mejor diseño. Usamos la hoja de estilo W3.CSS para diseñar nuestra aplicación.
Agregue la hoja de estilo W3.CSS e incluya las clases adecuadas en toda la aplicación, y el resultado será el mismo que el de la lista de compras en la parte superior de esta página.
Ejemplo
Dale estilo a tu aplicación usando la hoja de estilo W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">