Segundo Proyecto en Angular Js Enviar Valores

 in Angular by

Vamos a seguir metiendo mano en Angular Js en este articulo vamos a modificar el contenido que viene por default y vamos a agregar nuestro propio contenido.

Vamos a seguir el tutorial del articulo anterior https://evilnapsis.com/2023/03/24/creando-nuestra-primera-app-en-angular-js/

Una vez que ya creamos nuestro proyecto ahora vamos a ir directo a los archivos.

  • app1/src/app/app.component.html
  • app1/src/app/app.component.js

En el archivo app.component.html esta una plantilla html o mas bien un contenido que se agrega en la plantilla principal que esta en el archivo.

  • app1/src/index.html

Bueno el archivo app.component.html le vamos a borrar todo el contenido y solo le vamos a dejar lo siguiente.

<h1>{{hola1}}</h1>
<div>{{sub1}}</div>
<span>Nombre del proyecto: {{ title }} </span>

Como se puede ver tenemos unos valores entre dobles llaves {{variable}}, estos valores significan que son variables, estas variables las estamos enviando o pasando desde el archivo app.component.ts

Mas especificamente en la siguiente seccion.

export class AppComponent {
  title = 'app2';
  hola1 = "Hola Mundo1";
  sub1 = "Este es un ejemplo en Angular JS"
}

Estamos pasando valores o variables, el nombre de la variable que nosotros asignemos en la clase AppComponent, asi mismo se van vamos a obtener los valores en el archivo app.component.html solo que hay que poner siempre dobles llaves {{variable}}

En el archivo app.component.html se comporta como un archivo html por lo que el contenido que agregamos en la etiqueta <h1></h1> este se va a mostrar mas grande y asi podemos meter contenido en cada etiqueta.

Ejecutando el proyecto

Para ejecutar el proyecto usamos el comando.

ng serve --open

El resultado es el siguiente.

Leave a comment