RETO: Haz un cambio simple en el proyecto.

Clase 8 de 80 • Curso de Angular 4

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.

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.

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 😄

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

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

<!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>```

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

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

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

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

<!--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.

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

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

<!--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.

RETO: Haz un cambio simple en el proyecto.

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