Introducción a Angular
Last updated
Was this helpful?
Last updated
Was this helpful?
Como ya vimos en la introducción, Angular es un framework de código abierto para el desarrollo de aplicaciones web basado en TypeScript , mantenido por Google, y que se utiliza para crear aplicaciones web de una sola página. Su objetivo es ayudar al desarrollo de las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.
La primera versión se conoció como Angular JS o Angular 1. Posteriormente se publicó Angular 2, en la cual se reescribió por completo la librería. La última versión publicada es Angular 4. La versión 3 se saltó, principalmente debido a que la librería cambió al versionado semántico (major.minor.patch), y puesto que algunos módulos de la misma estaban en la versión 3 (como el Router) se decidió que todos pasaran a tener la misma versión major, saltándose por tanto de la versión 2 a la 4.
La versiones de Angular 1 y 2 son incompatibles, ya que el framework cambió por completo. Sin embargo, la última versión de Angular 4 sí que es compatible con Angular 2, dado que la mayoría de cambios realizados han sido internos.
Un proyecto con Ionic genera una arquitectura de Angular ligeramente modificada. Por ejemplo los componentes de Angular pasarán a llamarse páginas y los servicios proveedores de contenidos. A parte de estos cambios de nombre hay otros cambios en la funcionalidad o en el sistema de navegación, que iremos viendo poco a poco.
Como ya se comentó en la descripción de la estructura de carpetas generadas, dentro de la carpeta "src" es donde se alojará el código fuente de la aplicación, siguiendo una arquitectura basada en Angular, con los siguientes elementos principales:
Un módulo principal que definirá todos los requisitos y dependencias de la aplicación.
Un componente app principal que iniciará la navegación y mostrará la pantalla principal
Una serie de componentes o páginas para definir cada una de las pantallas de la aplicación.
Plantillas asociadas con estos componentes para definir las vistas de la aplicación.
Proveedores de contenidos para gestionar los datos de la aplicación.
A continuación se incluye un esquema de una arquitectura típica con Angular (obtenido de la propia documentación de Angular):
Como se puede ver en la imagen en una arquitectura con Angular intervienen muchos elementos, además de los que ya hemos mencionado podemos ver:
Metadatos
Data binding
Directivas
Inyección de dependencias
A continuación veremos una breve introducción a Angular, que nos servirá para aprender a utilizar correctamente este framework en Ionic. Empezaremos con TypeScript, seguido de los principales elementos de Angular, como son los módulos, componentes, servicios, etc.
