RETO: Haz un cambio simple en el proyecto.

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

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

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

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

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:

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">

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

Cristopher Manuel Rivas Aguilar

Que gran aporte!!!

Danny Velásquez

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

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

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 😄

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina