Mi primera aplicación

El setup

1. Instalación de npm

Como sucede con muchos frameworks web recientes, el desarrollo de una aplicación Angular se hace basándose en las herramientas de Node.js, principalmente npm.

Node.js es un motor de ejecución que se ejecuta en el lado del servidor, al contrario de lo que sucede con JavaScript, que se ejecuta en los navegadores en el lado del cliente. Principalmente se utiliza en el desarrollo web, para aportar un conjunto de herramientas a la máquina de desarrollo. npm (Node Package Manager) es el administrador de paquetes de Node.js y permite instalar módulos nuevos de manera sencilla que van a enriquecer el runtime Node.js.

Por lo tanto, la instalación de Node.js es indispensable para el desarrollo Angular. Su instalación se hace directamente desde el sitio web oficial: https://nodejs.org/

Para comprobar la correcta instalación de Node.js, es suficiente con escribir el comando npm en una consola:

Si ya ha instalado Node.js, puede comprobar la versión de npm con el comando npm -v (guardar una versión relativamente actualizada, siempre es una buena idea).

Mi primer componente

Para formar una aplicación, es necesario tener un componente raíz que contenga a toda la aplicación. Su nombre por defecto es AppComponent y este es el nombre que se utiliza de manera general, porque es muy explícito.

Un componente está formado por tres archivos: el TypeScript, el HTML y la hoja de estilo. Por ejemplo, podemos tener:

import { Component } from '@angular/core';  
  
@Component({  
 selector: 'app-root',  
 templateUrl: './app.component.html',  
 styleUrls: ['./app.component.scss']  
})  
export class AppComponent {  
 title = 'firstApp';  
} 

En primer lugar, el componente es una clase TypeScript que se decora con el decorador @Component. En el decorador podemos especificar el selector, es decir, la etiqueta que se va a corresponder con el componente. Esto quiere decir que escribiendo app-root en el HTML, se va a cargar el componente AppComponent.

La clase tiene una propiedad title que se va a poder explotar más adelante en el HTML, para visualizarla por ejemplo.

Mi primer módulo

Un módulo representa un contenedor, que agrupa al conjunto de elementos de la aplicación. Como sucede con el componente, necesitamos un módulo raíz en el que vamos a poder añadir nuestro componente AppComponent. Sin demasiadas sorpresas, el nombre de este módulo es AppModule.

Un módulo se representa por una clase TypeScript, decorada por NgModule.

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
  
import { AppRoutingModule } from './app-enrutamiento.module';  
import { AppComponent } from './app.component';  
  
@NgModule({  
 declarations: [  
   AppComponent  
 ],  
 imports: [  
   BrowserModule,  
   AppRoutingModule  
 ],  
 providers: [],  
 bootstrap: [AppComponent]  
})  
export class AppModule { } 

El decorador NgModule permite indicar tres datos importantes:

Ejecución de la aplicación

Por lo tanto, tenemos el AppComponent y el AppModule. El AppModule sabe que debe arrancar con el AppComponent, y solo falta indicarle a la aplicación que utilice el AppModule.

Para esto, necesitamos el archivo main.ts.

import { enableProdMode } from '@angular/core';  
import { platformBrowserDynamic } from  
'@angular/platform-browser-dynamic';  
  
import { AppModule } from './app/app.module';  
import { environment } from './environments/environment';  
  
if (environment.production) {  
 enableProdMode();  
}  
  
platformBrowserDynamic().bootstrapModule(AppModule)  
 .catch(err => console.error(err)); 

Podemos ver el enableProdMode(), que va a optimizar la aplicación para la producción si es necesario durante el desarrollo, lo que permitirá tener más herramientas para depurar.

La importación de platformBrowserDynamic permite tener acceso al método que permite ejecutar el módulo en un navegador.

Para terminar, el archivo index.html es el archivo que se mostrará en el navegador: 

<!doctype...