Manual de Angular

Comenzamos la redacción a nuestro Manual de Angular, la evolución del framework Javascript más popular para el desarrollo de aplicaciones del lado del cliente.

En esta página irás viendo los artículos del Manual de Angular según los vayamos publicando a lo largo de los próximos meses.

Nuestro objetivo es recorrer las piezas principales de este potente framework y estudiar los mecanismos para el desarrollo de aplicaciones web universales con Angular 2. De momento encontrarás una estupenda introducción al desarrollo con el nuevo Angular, y abordaremos muchos más detalles en breve.

Este manual aborda el framework Angular, en sus versiones 2 en adelante. Cabe aclarar que, poco después de salir la versión de Angular 2, el framework cambió de nombre a Angular. A partir de aquí se han ido publicando diversas entregas con números basados en el versionado semántico, pero siempre bajo la misma base tecnológica. Por tanto, este manual es válido tanto si quieres conocer Angular 2 o Angular 4 o las que vengan, ya que el framework en sí sigue manteniendo sus mismas bases.

Ver los capítulos

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

Descargar como libro electrónico

Este texto 'Manual de Angular' 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 al desarrollo con Angular

En esta primera parte del manual vamos a dar los primeros pasos para desarrollar aplicaciones con Angular. Veremos cómo crear el esqueleto de la aplicación básica y conoceremos los principales componentes de todo proyecto.

1.- Introducción a Angular

Qué es Angular. Por qué se ha decidido escribir desde cero el popular framework Javascript y qué necesidades y carencias resuelve con respecto a su antecesor.

2.- Angular CLI

Qué es Angular CLI, el intérprete de línea de comandos de Angular 2 que te facilitará el inicio de proyectos y la creación del esqueleto, o scaffolding, de la mayoría de los componentes de una aplicación Angular.

3.- Análisis de las carpetas de un proyecto básico con Angular

Angular 2 exige un marco de trabajo más concreto y avanzado. Vemos los archivos y carpetas que nos hacen falta para comenzar un proyecto básico.

4.- Vista de pájaro al código de una aplicación Angular (4)

Una aproximación a los elementos principales que encontramos en una aplicación Angular, versión 4, entendiendo el código.

5.- Zambullida en el código del proyecto inicial de Angular 2

Comenzamos a analizar el código de un proyecto básico con Angular 2, en las primeras versiones, generado con Angular CLI. Prestamos al index de la aplicación y al componente principal, que podremos editar para comprobar el funcionamiento.

6.- Introducción a los componentes en Angular

Un primer acercamiento al mundo de los componentes en Angular (2 en adelante), a través del componente inicial que se crea en todo nuevo proyecto. Aprenderás a reconocer sus partes y realizaremos unas modificaciones.

7.- Sintaxis para las vistas en Angular

Expresiones, binding, propiedades, eventos. Son muchas cosas las que podemos expresar en las vistas HTML de las aplicaciones Angular 2. Te ofrecemos una introducción general.
Los componentes en Angular

Abordamos el desarrollo basado en componentes con todo detalle. Es la pieza más importante de Angular que nos permitirá no solo estructurar una aplicación de una manera ordenada, sino encapsular funcionalidad y facilitar una arquitectura avanzada y de fácil mantenimiento de los proyectos Javascript con la nueva versión de este framework.

8.- El concepto de los componentes en Angular y su arquitectura

Qué es un componente para Angular y cómo usaremos los componentes para realizar la arquitectura de una aplicación.

9.- Decorador de componentes en Angular 2

Qué es un decorador de componentes, qué función tiene y cómo se implementa en un componente básico de Angular 2.

10.- Crear un componente nuevo con Angular 2

En este artículo te vamos a enseñar a crear un nuevo componente con Angular CLI y luego a usarlo en tu aplicación Angular 2.

11.- Usar un componente en Angular 2

Cómo se usan componentes creados por nosotros en Angular 2, una tarea que si bien es sencilla requiere de varios pasos.
Lo básico de los módulos en Angular

Vamos ahora a abordar las bases de otro de los actores principales de las aplicaciones desarrolladas con Angular: los módulos. Un módulo (module en inglés) es una reunión de componentes y otros artefactos como directivas o pipes. Los módulos nos sirven principalmente para organizar el código de las aplicaciones Angular y por tanto debemos aprender a utilizarlos bien.

12.- Trabajar con módulos en Angular

Cómo crear módulos, agrupaciones de componentes, directivas o pipes, en el framework Javascript Angular. Cómo crear componentes dentro de un módulo y cómo usarlos en otros modules.
Directivas esenciales de Angular

Vamos a conocer algunas directivas esenciales ofrecidas por el propio framework, para el desarrollo de las vistas en Angular.

13.- Directiva ngClass en Angular 2

Estudio de la directiva ngClass de Angular 2, ejemplo práctico de un componente que usa esa directiva.

14.- Directiva ngFor de Angular 2

Explicamos la directiva ngFor, o *ngFor, que nos permite repetir una serie de veces un bloque de HTML en aplicaciones Angular 2.

15.- Directiva ngModel

Explicaciones sobre la directiva ngModel de Angular, con ejemplos de uso diversos, con binding de una y dos direcciones. Importar FormsModule para su funcionamiento en Angular 4.
Binding en Angular al detalle

En los siguientes artículos vamos a explorar detenidamente el sistema de data-binding creado con Angular, tratando con profundidad algunos temas ya usados dentro de este manual, así como abordando nuevos temas importantes relacionados con el bindeo de datos.

16.- Interpolación {{}} en Angular al detalle

Todo lo que tienes que saber sobre el binding por interpolación de strings en Angular, generada con la sintaxis de las dobles llaves {{}}.

17.- Binding a propiedades en Angular al detalle

Qué es el property binding, junto con una serie de detalles importantes sobre el bindeo a propiedades que como desarrollador Angular debes conocer.

18.- Binding a propiedad vs interpolación de strings, en Angular

Cuándo usar el binding de propiedad o la interpolación de strings, dos alternativas con objetivos distintos en Angular, que a veces pueden confundir.

19.- Binding a atributo en Angular

Qué es el binding a atributo, por qué debemos conocerlo. En qué casos aplica el binding de atributo y ejemplos de uso.

20.- Declaraciones de eventos en templates Angular al detalle

Qué son template statements y cómo declarar comportamientos ante eventos en Angular. Contexto del template accesible en las sentencias de eventos.

21.- Comunicación entre componentes con @Input

Interacción entre componentes de Angular, enviando datos a través de propiedades de entrada, definidas con el decorador @Input.

22.- Emisión de eventos personalizados con @Output en Angular

Explicamos la comunicación de cambios de los hijos hacia los padres por medio de eventos personalizados, generados con propiedades @Output.
Servicios en Angular

Comenzamos una serie de artículos que nos explicarán qué son los servicios, una de las piezas principales de las aplicaciones en Angular. Estudiaremos cómo usar servicios dentro de aplicaciones, cómo crearlos, cómo agregarlos a módulos o componentes, cómo instanciar servicios, etc. Veremos también qué papel juegan los servicios dentro del marco de una aplicación, con ejemplos de uso que puedan ilustrar las buenas prácticas a los programadores.

23.- Servicios en Angular

Qué son los servicios en el framework Javascript Angular, cómo crear nuestros primeros services, cómo usarlos desde los componentes.

24.- Usar clases e Interfaces en los servicios Angular

Al desarrollar servicios con Angular es una buena idea usar clases e Interfaces para definir las estructuras de datos. Veremos cómo y por qué.

25.- Práctica Angular con Módulos, Componentes y Servicios

Vamos a crear un ejemplo práctico con lo visto hasta el momento en el Manual de Angular en el que pondremos en uso los conocimientos adquiridos sobre módulos, componentes y servicios.
Observables en Angular

En los próximos artículos introduciremos el concepto de observable, una herramienta para la programación reactiva dentro de aplicaciones de Angular, capaz de aumentar sensiblemente el rendimiento de las aplicaciones.

26.- Introducción teórica a los observables en Angular

Aclaramos conceptos sobre los observables, por qué son importantes en Angular., qué es la programación reactiva y qué es RxJS.

27.- Práctica de observables en Angular

Primeros pasos trabajando con observables en una aplicación desarrollada con Angular.

28.- Eliminar la suscripción a un observable de Angular

Cómo eliminar una suscripción a un observable, desde el observador, necesario cuando el elemento se destruye para no dejar en memoria la suscripción.
Sistema de routing

El sistema de routing es algo fundamental en las aplicaciones desarrolladas con Angular. En los siguientes artículos aprenderás a implementar rutas en aplicaciones web del estilo SPA (Single Page Application) y gestionar las rutas, de modo que se puedan pasar parámetros entre ellas, que los navegadores sean capaces de mostrar la ruta activa, etc.

29.- Introducción al sistema de Routing en Angular

Qué es el sistema de routing, qué elementos contiene y cómo configurar las primeras rutas en una aplicación Angular.

30.- Rutas en Angular: mostrar la ruta activa

Cómo mostrar la ruta activa en el navegador de una aplicación Angular, aquella que se está mostrando en este momento.

31.- Parámetros en las rutas Angular

Cómo trabajar con parámetros en las rutas, configurar el sistema de routing para crear rutas que envían parámetros y recibir los parámetros en los componentes.
Apéndice

Otros temas de interés relativos al desarrollo con el framework Javascript Angular para el desarrollo de aplicaciones web. Una serie de artículos de temas diversos que no siguen un orden especial y que pueden resultar de interés para los desarrolladores Angular o TypeScript.

32.- Cómo se depura el TypeScript en una aplicación Angular

Cómo depurar usando el navegador, por medio de las herramientas de debug del inspector, del código TypeScript que escribimos para las aplicaciones de Angular.

Compartir

Comentarios

Serpico

06/7/2016
Excelente introducción a Angular 2
Gracias a Desarrollo Web por estar siempre actualizados con las nuevas herramientas.

Manolo

15/7/2016
Comenzando el manual de Angular 2
Fantástico chicos! estoy comenzando con Angular 2, me vendrá muy bien este manual.

Lucas Vazquez

03/8/2016
Imprimir
Me gustaría imprimir este manual de AngularJS 2.

Pablo Junior Almonte

30/8/2016
Descarga de manual
muy buen manual.. existe algun pdf del manual?? para descargarlo y llevar lo conmigo.

erama

07/9/2016
GRACIAS!
Solo eso!, gracias por generar y compartir conocimiento

Gerardo Andres Gutierrez Rodriguez

12/9/2016
Despliegue en ambientes productivos.
Hola quisiera saber como se le hace para desplegar una aplicación ya terminada usando angular cli en un ambiente productivo usando un servidor nginx

midesweb

23/9/2016
Descarga del manual en la APP
Hola!
Este manual ya se puede descargar. Está disponible en la App de DesarrolloWeb.
https://app.desarrolloweb.com/manuales/manual-angular2

David Rivero

26/9/2016
No he podido descargar
Intente descargar este manual por medio de la app y no me lo permite, me dice que no puede verificar mis descargas restantes, aun no he descargado nada, me urge este manual. Gracias Miguel y Alberto por este y otros recursos y saludos desde Venezuela.

Alex

29/9/2016
descargas
Buenos días en mi perfil en al zona de descargas me pone que tengo 192 descargas restantes pero entro para descargar el manual y me dice que vaya a la nueva plataforma peor ahi no puedo ingresar con las mismas credenciales como puedo hacer???

midesweb

09/10/2016
para descargar el manual de angular 2
El fallo al descargar, por no poder obtener descargas restantes, lo hemos resuelto en la App. Si no te funciona es mejor que nos escribas un email.

Para Alex, los sistemas de descarga son independientes. También mejor que me escribas y poder traspasarte algunas descargas de manuales. Yo soy miguel@desarrolloweb.com

Choni

08/1/2017
Sobra esta app
Bueno amigos, creo q el sitio esta muy bueno, pero no se por que la app no funciona, quiero descargarse el manual de angular 2 y la app no me funciona bien, ni desde móvil ni pc, quisiera si esta a sus alcance un libro completo( pdf), de lo q es angular 2 con todo desde cero, con el contenido de typescript, y todo lo necesario para desarrollar web con angular 2 vengó de programar desktop con qt y c++, de ka web no se nada, mi correo choninoa@gmail.com, soy cubano, muchas gracias espero su ayuda,

jose reyes

30/1/2017
Manual pdf
Buen día, muchas gracias por sus aportes.
e intentado descargar el manual pero no me lo permite.
alguna otra dirección donde pueda obternerlo?


Saludos.

ar_masuoka

02/2/2017
Descarga
Buen día soy nuevo en esta web, he querido descargar el manual en digital (Epub) según mi panel de control todavía tengo opción a descargar un archivo mas, siguiendo las instrucciones me sale el siguiente comentario:

Estado de la descarga

Este manual no está autorizado para descarga todavía. Para autorizarlo simplemente descarga alguno de los archivos que incluye.

No se ha que otro archivo(s) se refiera pero siento que si descargo algún otro archivo su sistema (desarrolloweb) no me va dejar descargar el manual de angular 2 por que ya no tendré las 2 descargas autorizadas.
Previamente descargue el manual de JavaScript y si bajo el otro archivo que me solicitan para la autorizacion del manual e Angular 2 serian las dos descargas antes mencionadas.

De antemano muchas gracias por la atencion

mili

13/2/2017
Angular 2 Dist
Hola, tengo una consulta, siempre veo tutoriales de como crear app con angular 2 pero no veo como generar los archivos finales que creo q van en la carpeta dist, porque al crear mi proyecto con cli no veo la carpeta dist

Jose

10/7/2017
AngularJs
Por si interesa, yo estoy haciendo una serie de tutoriales de angular Js 2 para aprender desde 0.
https://quecosasleo.com/2017/07/angularjs-2-desde-0-tutorial1/
Iré actualizando poco a poco

mvegala

01/3/2018
Sobre Manual
Me encanto el manual, solo que puedo descargarlo, no entiendo la app para descargar no me deja, si alguien pudiera ayudar!

Leonardo Simes

29/5/2018
Gracias
Fantástico este manual, como todos los que hacen ustedes. Cada vez que necesito aprender algo lo busco en esta web. <br />
Muy didácticos, excelente!