Demo
La introducción a AngularJS será tema para otra oportunidad, Por ahora vamos a hacer una lista de tareas por hacer (to do list). Lo primero que haremos será incluir una referencia a angular en nuestro poryecto.
<html lang="en">
<body>
<!-- Recuerda usar la librería más reciente disponible (al menos mientras llegue una nueva versión de angular que cambie todo) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
</body>
</html>
<script>
// Declaramos la apliacaión con el nombre 'cosasPorHacer' con un array vacío '[]' y la asociamos a la variable 'aplicacion'
var aplicacion = angular.module('cosasPorHacer', '[]');
// Creamos un controlador, para este caso lo llamaremos cosasPorHacer_Ctrl y le inyectaremos '$scope' como dependencia. $scope sirve de puente entre lo que se defina en el controlador y la/s vista/s (HTML) *Explicación breve y poco técnica
aplicacion.controller('cosasPorHacer_Ctrl', function($scope){
})
</script>
<html ng-app="cosasPorHacer" >
<body ng-controller="cosasPorHacer_Ctrl" >
De esta forma indicamos que lo que se encuentra dentro de la etiqueta html es una aplicación AngujarJS y que el controlador "cosasPorHacer_Ctrl" tiene el poder por sobre todo lo que se encuentre dentro del body (la ubicación del controlador puede ser diferente, incluso tal vez un div anidado, en este caso lo pongo en el body porque haré todo desde un solo controlador).
Nuestro archivo HTML debe verse así: ¡Ya tenemos el esqueleto base para empezar crear cualquier aplicación con AngularJS! Ahora creamos la variable que contendrá los elementos de la lista, un array. Para ello simplemente escribimos dentro de la función del controlador:
$scope.listaDeCosas = [];
Ahora una función para agregar elementos a $scope.listaDeCosas
$scope.agregarElemento = function(){
$scope.listaDeCosas.push($scope.cosaPorHacer);
$scope.cosaPorHacer = "";
}
¡Y este es todo el código JavaScript que necesitamos para este ejemplo!
Ahora necesitamos trabajar en la vista (HTML) para conectarla con nuestro JavaScript.
AngularJS incluye varias directivas que nos ayudan a hacer la comunicación entre HTML y JavaScript más fácil, usaremos tres de ellas. Aquí una explicación breve y poco técnica:
ng-submit="laFuncion()" : Ejecuta una función de nuestro controlador cuando un formulario se envía. Debe especificarse dentro de un formulario.
ng-model="nombreDeEsteModelo" : Hace visible un elemento HTML de tipo input, textarea o select y lo "puentea" (conecta) al controlador para permitir su posterior tratamiento desde allí.
ng-repeat="cadaElemento in grupoDeVariosElementos" : Crea una instancia de cada elemento dentro de un grupo de elementos en el HTML. Algo así como una iteración que muestra los datos correspondientes a cada elemento de un grupo (suena confuso pero cuando veas la app andando entenderás cómo funciona). ng-repeat no permite que (o mejor, se rompe cuando) existan elementos idénticos repetidos en la lista, para que esto no sea problema simplemente agregamos a la definición de él "track by $index" para que se tome el indice dentro del array como el identificador de cada elemento.
Cuando unimos todo esto tenemos nuestra aplicación funcional versión 1.0:
Esto es todo por ahora, el futuras publicaciones vamos a partir de esta base para extender las funcionalidades de nuestra aplicación.
Ejemplo funcionando:
- {{cosa}}
