Antes de empezar, requisitos previos
Antes de comenzar necesitarás tener instalados Node.js (versión 8.x or 10.x, se puede comprobar con node -v
) y el gestor de paquetes npm (npm -v
).
Instalar Angular CLI
Angular cuenta con un interface de línea de comandos para crear nuestros proyectos, para instalarlo ejecutar:
npm install -g @angular/cli
Creación del entorno de trabajo
Ahora procedemos a crear un nuevo espacio de trabajo que puede albergar más de un proyecto.
ng new my-app
Durante la creación del espacio de trabajo el comando ng new
solicita algunos datos sobre las características de nuestra aplicación, aceptamos la opciones por defecto pulsando enter.
Después de unos minutos ya tenemos el espacio de trabajo en la carpeta "new-app" creado con todos los paquetes npm y dependencias, dentro en el directorio "src" tendremos un esqueleto de proyecto inicial.
Ejecutar la aplicación
cd my-app
ng serve --open
El comando ng serve
ejecuta el servidor y recompila la aplicación refrescando el contenido de la aplicación Web a medida que realizamos cambios en los ficheros. EL parámetro --open
abre la aplicación en el navegador (http://localhost:4200/).
Debemos dejar la consola abierta, cualquier cambio que realicemos en el proyecto se visibilizará en el navegador de forma automática.
Estructura de un proyecto
Cuando creamos un nuevo espacio de trabajo Angular genera una estructura de carpetas y crea un montón de archivos (mi carpeta "my-app" ocupa 256MB en disco y tiene 26.634 archivos), parece algo desproporcionado para una aplicación tan sencilla y en la mayoría de los casos no modificaremos la mayoría de los archivos que forman el proyecto. Vamos a repasar por encima el propósito de algunos de estos ficheros y como se estructura el proyecto.
La carpeta "node_modules" alberga los módulos Node.js, la carpeta "src" es donde trabajaremos sobre nuestra aplicación la mayor parte del tiempo.
El archivo "angular.json" apunta a "main.ts" que es el punto de entrada de ejecución de nuestra aplicación, "index.html" es la página que contendrá toda nuestra aplicación SPA, entre otros parámetros también hace referencia a la hoja de estilos CSS que usamos ("styles": ["src/styles.css"],
).
El archivo "package.json" define las dependencias que tiene nuestro proyecto.
Dentro de la carpeta "src/app" podemos encontrar los componentes que forman la página.
El "src/index.html" es la Web que contiene toda nuestra aplicación SPA.
Si os fijáis bien la etiqueta <app-root></app-root>
no es estándar, esto lo entiende solamente Angular y despliega los componentes que contiene la carpeta "src/app/", todos los archivos con extensión .ts se refieren evidentemente a código TypeScript.
Editando un componente de Angular
El archivo "src/app/app.component.html" contiene el HTML que visualizamos. Vamos a cambiar el mensaje:
<h1>Bienvenido a {{ title }}!</h1>
Y vamos al navegador para ver como cambia el mensaje:
También vamos a quitar (o comentar) el título de segundo nivel y los enlaces de abajo por ejemplo para ver como se renderiza el resultado:
La propiedad {{ title }}
es interpretada por Angular, el contenido que lo sustituye lo obtiene de /src/app/app.component.ts de la clase AppComponent
, cambiamos el texto para realizar la prueba:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "mi primera app en Angular";
}
Resultado:
El archivo /src/app/app.component.spec.ts podemos eliminarlo por el momento, se utiliza para realizar pruebas. /src/app/app.module.ts se utiliza para inicializar nuestra aplicación pero lo veremos más adelante. De momento el archivo CSS /src/app/app.component.css está vacio.
La clase AppComponent
se exporta usando la palabra clave export
para que pueda ser usada por el framework de angular en otros archivos, la variable title
es la única propiedad de la clase por el momento. Si quisiésemos podríamos cambiar el nombre de la variable y también evidentemente en /src/app/app.component.html <h1>Bienvenido a {{ titulo }}!</h1>
.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
titulo = "mi primera app en Angular";
}
Siguientes pasos
- Basado en el tutorial oficial Tour of Heroes tutorial
Código fuente
- angular / src / 01-intro my-app.