Es el momento de crear una aplicación real AngularJS.
Hacer una lista de compras
Vamos a utilizar algunas de las características AngularJS para hacer una lista de compras, era usted puede añadir o eliminar elementos:
Mi lista de la compra
- {{x}} x
{{}} TextoError
Explicación de la aplicación
Paso 1. Primeros pasos:
Comience por hacer una aplicación llamada myShoppingList , y añadir un controlador llamado myCtrl a ella.
El controlador agrega una matriz llamada products a la corriente $scope .
En el código HTML, se utiliza el ng-repeat Directiva para mostrar una lista con los elementos de la matriz.
Ejemplo
Hasta ahora hemos hecho una lista HTML basado en los elementos de un 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>
Inténtalo tú mismo " Paso 2. Adición de los elementos:
En el código HTML, agregue un campo de texto, y asociarla a la aplicación con el ng-model Directiva.
En el controlador, hacer una función llamada addItem , y utilizar el valor de la addMe campo de entrada para agregar un elemento a la products matriz.
Añadir un botón, y darle una ng-click Directiva que ejecutará el addItem función cuando se hace clic en el botón.
Ejemplo
Ahora podemos añadir elementos a nuestra lista de la compra:
<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>
Inténtalo tú mismo " Paso 3. Los artículos Extracción:
También queremos ser capaces de eliminar elementos de la lista de compras.
En el controlador, hacer una función llamada removeItem , que toma el índice del elemento que desea eliminar, como un parametro
En el código HTML, hacer un <span> elemento para cada elemento, y darles una ng-click Directiva a la que llama a la removeItem función con el actual $index .
Ejemplo
Ahora podemos eliminar elementos de nuestra lista de la compra:
<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>
Inténtalo tú mismo " Paso 4. Tratamiento de errores:
La aplicación tiene algunos errores, como si intenta agregar el mismo tema dos veces, la aplicación se bloquea. Además, no se debe permitir que añadir elementos vacíos.
Vamos a arreglar eso comprobando el valor antes de añadir nuevos elementos.
En el código HTML, añadiremos un recipiente para mensajes de error, y escribir un mensaje de error cuando alguien trata de añadir un elemento existente.
Ejemplo
Una lista de la compra, 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>
Inténtalo tú mismo " Paso 5. Diseño:
La aplicación funciona, pero podría usar un mejor diseño. Utilizamos la hoja de estilo W3.CSS el estilo de nuestra aplicación.
Añadir la hoja de estilo W3.CSS, e incluyen las clases apropiadas en toda la aplicación, y el resultado será el mismo que la lista de compras en la parte superior de esta página.
Ejemplo
El estilo de su aplicación mediante la hoja de estilo W3.CSS:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Inténtalo tú mismo "