Vamos a especificar los ficheros necesarios para la creación de un proyecto en Angular.
Es muy importante, en la creación inicial de nuestros proyectos, contar con una serie de ficheros de configuración que nos permitan definir cómo vamos a trabajar con nuestros proyectos de Angular.
Existen herramientas que nos realizan la generación de proyectos de manera automática, pero por el momento, vamos a centrarnos en cada uno de estos ficheros individualmente, para poder reconocer en cualquier momento cuál es el que debemos modificar para cada caso.
Instalación
Para comenzar el trabajo con Angular, necesitamos la instalación de una serie de herramientas. Necesitamos tener instaladas en nuestra máquina, la última versión de node y npm.
Si ya tenemos instaladas estas dos herramientas, podemos comprobar las versiones ejecutando sobre un terminal los comandos:
- node -v
- npm -v
Si no lo tenemos instalado, podemos acceder a la web oficial de Node, desde la cual podremos descargar todos los paquetes necesarios para el trabajo con ambas herramientas. Escoger recomendado para la mayoría.
Proyecto Angular
El siguiente paso, para la construcción de nuestro proyecto es la instalación de las dependencias definidas dentro del fichero package.json.
Todas las librerías que hemos especificado para trabajar dentro de nuestro proyecto serán instaladas dentro del directorio node_modules para su posterior uso.
Esto podemos realizarlo, accediendo al directorio del proyecto y ejecutando el comando $ npm install.
Durante la instalación pueden aparecer ciertos mensajes de Warning e incluso algún mensaje de Error indicando algún problema de dependencias.
Las aplicaciones Angular se componen de bloques funcionales de código relacionados creados a partir de clases de tipo NgModule.
Esto nos permite tener cada función aislada de las demás y aparte, amplíar y modificar, de forma sencilla.
Todas las aplicaciones Angular tienen, como mínimo un módulo, llamado AppModule.
Lo situaremos dentro del directorio app con el nombre app.module.ts.
La implementación básica del fichero app.module.ts, podría ser la siguiente:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ]
})
export class AppModule { }Aquí queda definido el punto de entrada nuestra aplicación.
Necesitamos importar en todos nuestros proyectos BrowserModule para poder lanzar la aplicación dentro de un navegador.
Para comenzar con Angular, no necesitamos más.
Cuando trabajemos con aplicaciones más complejas, necesitaremos importar otra serie de módulos como podría ser FormsModule, RouterModule o HttpClientModule.
El siguiente paso es la creación de un componente y su inclusión en el proyecto.
Todas las aplicaciones Angular, al menos disponen de un componente llamado AppComponent.
Los componentes, como veremos más adelante, conforman los bloques básicos de funcionalidad utilizados para crear nuestra aplicación.
Cada componente suele controlar una porción de la pantalla (una vista), dentro de la plantilla donde lo situemos.
Se genera nuestro primer componente en la ruta src/app/ app.component.ts.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']})
export class AppComponent {
title = 'app';
}