Conceptos Básicos de la Arquitectura de una aplicación Angular

Módulos y Componentes

Angular es una plataforma para desarrollar (single-page) aplicaciones web con HTML 5 y Typescript. Angular está escrito en Typescript.

Una aplicación Angular se organiza en un conjunto de módulos (NgModules), siempre habrá un módulo principal raíz y módulos que agrupan de manera lógica las funcionalidades de la aplicación.

Cuántos módulos, cuál responsabilidad tiene cada uno, cómo se relacionan los otros módulos entre sí, serán decisiones del diseñador de la aplicación.

Un módulo define (declara) uno o más componentes. Los componentes son los elementos básicos que definen una funcionalidad de la aplicación y con la que el usuario podrá interactuar. Un componente tiene una vista (Htlm) y una lógica que permitirá ver, elegir y modificar información de la aplicación.

Los componentes utilizan servicios que proporcionan una funcionalidad específica que no está directamente relacionada con las vistas. Los servicios pueden inyectarse en los componentes como dependencias, haciendo el código más modular, reutilizable y eficiente.

Relaciones entre los Módulos
Un módulo Angular declara componentes, exporta componentes y provee servicios. También puede importar otros módulos que contienen componentes y/o servicios que se necesitan para su funcionalidad.

Volver a Inicio

Librerías de Angular

Cuando construimos una aplicación web utilizando en framework Angular, debemos importar una serie de librerías predefinidas. Estas librerías comienzan por @angular y las básicas son: '@angular/core', '@angular/platform-browser', '@angular/forms', '@angular/common/http'.

Estructura de archivos de una aplicación Angular

En una aplicación Angular podemos encontrar archivo de Typescript .ts, archivos Htlm .html, archivos de estilos .css y archivos de configuración para distintos propósitos que típicamente son .json.

Cuando se crea una aplicación Angular, en la carpeta src algunos de los archivos que tenemos allí son:

- src
  + app       // aquí van los módulos, componentes, servicios, pruebas
  index.html  // página principal
  main.ts     // declaración del módulo principal
  style.css   // estilos

En la carpeta app tenemos los módulos. El principal y su componente van en la raíz y la recomendación es tener una carpeta aparte por cada módulo adicional y dentro de esta una carpeta por cada componente:

- src
  - app 
    + moduloA
    + moduloB
    + ...
    app.module.ts           // módulo principal
    app.componente.ts       // componente principal del módulo principal
    app.component.spec.ts   // pruebas para el componente principal
    app.component.html      // template del componente principal
    app.components.css      // estilos del móduloprincipal

Volver a Inicio

Clases y Decoradores (Anotaciones)

Cada módulo y cada componente es una clase Typescript anotada o decorada con decoradores de Angular. Un decorador tiene un nombre y un conjunto de propiedades.

Decorador de un Módulo

El decorador de un módulo es @NgModule y, en el siguiente ejemplo decora la clase AppModule. Por ejemplo, en el archivo app.module.ts (el módulo principal) tenemos:

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ShoppingCartComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

La clase AppModule está anotada con @NgModule y tiene por propiedades:

imports: [ BrowserModule, FormsModule ], // Lista de módulos que importa. En este caso son módulos de framework Angular.

declarations: [ AppComponent, ShoppingCartComponent ], // Lista de los componentes que define. En este ejemplo, el componente principal y otro llamado ShoppingCartComponent `bootstrap: [ AppComponent ] // El componente principal.

Todos los nombres de módulos y componentes anteriores son nombres lógicos. La asociación con los archivos físicos donde se encuentran se hace al comienzo del archivo:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';

Decorador de un Componente

El decorador o anotación de un componente es @Component y en el siguiente ejemplo decora la clase AppComponent; tiene por propiedades:

@Component({
  selector: 'my-app',                       // define la marca o tag que podrá utilizarse en una página para incrustar el componente 
  templateUrl: './app.component.html'       // define el nombre del archivo donde está el template o html del componente
})
export class AppComponent { }

Más sobre Componentes

Un componente controla una zona de la pantalla llamada vista (view). Junto con el componente se define un template (un archivo Html extendido con el marcado Angular) que será desplegado por Angular en la vista. Un componente puede tener una vista o una colección de vistas organizadas de manera jerárquica. Veamos un ejemplo.

Ir a Ejemplo:Shopping cart

Volver a Inicio