El caparazón de aplicación
Instala el CLI de Angular (interfaz de línea de comandos)
Instala el CLI de Angular, si todavía no lo has hecho
|
1 2 3 |
npm install -g @angular/cli |
Crea una nueva aplicación
Crea un nuevo proyecto llamado angular-tour-of-heroes con este comando de CLI
|
1 2 3 |
ng new angular-tour-of-heroes |
El CLI de Angular ha generado un nuevo proyecto con una aplicación por defecto con los ficheros necesarios
Despacha (serve) la aplicación
Ve al directorio del proyecto y lanza la aplicación
|
1 2 3 4 |
cd angular-tour-of-heroes ng serve --open |
El comando ng serve construye la aplicación, arranca el servidor de desarrollo, observa los ficheros fuente y reconstruye la aplicación cada vez que cambias dichos ficheros.
El parámetro
--openabre el navegador en la direcciónhttp://localhost:4200/
En este momento deberías ver la aplicación ejecutándose en tu navegador.
Componentes de Angular
La página que ves es el caparazón de la aplicación. Este caparazón está controlado por un componentes de Angular llamado AppComponent.
Los componentes son los bloques de construcción fundamentales de las aplicaciones Angular. Muestran datos por pantalla, escuchan las entradas del usuario y realizan acciones basándose en dichas entradas.
Cambia el título de la aplicación
Abre el proyecto con tu editor de preferencia y navega hasta la carpeta src/app.
Encontrarás que la implementación de AppComponent se distribuye en tres ficheros:
app.component.ts– el código de la clase del componente, escrito en TypeScript.app.component.html– la plantilla del componente, escrita en HTML.app.component.css– los estilos CSS privados del componente.
Abre el fichero de la clase del componente (app.component.ts) y cambia el valor de la propiedad title a ‘Tour of Heroes».
|
1 |
title = 'Tour of Heroes'; |
Abre el fichero con la plantilla del componente (app.component.html) y borra la plantilla por defecto generada por el CLI de Angular. Reemplázala con la siguiente línea de HTML.
|
1 |
<h1>{{title}}</h1> |
Las llaves dobles es la sintaxis de Angular para el vínculo de interpolación (interpolation binding). De este modo se representa el valor de la propiedad title dentro de una etiqueta HTML.
El navegador se actualiza automáticamente y muestra el nuevo título de la aplicación.
Añade estilos a la aplicación
La mayoría de aplicaciones intentan mantener un mismo estilo en toda la aplicación. Con este propósito, CLI ha generado un fichero styles.css vacío. Los estilos que afecten a toda la aplicación deberían ir aquí.
Aquí tenemos un extracto de styles.css para Tour de Héroes.
Revisión final del código
El código fuente de este tutorial y los estilos globales completos de Tour de Héroes están disponibles en el ejemplo en vivo y para descarga.
Aquí están los ficheros tratados en esta página.
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; } |
|
1 |
<h1>{{title}}</h1> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Application-wide Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[text], button { color: #888; font-family: Cambria, Georgia; } /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; } |
Resumen
- Hemos creado la estructura inicial de la aplicación usando el CLI de Angular
- Hemos aprendido que los componentes de Angular muestran datos.
- Hemos usado la llave doble de interpolación para mostrar el título de la aplicación
Nota: puedes encontrar el documento original de esta entrada en https://angular.io/tutorial/toh-pt0
Pingback: Tutorial Angular. 4. Mostrando una Lista – Developing in Spanish