Manual de AngularJS

Este es un manual que nos introduce en el framework Javascript AngularJS, un conjunto de librerías de código abierto que nos sirven para hacer aplicaciones web avanzadas del lado del cliente. Es ideal para hacer aplicaciones de negocio y aplicaciones de gestión que se despliegan en una única página.

Usa el patrón de diseño habitualmente encontrado en el desarrollo web MVC, aunque en una variante llamada a veces MV* y a veces MVVM. Esto, junto con otras herramientas disponibles en Angular nos permite un desarrollo ordenado, sencillo de realizar y sobre todo más fácil de mantener en un futuro.

AngularJS está apoyado por Google y cada día más desarrolladores están adoptándolo, lo que nos da una idea del prometedor futuro de la librería.

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de AngularJS' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

Introducción a AngularJS

Esta es una introducción de manera conceptual al framework Javascript AngularJS. Explicamos por qué cada vez tiene más importancia el desarrollo de aplicaciones web con alta carga de Javascript y por qué son esenciales este tipo de librerías para una programación más sencilla, rápida y de fácil mantenimiento. Completaremos la introducción con una práctica en la que podremos experimentar con un primer ejemplo en Angular.

1.- Por qué AngularJS

Cómo los frameworks Javascript en general y AngularJS en concreto nos sirven para solucionar las necesidades actuales de la informática, en cuanto a desarrollo multiplataforma de aplicaciones grandes o enormes que se asemejan a las de escritorio.

2.- Qué es AngularJS

Descripción general sobre AngularJS, el framework Javascript, así como los principales componentes que tiene y los conceptos que debemos conocer antes de poner manos en el código.

3.- AngularJS Vs jQuery

¿Complementarias? ¿Competidoras? Analizamos similitudes y diferencias de jQuery y AngularJS, casos en los que sería más aconsejable una u otra librería y una comparativa de código, de un mismo problema, resuelto con ambas herramientas.

4.- Primeros pasos con AngularJS

Qué necesitas para trabajar con AngularJS, como descargar el framework y cómo realizar un primer programa, el típico Hola Mundo.

5.- Binding en AngularJS, y doble binding

El enlace de datos es una de las cosas que facilita la programación con AngularJS, en inglés Data binding, siendo que en Angular tenemos un doble binding.
Desarrollo declarativo con AngularJS

Comenzamos a introducirnos en el mundo de Angular con una serie de artículos básicos dedicados a lo que se conoce como el HTML declarativo, una de las características de esta librería, que nos permite realizar aplicaciones sencillas sin necesidad de Javascript. El proceso consiste en crear una serie de declaraciones en el propio lenguaje de marcación en las que se indica qué cometido tienen los elementos de la página dentro de nuestra aplicación web.

6.- Directivas y expresiones en AngularJS

Una primera aproximación a los componentes que forman parte de las aplicaciones básicas que podremos desarrollar con AngularJS, las directivas y las expresiones.

7.- Directivas ngInit, ngRepeat y ngClick

Ejemplo AngularJS en el que vamos a poder explorar el desarrollo únicamente con código HTML y aprender las directivas ngInit, ngRepeat y ngClick.

8.- Videotutoriales AngularJS, solo con directivas en HTML

Ejemplos prácticos de AngularJS en los que solo estamos realizando código HTML, con directivas embutidas en el código HTML.
Separando el código Javascript

Después de aprender el desarrollo declarativo, conocemos las prácticas habituales en AngularJS, que nos indican que cada código debe ir en su lugar adecuado. Conocemos primeramente los módulos y controladores que nos permitirán organizar nuestro código separando el Javascript del HTML.

9.- Módulo, objeto module en AngularJS

Qué son los módulos en AngularJS como crear un objeto module en el framework y qué tipo de cosas se podrán hacer con ellos.

10.- Controladores, controller en AngularJS

Comenzamos a entender los controladores. Conocemos lo que es un controller en AngularJS, para qué se usa y qué tipo de código deben tener, introducimos también el concepto de scope en Angular.

11.- Variantes para crear controladores en AngularJS

Este artículo contiene varias aproximaciones a controladores creados en AngularJS con diferentes estilos de codificación que nos aportan diferentes posibilidades.

12.- Segundo ejercicio con controller en AngularJS

Crearemos una aplicación sencilla con la intención de practicar con controller en AngularJS, inicializando datos en el Scope, creando manejadores de eventos, etc.
Explorando directivas a fondo

Para trabajar con AngularJS necesitamos dominar una serie de directivas que se encuentran presentes en el núcleo del framework, además de apoyarnos en otras directivas creadas por la comunidad. Las directivas enriquecen nuestro HTML y nos permiten realizar operaciones útiles sobre la página. Ahora exploraremos algunas directivas fundamentales con mayor detalle.

13.- Directiva ngClass en AngularJS

Explicaciones de las alternativas posibles de uso de la directiva ngClass de AngularJS con ejemplos prácticos.

14.- Trabajando con campos checkbox en AngularJS

Explicaciones y prácticas con campos input checkbox con AngularJS, conociendo las directivas ngChecked, ngTrueValue, ngFalseValue, ngChecked.

15.- Filtrar, ordenar y otras variables embutidas en la directiva ngRepeat

Usos más detallados de la directiva ngRepeat para filtrar, ordenar los elementos y acceder a variables embutidas que nos dan información sobre las repeticiones.
Ajax en Angular

Introducción a los mecanismos para realizar conexiones con el servidor asíncronas por HTTP con AngularJS. Lo que comúnmente conocemos por Ajax, con ejemplos que nos facilitarán entender una de las facetas más potentes de este frameweork Javascript y el desarrollo frontend basado en las cada vez más populares API REST.

16.- Ajax con AngularJS para acceso a API

Nos introducimos en el uso de Ajax mediante AngularJS. Lo vamos a hacer de una manera muy habitual en el desarrollo con este framework que es accediendo a un servicio web que nos ofrece un API REST.

17.- JSONP en AngularJS

Ejercicio Ajax en el que realizamos un acceso a API REST que devuelve información mediante JSONP, realizado con el service $http de AngularJS.

18.- Operación post HTTP con $http en AngularJS

Cómo realizar una operación POST con Ajax, para enviar datos al servidor por medio del HTTP con la librería AngularJS y el service $http.

19.- Promise estándar then() de $http en AngularJS 1.4

Explicaciones sobre el nuevo estándar promise para llamadas Ajax en Angular 1.4, usando el método then().

20.- Crear un API REST, 5 minutos con json-server

Crear en 5 minutos un API REST, con fines didácticos, ideal para aprender desarrollo frontend con un framework Javascript del lado del cliente, usando json-server.
Vistas y sistema de Routing en Angular

En resumen, las vistas nos permiten separar partes de nuestra interfaz en partes distintas y con el sistema de routing AngularJS es capaz de saber qué vistas debe mostrarte atendiendo a la URL que la aplicación esté mostrando. Veremos en detalle cómo trabajar con múltiples vistas y rutas profundas en una aplicación desarrollada con este framework Javascript.

21.- Módulo ngRoute para crear rutas e intercambiar vistas en AngularJS

Explicaciones sobre ngRoute, el módulo de AngularJS que nos permite crear rutas profundas en nuestra aplicación e intercambiar vistas dependiendo de la ruta.

22.- Introducción a $location y primeros controladores en paralelo

Ejercicio donde tenemos en marcha dos controladores ejecutándose en paralelo en dos partes de la página, así como varias vistas. Conocemos también $location de AngularJS.
Otros artefactos en AngularJS

Vamos repasando otros recursos para la programación de aplicaciones en AngularJS, de diversa índole, como factorías, servicios y analizando en profundidad asuntos importantes como el scope.

23.- Factorías (factory) en AngularJS

Qué son las factorías de AngularJS, factory en la terminología Angular. Para qué sirven, qué rasgos las caracterizan y cómo crearlas.

24.- Scope en Angular, manejando ámbitos con $parent

Explicaciones más detalladas del omnipresente scope de AngularJS, nuestro ámbito. Introducimos el $parent para acceder al scope padre.

25.- Ámbito o scope en controladores anidados y paralelos

Realizamos diversas variantes de construcción de aplicaciones en Angular con distintos controladores y repasamos las condiciones del scope en cada una.

26.- Angular Material

Este módulo para AngularJS nos permite implementar de una manera muy cómoda un diseño de aplicación con las directrices de Material Design de Google.
Components en Angular 1.5

Tratamos el desarrollo basado en componentes de AngularJS, arquitecturas de aplicaciones con componentes personalizados. Cómo crear componentes, definir la lógica con los componentes, la interoperabildad para comunicación entre components, etc.

27.- Componentes en AngularJS 1.5

Desarrollo de components en Angular 1.5, en esta guía a la componetización aprenderás a realizar realizar tus propios componentes.

28.- Controladores en components de Angular

Los componentes en AngularJS mantienen la lógica en controladores independientes, que debemos definir durante la declaración component.

29.- Bindings entre componentes AngularJS 1.5

Cómo compartir datos entre unos componentes y otros, a fin de facilitar la interoperabilidad, por medio de mecanismos de binding, en AngularJS 1.5.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

YamidVallejo

18/12/2014
Agradecimiento
Solo para agradecerles por el manual de AngularJS y por tenernos al tanto de estas interesantes herramientas que enriquecen nuestro bagaje en cuanto al desarrollo web.

Hasta Luego.

walter_guaymas

22/1/2015
Gracias por compartir
Buenisimo el manual, muy completo y muy didactico. Muchas gracias

proimond

04/2/2015
Está finalizado?
Buenas muchachos

Hace un buen tiempo me baje el manual y resulta que ya van como 10 capítulos mas. Queria saber si ya esta es la última versión o van a sacar alguna mas

Davinia

19/2/2015
Buen manual
Buen manual, muy bien explicado todo y muy didáctivo.

davidcm86

01/3/2015
Posible fallo
Buenas, he observado que no se puede buscar por cada cerveza, pero la opción si que está. Ya digo que por lo menos a mí no me funciona, pero sí lo hace con estos cambios:
Al hacer la llamada al método vm.buscaCervezas, le pasamos vm.nombre, de tal manera: vm.buscaCervezas(vm.nombre);
Y el método del js quedaría tal que así:
function controladorPrincipal($scope, $http){
var vm = this;
vm.orden = false;
vm.campo = "name";
var url = "http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK";

vm.buscaCervezas = function(nombre){
url += "&query=" + nombre;
if(nombre){ // al rellenarlo gracias al binding ya tenemos los datos
console.log(nombre);
url += "&query=" + nombre;
}
$http.jsonp(url).success(function(respuesta){
console.log("res:", respuesta);
vm.cervezas = respuesta.beers;
});
}
}

juan_c

06/3/2015
Más Capítulos?
Hola, ¿cuándo seguiréis con más capítulos del manual?
Gracias

Pablo

11/3/2015
Especialización de AngularJS:
Los invito a que conozcan a Coderhouse.com. Somos una escuela de programación enfocados en cursos prácticos y presenciales. Para mayor información sobre nuestra especialización de AngularJS: http://www.coderhouse.com/curso-de-angularjs.

Saludos!
Co-fundador de Coderhouse

HoracioMoreno

13/3/2015
Gracias
Gracias realmente por hacer estos aportes a la comunidad los sigo desde siempre

Saludos!

d0hk0

29/3/2015
genial
muy bueno, aprendí rápidamente, ojala los ejemplos pudieran descargarse para no tener que estar copiando y pegando.

Pablo Castillo

21/8/2015
Ejemplos muy buenos.
Muchas gracias por disponer este tutorial. Los ejemplos son muy buenos.

Raúl M

26/8/2015
Excelente manual
Felicitaciones, un manual muy entendible a todos los niveles. El único problema es que la extensión de chrome para AngularJS aparentemente dejó de funcionar. De ahí en adelante es una muy buena guía para poder inciar con los desarrollos en AngularJS

Daniel_isaac

06/9/2015
Mas conocimientos!!
Gracias ya lo eh descargado ahora a practicar aprender :D

Omar

29/12/2015
Felicitaciones
Excelente manual para quienes estamos iniciando en Angularjs. He consultado diferente información en la web y éste manual en español me parece que explica de una manera ligera pero destacando los puntos mas importantes respecto a este framework.

Saludos y gracias por compartir el conocimiento.

Sebastian

26/2/2016
Muy buen material
Realmente es difícil encontrar circulando material gratuito en español de la calidad de éste. Es muy completo y a su vez se encuentra bastante actualizado. Te das cuenta sobre todo en la parte de controladores, en la mayoría de los casos sólo dan el ejemplo pasando el scope como parámetro con $scope y no el modo "controller as" que es el que se utiliza actualmente.
Me saco el sombrero, sigan así.
Muchas gracias.

Ermiro

17/5/2016
Manual de Angularjs
felicidades equipo.
Desde hace año ustedes demuestran la solidaridad del conocimiento
Exitos
El manual muy bueno!"!!!

juancontrerasarteaga

06/6/2016
Manual de Angular
Excelente manual

p3quod

02/8/2016
Manual AngularJS
Buen trabajo, magnífico manual.

Muchas gracias !

p3quod

03/8/2016
Ejemplo no funciona
Hola,

Estoy haciendo el tutorial, muy bueno, enhorabuena !

Para cuando tengas que actualizarlo, el ejemplo del punto 4.3. accede a una URL que ya no está accesible

Danihelp

11/10/2016
Excelente Manual
Exelente aporte, soy nuevo con Angular y este manual es lo que necesitaba.

sobrix

13/10/2016
Muy buen tutorial
Quiero felicitaros por el manual. AngularJS está muy bien explicado y los ejemplos me han ayudado mucho.

guli

06/11/2016
Agredecimiento
Muy claro el manual, me costaba mucho entender este frameworks , pero gracias a ustedes se me hizo sencillo

Rul

26/3/2017
Bravo
Muchas gracias, excelente manual.

zebaz

29/6/2017
Conexion a base de datos
Algun tutorial de angular para conectar base de datos?

Eagle heart

02/7/2017
Enhorabuena
Una joya de manual, ¡muchas gracias por compartirlo! Por fin entiendo muchos conceptos sobre el funcionamiento de AngularJS que no suelen explicar a fondo en otros cursos

dimitri

07/7/2017
codificacion para texto
var. text= angular.module("text",[]);

text.contoller("mensaje",function($scope){
$scope.saludo =""
})