Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 13D : 5H : 46M : 12S
Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

RETO: Haz un cambio simple en el proyecto. 8/80

Lectura

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.

  • Titulo de la página:
  1. Accedemos a la carpeta de trabajo src.

  2. Accedemos a app donde están nuestros componentes.

  3. Los componentes al estar encapsulados tienes HMTL + CSS + JS, por ello vamos al archivo JS -> app.component.ts

  4. 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:
  1. Estando en el mismo componente vamos al archivo HTML ->app.component.html

  2. 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">
  • 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">

Y nuevo Logo Captura de pantalla 2017-09-07 a las 20.00.10.png

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

reto1

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

CapturaAngular_es.PNG

Cambio idioma cambioIdioma.png

img1.png
img2.png
img3.png
img4.png

export class AppComponent {
  title = 'PlatziSquare';
}

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';
}```

Para modificar el nombre del App

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

Para modificar la Bienvenida a Ingles

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

Captura de Pantalla 2019-09-24 a la(s) 4.54.59 p. m..pngCaptura de Pantalla 2019-09-24 a la(s) 4.56.08 p. m..png

angular_platzisquare_1.png

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.




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.




export class AppComponent {
title = ‘PlatziSquare’;
}

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

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’

Hola me da este error
Error:Initialization error (angular 2 language service). Cannot read property ‘CommandTypes’ of undefined

que puedo hacer??

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

Cambio título
CambioTitulo.png

3.PNG

modifiqué el archivo Component.html y lo puse en español.

Hola!!

¿ puedo hacer una organización de carpetas dentro de app?
es decir, si por ejemplo podría crear una carpeta que se llame style y dentro colocar los archivos sass y los css y esto no afecte el proyecto

buenas clases

app.component.ts
export class AppComponent {
  title = 'PlatziSquare';
}
index.html
<html lang="es">

export class AppComponent {
  title = 'PlatziSquare';
}

<html lang="es">
  1. Para cambiar el texto a español, hice lo siguiente:
  • modifique el texto a español (“Bienvenido a”) en el archivo app.component.html dentro de la carpeta app.
  1. y para el texto de “app” modifique el archivo app.component.ts la propiedad title poniendole Plazisquare

Algo simple, pero se realizo.

reto completado y entendido

genial, con los comentarios tambien aprendi nuevas cosas gracias a todos!

export class AppComponent {
title = ‘PlatziSquare’;
}

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

El título lo cambiamos en el archivo app.component.ts del componente app (el que angular cli nos crea por defecto)

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

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

y además cambiamos la otra parte del mensaje de bienvenida que está en inglés a español en el archivo app.component.html

<h1>
    Bienvenido a {{ title }}!
</h1>
angular.PNG

texto se cambio en Html

export class AppComponent {
  title = 'PlatziSquare';
}
  <h1>
    Bienvenido a {{ title }}
  </h1>

He aqui la solución

index.html

<code>
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!  
<!--	Change  to: "Bienvenidos a {{title}}!-->
...
.
.
.
<code>
import { Component } from '@angular/core';

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

export class AppComponent {
title = ‘PlatziSquare’;
}

Cambiamos el idioma de los textos en este archivo app.component.html, por ejemplo:
<h1>
Bienvenidos a {{ title }}!
</h1>

Cambiamos app en app.component.ts, así:
export class AppComponent {
title = ‘PlatziSquare’;
}

a mi no me sale he hecho los cambios y la pagina le cuesta cargar esta pensando ya lleva 2 minutos

Aquí, mis cambios:

index.html

<!doctype html>
<html lang="es">

app.component.ts

export class AppComponent {
  title = 'Platzisquare';
}
export class AppComponent {
  title = 'PlatziSquare';
}
<html lang="es">
export class AppComponent {
title = ‘PlatziSquare’;
}

Codigo en app.component.ts

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
</div>
<h2>Aplicacion del curso Angular 4 en platzi.com  </h2>


codigo en app.component.html

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

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

En src/app/app.component.ts cambio el valor de la propiedad title

export class AppComponent implements OnInit {
  title = 'PlatziSquare';

Para cambiar el idioma del texto cree una función getLanguage() que detecta el idioma del navegador para luego ser usado junto con la propiedad il8n
Así es cómo quedaría mi código

en app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'PlatziSquare';
  defaultLanguage = 'es';
  il8n = {
      'welcome_msg': {
          'es' : 'Bienvenidos a',
          'en' : 'Welcome to'
      },
      'links_heading': {
          'es' : 'Aquí hay algunos enlaces para ayudarlo a comenzar:',
          'en' : 'Here are some links to help you start:'
      }
  };
  language;

  ngOnInit() {
      this.language = this.getLanguage() || this.defaultLanguage;
  }

  getLanguage(): string {
    if (typeof window === 'undefined' || typeof window.navigator === 'undefined') {
        return undefined;
    }
    let language = window.navigator.languages && window.navigator.languages[0] || window.navigator.language;
    if (language.indexOf('-') !== -1) {
        language = language.split('-')[0];
    }
    if (language.indexOf('_') !== -1) {
        language = language.split('_')[0];
    }
    return language;
  }
}

en app.component.html

<div style="text-align:center">
  <h1>
    {{ il8n.welcome_msg[language] }} {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>{{ il8n.links_heading[language] }}</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>

Pienso que esto se podría mejorar creado un servicio o un módulo. Ya me dirán! 😉

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>
    Bien venido a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aqui hay algunos links con los que puedes 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>

Título

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’;
}

He realizado la actividad teniendo el cuenta el aporte del usuario (Victor_Manuel).

He modificado el archivo app.component.ts

})
export class AppComponent {
  title = 'PlatziSquare';
}

Y posteriormente el archivo index.html para el cambio de idioma.

<html lang="es">

export class AppComponent {
title = ‘PlatziSquare’;
}

src --> index.html

<html lang="es">

src --> app --> app.components.ts

export class AppComponent {
  title = 'platziSquare';
}

si escribes en consola:

<ng serve -0>

te abre en automático la página en el navegador

En el app.component.html:

  <h1>
    Bienvenido a {{ title }}!
  </h1>
<h2>Aquí hay algunos links para ayudarte a empezar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour de Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentación</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

En el app.component.ts:

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';
}

<div style=“text-align:center”>
<h1>
Bienvenidos a {{ title }}!
</h1>
<img width=“300” alt=“Angular Logo” src=“data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==”>
</div>
<h2>Aqui encontraras algunos enlaces para ayudate a empezar: </h2>
<ul>
<li>
<h2><a target="_blank" rel=“noopener” href=“https://angular.io/tutorial”>Tour de Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel=“noopener” href=“https://github.com/angular/angular-cli/wiki”>Documentación CLI</a></h2>
</li>
<li>
<h2><a target="_blank" rel=“noopener” href=“https://blog.angular.io/”>Blog de Angular</a></h2>
</li>
</ul>

En app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aquí hay algunos enlaces para ayudarte a empezar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour de Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">Documentacion CLI</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

En app.module.ts

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

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

Modificar el archivo dentro de la siguiente ruta: src/app/app.component.html

yo en mi caso le puse otro nombre.

<div style="text-align:center">
<h1>
    Welcome to {{ "MoonSquare" }}!
</h1>

Se ha procedido a llevar a cabo la modificación de los textos en inglés por textos en español en el fichero alojado en la siguiente ruta:
- /platzisquare/src/app/app.component.html

También se ha procedido a modificar el fichero:

- /platzisquare/src/app/app.components.ts

captura_modificar_titulo.JPG

Fue sencillo:

export class AppComponent {
  title = 'PlatziSquare';
}

Este archivo se encuentra en platzisquare/src/app/appcomponents.ts

<div style=“text-align:center”>
<h1>
Bienvenido a {{ title }}!
</h1>
<img width=“300” alt=“Angular Logo” src=“data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==”>
</div>
<h2>Algunos Links para iniciar: </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>
##########################
import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘platzisquare by Hugo’;
}
###############

<!doctype html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<title>Platzisquare by Hugo</title>
<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>

Para aplicaciones multi idiomas se apartan archivos json con la traducción correcta del texto

así
https://medium.com/letsboot/translate-angular-4-apps-with-ngx-translate-83302fb6c10d

para que la app no se llama app sino platziSquare hay qeu hace un refactor en los atrchivos

El resultado de la app de bienvenida
sreenplatz.png

El título de la app:

expect(app.title).toEqual('BCI Square');

El texto en español lo cambié directamente en app.component.html

!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a  {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Algunos links que te ayudarán para 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>


Para modificar el title de la app:

export class AppComponent {
  title = 'Proyecto Nuevo';
}

<div style="text-align:center">
  <h1>
    Bienvenido! {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Algunos links para 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>```
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Platzisquare</title>
  <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>

Esto se ve bastante bueno. No pude evitar notar que en el momento en que se guardan los cambios en nuestro editor de texto (en mi caso Atom), la página web actualiza de manera inmediata a los cambios que hemos realizado. Esto me parece que supone un ahorro considerable de tiempo cuando estamos en fase de desarrollo. 😄

<code>
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aquí algunos enlaces donde puedes comenzar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Viaje de Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentación</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
  </li>
</ul>

Hola a todos!

Aunque ya lo vi en comentarios abajo los archivos a revisar para hacer las modificaciones del reto son:

index.html => En el directorio /src
app.component.html => En el directorio /src/app

Saludos!

Modificando el titulo en el archivo: src/app/app.component.ts

export class AppComponent {
  title = 'PlatziSquare';
}

El primero fue cambiando el archivo src/app/app.component.html colocando lo siguiente:

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
</div>
<h2>Aqui encontrarás los vinculos de ayuda para empezar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour de Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">Documentacion CLI</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blogs de Angular</a></h2>
  </li>
</ul>

El segundo el cambio que realice fue en el archivo src/app/app.component.ts en el valor titile del componente, de la siguiente forma

export class AppComponent {
  title = 'PlatziSquare';
}

Tarea realizada…

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

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

El idioma:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>PlatziSquare</title>
  <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>

Reto1A4.JPG
Captura.PNG
appinicial.png
appComponent.png

-Se realizó cambio de título en el 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';
}
  • Se hizo un cambio pequeño para que el texto estuviera en español y no en inglés en el archivo app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Primer lanzamiento de {{ title }}!
  </h1>
 <img width="300" alt="Angular Logo" src=angular.jpg>

</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 de heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">Documetación CLI</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular </a></h2>
  </li>
</ul>

Saludos cordiales, tengo una pregunta. Me ubico en mi archivo app.component.html y observo que el Welcome to {{ title }}! aparece completamente en gris, no en verde como reconociendo una variable y cuando abro el documento en el navegador, se observa el titulo literalmente así: Welcome to {{ title }}!
Que se debe hacer para este caso?
Les agradezco su colaboración, soy un poco nueva en el tema.

Modifico la parte del nombre para realizar un cambio minimo en el proyecto

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Proyecto PlatziSquater</title>
  <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>
<code>
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a  {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aquí tienes unos links para ayudarte a empezar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour de Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentacion</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
  </li>
</ul>

El titulo del proyecto en src/app/app.component.ts

export class AppComponent {
  title = 'PlatziSquare';
}

Texto en Español:
En el archivo app.component.html podemos modificar el contenido de la etiqueta h1, colocando el texto en español:

Reto1_1.PNG

Nombre de la app:
En el archivo index.html, podemos modificar el título, así como el atributo lang:

Reto1_3.PNG

El resultado obtenido fue:

Reto1_5.PNG

Algo me dice que estamos un poco desfasados en el tiempo jaja, el archivo por default que genera como " home " ahora es " app.component.html " y el title, lo pone ya automaticamente… ( se lo cambia desde app.component.ts)

en app.component.html

<h2>Aqui hay algunos links que te ayudaran a iniciar: </h2>

En index.html
<title>Directorio</title>

se cambio en la ruta: src/app/app.component.ts

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 = 'ACG Square';
}

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <img width="300" alt="acg square logo" src="/src/assets/Images/acgSquareLogo.jpg">
</div>
<h2>Estos son 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>


<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </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>

app.component.html para hacer el cambio del texto y en app.component.ts el cambio del título de la app

Excelente.

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';
}

// en el html
<title>{{texto}}</title>

//en el TypeScript 
import { Component } from '@angular/core';

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

En src>app>app.component.html

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

ya que src/app/app.component.html tiene:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </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>

se debe cambiar el valor de title en src/app/app.component.ts
quedando

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

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

Abrimos el archivo app.component.html y ponemos el texto en español

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

Abrimos el archivo app.component.ts

export class AppComponent {
  title = 'platzisquare';
}

saludos entrar a el archivo app.component.ts y solamente cambiar el texto de app por platzi y listo

en la ruta src\app\app.component.ts modificar el titulo

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
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';
}```

En app.component.ts se modifica el mensaje de bienvenida

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

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

/index.html:

<html lang="es"> <!-- Solo define el charset -->
...
<title>PlatziSquare</title>

app.component.html (Quien va a manejar los compoennts)

  <h1>
    Bien venido a {{ title }}!
  </h1>

/app/app.component.ts:

export class AppComponent {
  title = 'platzisquare';
}