Es común usar más de un controlador en una aplicación AngularJS. Hasta ahora no lo habíamos necesitado pero para separar nuestro código en controladores puede aportar diversos beneficios, en el caso que tenga algún sentido esa separación. En el ejemplo que os traemos queda bien claro que tiene sentido separar el código en dos controladores distintos, porque están pensados para hacer cosas muy específicas y distintas entre si. Observarás que separar la complejidad del programa en diversas partes, provoca que cada una sea más simple y fácil de entender. Todo ello redundará en un mantenimiento más sencillo, lo que al… Continuar leyendo


Hasta ahora en el Manual de AngularJS hemos visto muchas cosas interesantes, sin embargo nos hemos limitado a hacer aplicaciones en las que solo teníamos una ruta y una vista. Sin embargo, cuando se vayan complicando los requisitos de nuestras aplicaciones podremos necesitar ampliar estas posibilidades. Lo que vamos a aprender ahora es a crear rutas distintas dentro de nuestra aplicación, de modo que tengamos varias URL que muestran vistas distintas. Quizás te preguntes ¿Si AngularJS está especialmente indicado para hacer aplicaciones de una sola página (concepto que se conoce con el nombre de “Single Page Application”, SPA), por qué… Continuar leyendo


Hemos visto cómo realizar operaciones básicas de Ajax con AngularJS, en las que recibimos información del servidor, por medio de get. Ahora veamos también cómo se enviarían datos al servidor por medio de la operación post del HTTP. Como siempre las cosas con AngularJS se hacen muy sencillas. El servicio (“service” en la terminología de Angular) $http nos ofrece una serie de métodos “shortcut” enfocados en realizar las operaciones típicas implementadas dentro del protocolo HTTP. Para enviar datos post disponemos de $http.post(). En ese método podemos enviar como parámetro, aparte de la URL del servidor donde haremos el post, un… Continuar leyendo


JSONP es un mecanismo muy útil cuando estamos trabajando con Ajax en Javascript y queremos traernos datos que residen en otro servidor. Existe una problemática por la cual no puedes cargar datos con Javascript que te vengan desde servidores de otros dominios, pues puede darte un error de seguridad si es que el servidor al que te conectas no está configurado para aceptar solicitudes “cross domain”. Conexiones HTTP asíncronas en AngularJS Para realizar solicitudes al servidor asíncronas (lo que se conoce habitualmente por Ajax en el mundo del desarrollo web) con AngularJS necesitamos un servicio llamado $http. Este “service” nos… Continuar leyendo


Ajax es una solicitud HTTP realizada de manera asíncrona con Javascript, para obtener datos de un servidor y mostrarlos en el cliente sin tener que recargar la página entera. Service $http El servicio $http (service en inglés, tal como se conoce en AngularJS) es una funcionalidad que forma parte del núcleo de Angular. Sirve para realizar comunicaciones con servidores, por medio de HTTP, a través de Ajax y vía el objeto XMLHttpRequest nativo de Javascript o vía JSONP. Después de esa denominación formal, que encontramos en la documentación de AngularJS, te debes de quedar por ahora en que nos sirve… Continuar leyendo


La directiva ngRepeat de AngularJS es una de esas cosas que llaman la atención, por la sencillez y rapidez con la que se puede implementar un bucle que nos repite una plantilla HTML, pero sobre todo por su potencia. Sintaxis ngRepeat Nos tenemos que familiarizar primero con la sintaxis usada para especificar el comportamiento del bucle en ngRepeat. Aunque ya lo hemos visto en cantidad de ejemplos, comencemos por repasar la sintaxis básica. <p ng-repeat=”elem in elementos”> {{ elem }} </p> En la directiva indicamos el recorrido a una colección y la variable donde vamos a tener el elemento actual:… Continuar leyendo


En el estilo de aplicaciones que se hacen con AngularJS trabajas de manera intensiva con campos de formulario. Puedes leer este artículo para aprender todo sobre los checkbox y hacer algún ejemplo práctico. En Angular los campos input checkbox tienen una serie de directivas que podemos usar: ngModel: indica el nombre con el que se conocerá a este elemento en el modelo/scope. ngTrueValue: La utilizas si deseas asignar un valor personalizado al elemento cuando el campo checkbox está marcado. ngFalseValue: es lo mismo que ngTrueValue, pero en este caso con el valor asignado cuando el campo no está “checado”. ngChange:… Continuar leyendo


Seguimos aprendiendo aspectos básicos sobre AngularJS y nos vamos a detener en una directiva muy útil que nos ayuda a definir clases CSS (class) que se le deben aplicar a los elementos bajo ciertas circunstancias. La idea es poder definir el aspecto de nuestra aplicación en base a los datos que tengamos en el modelo, aplicando unas class de CSS u otras dependiendo de valores de propiedades del scope o de expresiones que podamos construir. Existen tres posibles variantes de tipos que acepta la directiva ngClass y que podemos usar siempre que deseemos. Asignarle una propiedad del scope que sea… Continuar leyendo


Los controladores nos permiten mediante programación implementar la lógica de la presentación en AngularJS. En ellos podemos mantener el código necesario para inicializar una aplicación, gestionar los eventos, etc. Podemos decir que gestionan el flujo de la parte del cliente, lo que sería programación para implementar la funcionalidad asociada a la presentación. En líneas generales podemos entender que los controladores nos sirven para separar ciertas partes del código de una aplicación y evitar que escribamos Javascript en la vista. Es decir para que el HTML utilizado para la presentación no se mezcle con el Javascript para darle vida. Un controlador… Continuar leyendo


Los módulos son una de las piezas fundamentales en el desarrollo con AngularJS y nos sirven para organizar el código en esta librería. Lo puedes entender como un contenedor donde situas el código de los controladores, directivas, etc. La incorporación de módulos en AngularJS es motivada por la realización de aplicaciones con mejores prácticas. Son como contenedores aislados, para evitar que tu código interactúe con otros scripts Javascript que haya en tu aplicación (entre otras cosas dejarán de producirse colisiones de variables, nombres de funciones repetidos en otras partes del código, etc.). Los módulos también permiten que el código sea… Continuar leyendo