angular/aio/content/tutorial/toh-pt0.md

Crea un nuevo proyecto

Primero, crea la aplicación inicial usando el Angular CLI. En este Tutorial, modificarás y ampliarás la aplicación inicial para crear la aplicación Tour de Héroes.

En esta parte del tutorial, harás lo siguiente:

1. Establecer tu ambiente de desarrollo.
2. Crear un nuevo espacio de trabajo y un proyecto de aplicación inicial.
3. Servir la aplicación.
4. Hacer cambios a la aplicación.

Para ver la aplicación de ejemplo que describe esta página, consulta el .

Configura tu entorno

Para preparar tu entorno de desarrollo, sigue las instrucciones en Creación de un entorno local.

Crear un nuevo espacio de trabajo y un enlace de aplicación inicial

Desarrolla tu aplicación en el contexto del espacio de trabajo Angular. Espacio de trabajo. contiene uno o más archivos [proyecto]. Un proyecto es un conjunto de archivos que componen una aplicación, biblioteca o prueba de extremo a extremo (e2e). En este Tutorial, crearas un nuevo espacio de trabajo.

Para crear un nuevo espacio de trabajo y un proyecto de aplicación inicial:

1. Asegurate de que no esté en la carpeta del espacio de trabajo Angular. Por ejemplo, si creó anteriormente el espacio de trabajo Introducción, cambia a la carpeta principal de esa carpeta.
2. Ejecuta el comando CLI ng new y asígnale el nombre angular-tour-of-heroes, como se muestra a continuación.

ng new angular-tour-of-heroes

3. Ejecuta el comando ng new y verá información sobre las funciones que desea incluir en su primer proyecto de aplicación. Presione Entrar o Volver para aceptar el valor predeterminado.

Angular CLI instala los paquetes Angular npm necesarios y otras dependencias. Esto puede tomar unos pocos minutos.

También crea el siguiente espacio de trabajo y archivos de proyecto de inicio.

• Un nuevo espacio de trabajo con una carpeta raíz llamada angular-tour-of-heroes.
• Un proyecto de aplicación esqueleto inicial también llamado angular-tour-of-heroes. (En la subcarpeta src)
• Proyecto de prueba de extremo a extremo. (En la subcarpeta e2e)
• Archivos de configuración relacionados.

El primer proyecto de aplicación contiene una aplicación de bienvenida simple que puede ejecutar de inmediato.

Servir la aplicación

Ve al directorio de tu espacio de trabajo e inicia la aplicación.

cd angular-tour-of-heroes ng serve --open

El comando ng serve crea la aplicación, inicia el servidor de desarrollo y observa los archivos de origen. Cuando realiza un cambio en un archivo que se está viendo, se realizará una reconstrucción en el archivo modificado.

Si especificas la bandera --open, se abrirá http://localhost:4200 en tu navegador.

Asegúrate de que la aplicación se esté ejecutando en su navegador.

Componentes de Angular

La página que se muestra es Shell de Aplicación. Este shell funciona desde un componente Angular llamado AppComponent.

Los componentes son los bloques de construcción fundamentales de las aplicaciones Angular. Ellos muestran informacion en la pantalla, esperan el ingreso de datos del usuario y toman acciones basados en esa informacion ingresada.

Cambiar la aplicación

Para hacer algunos cambios en la aplicación de inicio, abre el proyecto en su editor de texto favorito o IDE y vaya a src/app.

Encontrará la implementación del shell AppComponent, dividido en tres archivos:

1. app.component.ts— Este es el código para la clase de componente escrita en TypeScript.
2. app.component.html— Este es el componente Plantillas escrito en HTML.
3. app.component.css— CSS solo para este componente.

Cambiar el título de la aplicación

Abre el archivo de clase de componente (app.component.ts) y cambia el valor de la propiedad title a Tour de Heroes.

Abre el archivo de plantilla de componente (app.component.html) y Elimina la plantilla predeterminada generada por el Angular CLI. Coloca el siguiente HTML en su lugar.

Las llaves dobles son la sintaxis de interpolación vinculante de Angular. Este enlace de interpolación pasa el valor de la propiedad title del componente en la etiqueta de encabezado HTML.

El navegador actualiza la página con el nuevo título de la aplicación.

{@a app-wide-styles}

Añadir estilo de aplicación

La mayoría de las aplicaciones apuntan a una apariencia consistente en toda la aplicación. El CLI ha generado un styles.css vacío para este propósito. Escriba estilos que se apliquen a toda la aplicación, allí.

Abre src/style.css y agrega el siguiente código al archivo.

Revisión final del código

A continuación se muestra un archivo del código mencionado en esta página.

Resumen

• Creaste la estructura de la aplicación inicial utilizando el CLI Angular.
• Aprendiste que los componentes de Angular muestran datos.
• Utilizaste las llaves dobles de interpolación para mostrar el título de la aplicación.