RETO: Haz un cambio simple en el proyecto.

Cuando creaste el proyecto, se creó un componente por Default llamado home, el cual tiene la única función de darte la bienvenida al framework.

Has un cambio pequeño en él, para que por ejemplo:

El texto esté en español y no en inglés El app no se llame ‘app’, si no ‘PlatziSquare’

Comparte tu solución en los comentarios.

Víctor Manuel Sarmiento Cayuelas

student•

Titulo de la página:

Accedemos a la carpeta de trabajo src.
Accedemos a app donde están nuestros componentes.
Los componentes al estar encapsulados tienes HMTL + CSS + JS, por ello vamos al archivo JS -> app.component.ts
Vemos una variable llamada title, debemos de cambiar el valor que es ‘app’, al propuesto:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
}

Texto esté en español:

Estando en el mismo componente vamos al archivo HTML ->app.component.html
Podemos modificar el texto en ingles que se encuentra estaticamente en el HTML, por ejemplo en la etiqueta h1:

  <h1>
    Bienvenido a {{ title }}!
  </h1>

Como comentario, ver que la variable {{title}} sera sustituida dinámicamente por el valor que tenga title en nuestro JS.

Si ademas queremos configurar el idioma que usaremos en la web, debemos ir a la carpeta src, y modificamos el archivo index.html

Cambiamos lang=“en” por lang=“es”, en la etiqueta <html>:

<html lang="es">

Víctor Manuel Sarmiento Cayuelas

student•

Cuando me refiero a JS (JavaScript) seria TS (TypeScript), soy de la vieja escuela…

Cristopher Manuel Rivas Aguilar

student•

Que gran aporte!!!

Danny Velásquez

student•

Titulo de la página: en src/app/app.component.ts

export class AppComponent {
  title = 'PlatziSquare';
}

Idioma: En src/app/app.component.html el contenido traducido y en src/index.html para que el navegador reconozca la etiqueta

<html lang="es">

Jhonnathan Jose Peraza Valera

student•

La etiqueta (lang), no modifica el lenguaje del contenido de una pagina html, participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos.

https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales/lang

Alejandro García

student•

Cierto, modificar el atributo lang de la etiqueta html no supone que el texto vaya a aparecer en otro idioma. Para mi, no es la respuesta que correcta a lo que se pide.

Mon Avellaneda

student•

Y nuevo Logo

Enrique Garrido

student•

como cambias el logo

Jose Chirinos

student•

Reto Cumplido
le hice un loguito para darle mas emoción…

Iván Toro

student•

Muy genial el logo.

Jesus Soto

student•

Que logo donde lo hiciste??

Santiago Ricci

student•

Para cambiar el título modifique el atributo title dentro del archivo app.component.ts y para el idioma el archivo app.component.html.

Saludos

Juan C Felizzola

student•

Mi solución es igual y salió todo perfecto.

Yesica Lizeth Cortés Pineda

teacher•

Que cool, muéstrenos como les quedo porfa!

Otmaira Buitrago

student•

Abraham Lopez

student•

Flavio Renato Denegri

student•

Disculpa como hiciste el cambio de idioma del texto ?

Mon Avellaneda

student•

Cambio idioma

Mauro Gomez

student•

Eso no cambia el idioma eso cambia la descripción de la página es metadata

Jeyson Manuel Marco Cárdenas

student•

export class AppComponent {
  title = 'PlatziSquare';
}

Edward Fabian Martinez Aparicio

student•

Index.Html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>```

Archivo app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
}```

Hans Vogt

student•

Para modificar el nombre del App

Vamos al Proyecto dentro de la carpeta src/app y seleccionamos el archivo app.component.ts
Modificamos el siguiente segmento title = 'PlatziSquare';

Para modificar la Bienvenida a Ingles

Vamos al Proyecto dentro de la carpeta src/app y seleccionamos el archivo app.component.hmtl 2.Modificamos el Siguiente Segmento

<h1> Bienvenidos a {{title}}! </h1>

Joseph Monsalve

student•

Luis Torres

student•

Jovanny Hernandez

student•

Jorge O. Montoya

student•

Jherom Chacon

student•

Al principio para realizar este reto fui a buscar algo llamado home, sin embargo no encontré nada. Debido a esto empecé a revisar para ver que podría haber familiar en el codigo generado por angular.

Fue cuando encontre el index.html, tras revisarlo noté que no tenía nada fuera de lo común, con excepción de la etiqueta app-root.

<body>
  <app-root></app-root>
</body>

Seguí revisando el código, fue entonces cuando me pareció que el archivo main.ts tendría que tener algo que ver. Al revisarlo, como todavía no entiendo mucho de TypeScript, no encontré nada familiar, nada con excepción de las palabras reservadas import. Fue cuando encontré una que hacia referencia a una ruta, algo similar a una URL. Entonces pense en el principio del Single Page Application, y me pareció que posiblemente el código podría estar siendo inyectado desde otro archivo:

import { AppModule } from './app/app.module';

Si revisamos la carpeta app, podremos encontrar un archivo llamado app.module.ts

Dentro de este archivo hay otro import:

import { AppComponent } from './app.component';

Lo que nos lleva a otro archivo llamado app.component.ts que esta también en la carpeta app del proyecto.

Este archivo tiene el siguiente código autogenerado adentro:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
}

Podemos ver en ese código como apuntamos a la etiqueta app-root que estaba en el index.html como valor de un atributo llamado selector, si vamos al archivo html referenciado en templateUrl podemos encontrar el código html que está siendo inyectado en el index.html.

Siendo este el código que debemos cambiar para mostrar el resultado en español.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
 </div>
<h2>Aqui hay algunos links que te ayudaran a comenzar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>```

Vemos como por medio de los imports vamos inyectando y referenciando elementos de html de un lugar a otro. También es interesante ver como los componentes en este caso son html simple.

Jherom Chacon

student•

Fue cuando encontre el index.html, tras revisarlo noté que no tenía nada fuera de lo común, con excepción de la etiqueta app-root.

<body>
  <app-root></app-root>
</body>

import { AppModule } from './app/app.module';

Si revisamos la carpeta app, podremos encontrar un archivo llamado app.module.ts

Dentro de este archivo hay otro import:

import { AppComponent } from './app.component';

Lo que nos lleva a otro archivo llamado app.component.ts que esta también en la carpeta app del proyecto.

Este archivo tiene el siguiente código autogenerado adentro:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
}

Siendo este el código que debemos cambiar para mostrar el resultado en español.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
 </div>
<h2>Aqui hay algunos links que te ayudaran a comenzar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>```

Vemos como por medio de los imports vamos inyectando y referenciando elementos de html de un lugar a otro. También es interesante ver como los componentes en este caso son html simple.

Esteban José Pagano

student•

export class AppComponent {
title = ‘PlatziSquare’;
}

Yesica Lizeth Cortés Pineda

teacher•

Gracias por tu aporte 😃

Wilson Naranjo

student•

Para cambiar el texto a español cambie el src/app.component.html directamente.

Yesica Lizeth Cortés Pineda

teacher•

Perfecto, cómo vas con el curso?

Ahumada Alejandro

student•

1° en src/app/ edite el archivo app.component.html, en la linea 4 cambie Welcome a Bienvenido
2° en src/app/ edite el archivo app.component.ts cambie linea 9 title ‘app’ por ‘PlatziSquare’

Yesica Lizeth Cortés Pineda

teacher•

Muy bien 😄