Editando nuestra primer App

Guía de iniciación

ASIMOV Ingeniería S. de R.L. de C.V., Jaqueline Mejia Trejo

En este blog te ayudaré a entender mejor la estructura de nuestro proyecto de una manera fácil para ti, si aun no sabes como crear tu proyecto en Angular te invito a leer el siguiente blog: Mi primer proyecto en Angular

Estructura

Angular a creado una estructura de carpetas en tu carpeta myapp, si es la primera vez que ves una estructura así, quizá te parezca difícil de comprender. Pero si sabes algo sobre Webpack, sabes que contiene una carpeta src donde va todo el código que escribamos sobre nuestra app, mas una carpeta de node_modules donde se almacenan todos los paquetes, mas un archivo package.json donde se listan todas las dependencias de nuestro proyecto.

Odoo • Text and Image

Como lo mencione antes, todo nuestro desarrollo se hará en la carpeta src. Ahí dentro esta la carpeta app, que contiene, entre otros, un archivo llamado app.component.html donde su contenido es bastante amplio, el código que se encuentra solo es un ejemplo que sirve para mostrarte lo que hay detrás de la pagina que se muestra en tu navegador. 



Para empezar a editar nuestra app vamos a borrar todo el contenido de app.component.html podemos escribir un titulo como por ejemplo:

<h4> Editando mi primer app en Angular </h4>

Si guardas, debería verse en tu navegador de la siguiente forma:



Para entender como es que funciona te voy a explicar lo que es un SPA, es un tipo de aplicación web donde todas las pantallas las muestra en la misma página, técnicamente es un sitio donde existe un único punto de entrada, generalmente el archivo llamado index.html (documento raíz).

Te preguntaras ¿Cómo sabe Angular que debe mostrar el contenido del archivo app.component.html en el navegador si lo que de debe de mostrar es el contenido de nuestro archivo raíz? revisemos el contenido de nuestro archivo index.html.



Podemos observar que hay una etiqueta llamada <title> esta etiqueta es el título que tenemos en la pestaña del navegador, en mi caso es Myapp, lo mas importante de este archivo en este momento es la etiqueta <app-root> la cual no es un elemento HTML típico, sino uno customizado, creado automaticamente por Angular la primera vez que generamos el esqueleto de una app con Angular, como parte del componente app. Es el componente más importante, ya que conecta todas las piezas de nuestra app. 

Si nos fijamos en el archivo app.component.tsahí veremos la propiedad selectorcuyo valor es app-rooty no por casualidad. Así es como Angular sabía qué contenido mostrar en el index.html, porque el app-root es una etiqueta HTML que representa a todo un componente (el AppComponent). Al añadirla al index.htmlAngular ya sabe que elemento agarrar. 

Angular te permite combinar un HTML estático con elementos dinámicos, este mecanismo que te menciono es parte de una de las piezas clave de Angular: los componentes.

Un componente en Angular es un bloque de código re-utilizable, que consta básicamente de 3 archivos: un HTML (también conocido como template), un CSS y un TypeScript. La carpeta app con la que viene Angular por defecto es un componente. Trabajaremos con un ejemplo para entender mejor esta parte. Imaginemos que queremos mostrar cierta información sobre un hipotético elemento de nuestra app, por ejemplo, un contador.

Para esto  debemos saber que los componentes deben ser subcarpetas de la carpeta principal, para crear un componente es bastante fácil ya que basta con poner el siguiente comando:

 ng generate component Counter

Donde Counter es el nombre de nuestro componente, este comando automáticamente te va generar los 3 archivos necesarios en la carpeta de App. Para añadir el componente creado lo unico que vamos a hacer es poner nuestro <app-counter></app-counter> en nuestro archivo app.component.html.



Guardando los cambios hechos en tu navegador deberías ver el contenido del app.component.html el cual debe verse de la siguiente manera:



¡Listo! ahora conoces la estructura de Angular y la creación de un componente. En el siguiente blog te ayudare a practicar el manejo de componentes.

Últimas Publicaciones

¿Te gustó este post?

Compartir