ANGULAR
INTRODUCCIÓN
Introducción
Angular es un framework para cliente desarrollado por Google empleado para crear
aplicaciones web. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de
implementar el patrón de diseño Modelo Vista Controlador para hacer que el desarrollo y pruebas sean
más fáciles. La primer versión de angular salió al mercado en el año 2012 (versión 1.0). Misko Hevery
empleado de Google empezó el proyecto en el año 2009. Existen muchos libros y sitios sobre angular,
en este documento tomaremos para muestra el sitio www.w3schools.com , el cual cuenta con muchos
tutoriales sobre diversas tecnologías para desarrollo de software.
Angular es un framework basado en JavaScript y se agrega con el TAG <script>. Angular
hereda los atributos de HTML con Directivas, y enlaza los datos con HTML empleando Expresiones.
Existen dos formas de incluir la biblioteca de Angular en tus proyectos.
FORMA 1
<script
src= “https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js” >
</script>
FORMA 2
Descargar angular desde la página: https://angularjs.org/
Descargarlo en tu sitio web en alguna ruta, y después incluirlo así:
<script
src= “./angular.min.js” >
</script>
Se tomará el ejemplo de lista de compras para el mandado del sitio anteriormente mencionado.
La aplicación deberá ser algo similar a la siguiente vista:
Universidades de México
Cursos Libres
Figura 1: Vista de la aplicación
Angular ligado con HTML
AngularJS se enlaza con HTML con directivas-ng.
ng-app Está directiva define una aplicación en AngularJS.
ng-model Está directiva enlaza el valor de los controles de HTML (input, select, textarea) con los
datos de la aplicación.
ng-bind Está directiva enlaza los datos de la aplicación a la vista de HTML.
ng-repeat Está directiva repite un conjunto de datos de HTML cierto número de veces. El
conjunto de HTML es una colección y puede ser un arreglo o un objeto.
ng-click Está directiva le comunica a AngularJS que se debe hacer cuando a un elemento se le
hace un click.
ng-controller Está directiva agrega un controlador a la aplicación. En el controlador se pueden
escribir cundiones y variables las cuales son partes de un objeto disponible dentro del
elemento HTML actual. En AngularJS a este objeto se le llama scope.
Universidades de México
Cursos Libres
PASO 1:
Use un editor para escribir lo siguiente:
PASO 1
<!DOCTYPE html>
<html>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"
></script>
<script>
var app = angular.module("miListaDeCompras", []);
app.controller("miControlador", function($scope) {
$scope.productos = ["Leche", "Pan", "Queso"];
});
</script>
<body>
<div ng-app="miListaDeCompras" ng-controller="miControlador">
<ul>
<li ng-repeat="x in productos">{{x}}</li>
</ul>
</div>
<p>Se ha hecho una lista en HTML basado en los elementos de un arreglo.</p>
</body>
</html>
PASO 2:
Ahora en el código de HTML, agregue un campo de texto, y enlázalo a la aplicación con la
directiva ng-model.
En el controlador, crea una función que se llame agregarArticulo, y usa el valor del campo de
entrada agregarArticulo para agregar uno al arreglo de productos.
Agrega un botón, y agregale la directiva ng-click para que mande llamar a ejecutar la función
agregarArticulo cuando se haga click en el botón.
Universidades de México
Cursos Libres
Escriba el siguiente código como se muestra:
PASO 2
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<script>
var app = angular.module("miListaDeCompras", []);
app.controller("miControlador", function($scope) {
$scope.productos = ["Leche", "Pan", "Queso"];
$scope.agregarArticulo = function () {
$scope.productos.push($scope.agregame);
}
});
</script>
<div ng-app="miListaDeCompras" ng-controller="miControlador">
<ul>
<li ng-repeat="x in productos">{{x}}</li>
</ul>
<input ng-model="agregame">
<button ng-click="agregarArticulo()">Agrega</button>
</div>
<p>Escribe en el campo los artículos a agregar.</p>
</body>
</html>
PASO 3:
Eliminando artículos
Se quiere ser capaz de eliminar artículos desde la lista de compras.
En el controlador, se debe crear una función que se llame: quitarArticulo, la cual tome el indice del
artículo que se quiere eliminar, como un parámetro.
En el código HTML, agrege un elemento <span> para cada artículo, y agréguele la directiva ng-
click la cual llamará al método quitarArticulo con el $index actual.
Universidades de México
Cursos Libres
PASO 3
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<script>
var app = angular.module("miListaDeCompras", []);
app.controller("miControlador", function($scope) {
$scope.productos = ["Leche", "Pan", "Queso"];
$scope.agregarArticulo = function () {
$scope.productos.push($scope.agregame);
}
$scope.quitarArticulo = function (x) {
$scope.productos.splice(x, 1);
}
});
</script>
<div ng-app="miListaDeCompras" ng-controller="miControlador">
<ul>
<li ng-repeat="x in productos">
{{x}}
<span ng-click="quitarArticulo($index)">×</span>
</li>
</ul>
<input ng-model="agregame">
<button ng-click="agregarArticulo()">Agrega</button>
</div>
<p>Escribe en el campo los artículos a agregar.</p>
</body>
</html>
PASO 4:
Manejo de errores.
La aplicación tiene algunos errores, si intentas agregar el mismo artículo 2 veces, la aplicación
ya no funciona. También no se deben agregar artículos si la caja de texto esta vacía.
Se va a corregir eso verificando el valor antes de agregar artículos nuevos al arreglo.
En el código HTML, se agregará un contenedor para los mensajes de error, y se escribirá un
mensaje de error cuando alguien trate de agregar un objeto ya existente.
Universidades de México
Cursos Libres
PASO 4
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<script>
var app = angular.module("miListaDeCompras", []);
app.controller("miControlador", function($scope) {
$scope.productos = ["Leche", "Pan", "Queso"];
$scope.agregarArticulo = function () {
$scope.textoDeError="";
if ( !$scope.agregame ) { return; }
if ( $scope.productos.indexOf($scope.agregame) == -1 ){
$scope.productos.push($scope.agregame);
} else{
$scope.textoDeError = "El artículo ya esta en la lista."
}
}
$scope.quitarArticulo = function (x) {
$scope.textoDeError = "";
$scope.productos.splice(x, 1);
}
});
</script>
<div ng-app="miListaDeCompras" ng-controller="miControlador">
<ul>
<li ng-repeat="x in productos">
{{x}}
<span ng-click="quitarArticulo($index)">×</span>
</li>
</ul>
<input ng-model="agregame">
<button ng-click="agregarArticulo()">Agrega</button>
<p>{{textoDeError}}</p>
</div>
<p>Intenta Agregar dos veces un mismo artículo y verás un mensaje de error.</p>
</body>
</html>
Universidades de México
Cursos Libres
Cabe mencionar que si escribe el artículo con las mismas letras pero cambiando mayúsculas por
minúsculas lp verá como un artículo nuevo. Puede mejorar esto haciendo la verificación sin importar
las mayúsculas y minúsculas.
PASO 5:
Finalmente la aplicación funciona, pero falta el diseño. Puede usar Bootstrap o un css que le
guste. En nuestro caso tomaremos el diseño del mismo sitio W3.CSS para la aplicación.
Simplemente agregue la siguiente línea a su código HTML:
<link rel="stylesheet"href="https://www.w3schools.com/w3css/4/w3.css">
PASO 5
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<script>
var app = angular.module("miListaDeCompras", []);
app.controller("miControlador", function($scope) {
$scope.productos = ["Leche", "Pan", "Queso"];
$scope.agregarArticulo = function () {
$scope.textoDeError="";
if ( !$scope.agregame ) { return; }
if ( $scope.productos.indexOf($scope.agregame) == -1 ){
$scope.productos.push($scope.agregame);
} else{
$scope.textoDeError = "El artículo ya esta en la lista."
}
}
$scope.quitarArticulo = function (x) {
$scope.textoDeError = "";
$scope.productos.splice(x, 1);
}
});
</script>
<div ng-app="miListaDeCompras" ng-controller="miControlador" class="w3-card-2 w3-margin"
style="max-width:400px">
<header class="w3-container w3-light-grey w3-padding-16">
<H3>Mi Lista de Compras</H3>
Universidades de México
Cursos Libres
</header>
<ul class="w3-ul" >
<li ng-repeat="x in productos" class="w3-padding-16">
{{x}}
<span ng-click="quitarArticulo($index)" style="cursor:pointer;" class="w3-right w3-margin-
right">×</span>
</li>
</ul>
<div class="w3-container w3-light-grey w3-padding-16">
<div class="w3-row w3-margin-top">
<div class="w3-col s18">
<input placeholder="Escribe aquí los artículos..." ng-model="agregame" class="w3-input w3-
border w3-padding>
</div>
<div class="w3-col s2" >
<button ng-click="agregarArticulo()" class="w3-btn w3-padding w3-green">Agrega</button>
</div>
</div>
<p class="w3-text-red">{{textoDeError}}</p>
</div>
</div>
</body>
</html>
Figura 2: Vista final de la App.
-- Fin de la práctica --
Universidades de México
Cursos Libres
