Cursos Empresas Blog Live Conf Eventos Precios

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.

RETO: Haz un cambio simple en el proyecto.

Curso de Angular 4

Clase 8 de 80

Clase 8 / 80

Jherom Chacon

Hace 8 años

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.

Comentarios (286)286 comentarios

Víctor Manuel Sarmiento Cayuelas

Hace 9 años

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

Cristopher Manuel Rivas Aguilar

Que gran aporte!!!

Danny Velásquez

Jhonnathan Peraza

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.

Alejandro García

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

Y nuevo Logo

Enrique Garrido

Hace 7 años

como cambias el logo

Jose Chirinos

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

Ivan Toro

Muy genial el logo.

Jesus Soto

Que logo donde lo hiciste??

Santiago Ricci

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

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

Yesica Lizeth Cortés Pineda

Que cool, muéstrenos como les quedo porfa!

Otmaira Buitrago

Hace 6 años

Abraham Lopez

Flavio Renato Denegri

Disculpa como hiciste el cambio de idioma del texto ?

Cambio idioma

Mauro Gomez

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

Jeyson Manuel Marco Cárdenas

export class AppComponent {
  title = 'PlatziSquare';
}

Edward Fabian Martinez Aparicio

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

Hans Vogt

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

Luis Torres

Jovanny Hernandez

Jorge O. Montoya

Hace 5 años

Esteban José Pagano

export class AppComponent {
title = ‘PlatziSquare’;
}

Gracias por tu aporte 😃

Wilson Naranjo

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

Perfecto, cómo vas con el curso?

Ahumada Alejandro

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’

Muy bien 😄

RETO: Haz un cambio simple en el proyecto.

Progreso del curso

Inicio del curso

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

Fin del curso

Sesiones en vivo

Contenido Bonus