Inicio del curso
De qué tratará este curso sobre Angular 4
Introducción a Angular 4
Versionamiento en Angular
¿Qué es Angular? Versiones y ventajas
Typescript: qué es
Introducción al Proyecto: PlatziSquare!
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
Two Way Data Binding
Directivas en Angular 4 y ngFor
Directiva ngIf
Instalando librerías con NPM (Google Maps)
Directivas
Directivas ngStyle y ngClass
Directiva ngSwitch
Directiva de atributo
Host Listeners
Host Binders
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
Diferencias entre href y routerLink
Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos
Parámetros en Rutas
Parámetros tipo Query
Creando una vista de detalle para el proyecto
Creando la página de contacto para PlatziSquare
Servicios
Qué son los servicios en Angular 4
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
Protección de Rutas
Autenticación con redes sociales.
Logout
RxJS
Qué es RxJS
Configurando RxJS en nuestro proyecto
Uso de los Observables
Implementando un TypeAhead
Implementando un TypeAhead 2
Solución al reto autocompletar los campos de dirección usando observables
Publicando nuestro proyecto
Publicando en Firebase Hosting
Fin del curso
Conclusión ¿Qué aprendimos en el curso?
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
Sesiones en vivo
Creando un traser bullet de PlatziSquare
Sesión de preguntas y respuestas
Release de Angular 5
Sesión de preguntas y respuestas
Angular Universal
Contenido Bonus
Actualización de angular, versión 6.0
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.
...
Regístrate o inicia sesión para leer el resto del contenido.
Aportes 115
Preguntas 5
Ordenar por:
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
- 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>
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 ';
}
buenas clases
app.component.ts
export class AppComponent {
title = 'PlatziSquare';
}
index.html
<html lang="es">
export class AppComponent {
title = 'PlatziSquare';
}
<html lang="es">
Algo simple, pero se realizo.
reto completado y entendido
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>
texto se cambio en Html
export class AppComponent {
title = 'PlatziSquare';
}
<h1>
Bienvenido a {{ title }}
</h1>
a mi no me sale he hecho los cambios y la pagina le cuesta cargar esta pensando ya lleva 2 minutos
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘PlatziSquare’;
}
se cambio en la ruta: src/app/app.component.ts
export class AppComponent {
title = 'platzisquare';
}
<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
// 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>
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';
}
<html lang="es">
export class AppComponent {
title = 'PlatziSquare';
}
Hola!! Comparto solución del primer reto del curso de angular 4
index.html
<<!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>>
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';
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Platzisquare';
}```
al abrir el component.html en el navegador me pone literal…
Welcome to {{ title }} !
es decir no me devuelve el valor contenido en title
si no me pone tal cual {{title}}
¿Cómo puedo insertar una imagen? :c
Hola, tengo mi solución como el resto de compañeros pero creo que el profesor debería indicar cuál es la solución correcta, porque las personas que no sabemos Angular ignoramos del tema. Investigue sobre el tema y he leido los comentarios de los compañeros, pero vuelvo y repito creo que el Profesor nos debería orientar por el mejor camino de la solución y no quedarnos con la interrogante.
1 . cambiar el contenido en el html del componente autogenerado por aungular cli
2 . cambiar el atributo title que se encuentra en el
component.ts
En el archivo llamado “app.component.html”, cambiar el texto de ingles a español:
<div style="text-align:center">
<h1>
Bienvenido {{ title }}!
</h1>
</div>
<h2>Aqui estan algunos enlaces que te ayudan a comenzar:</h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Guía de Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">Documentaciòn de CLI</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
</li>
</ul>
pequeño si, fácil para los noobs (yo) no
Se modifica el app.component.html (que se encuentra en source/app):
<!--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,">
</div>
<h2>Algunos links que te pueden ayudar: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Platzi</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Ayuda</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
exportclassAppComponent{
title = 'App Negocios';
}
exportclassAppComponent{
title = 'PlatziSquare ';
}
Para cambiar el nombre del app, modificamos el titulo que se encuentra en app.component.ts
Y para cambiar el idioma en la web, cambiamos en el index.html el lang a “es”.
<co<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Bienvenido al curso de Angular dictado por {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aquí te dejamos algunos enlaces para que comiences: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Recorrido de Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">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>
- Para el texto en Español en la carpeta src/app/app.components.html
Cambiamos la etiqueta h1 por esto:
<h1>
Bienvenido a {{ title }}!
</h1>
- Para el título no s dirigimos al archivo: src/app/app.component.ts
export class AppComponent {
title = 'Platzisquare';
}
export class AppComponent {
title = 'PlatziSquare';
}
Primeramente luego de crear el proyecto ng new platziSquare y al crear los componentes core en el *.html colocas el tag de
<html>lang=es</html>
Luego en el *.ts del core luego de la seccion de imports, la declaracion de los selectores y a donde apunta el html y css tenemos el
export class ALGO{
constructor() {}
title='PlatziSquare'
}
Con esto seteamos que el titulo de la pagina en la parte superior de tu pestaña del navegador diga platziSquare normalmente estas configuraciones aplican en el core general siempre son llamados app.component.html o app.component.ts.
export class AppComponent {
title = 'PlatziSquare';
}
Se debe modificar el texto manualmente al español.
Otra opción seria agregar localización, pero eso lo veremos mas adelante.
En este caso para la modificación del index en español, unicamente se debe modificar el lang del index como se indica en los comentarios
<<html lang="es">>
export class AppComponent {
title = 'PlatzySquare';
sms ='Happy new year';
}
<<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Bienvenido a {{ title }}!
</h1>
</div>
<h2>Algunos links que te ayudaran a comenzar: </h2>
>
export class AppComponent {
title = ‘platzisquare’;
}
En mi version tenia por defecto el titulo que le había colocado de nombre al proyecto.
export class AppComponent {
title = 'platzisquare';
}
Cambio realizado en:
\platzisquare1\src\app/app.component.html
<div style="text-align:center">
<h1>
Bienvenidos a {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,....">
</div>
<h2>He aquí unos links para comenzar: </h2>
<div style=“text-align:center”>
<h1>
Bienvenido a {{ title }}!
</h1>
</div>
export class AppComponent {
title = ‘escuela’;
}
En la ruta platzi square\src\app\app.component.ts
Cambiamos el título aquí:
export class AppComponent {
title = 'PlatziSquare';
}
src/app/app.componets.ts
export class AppComponent {
title = ‘platziSquare’;
}
src/app/app.componets.html
<h1>
Bienvenido a {{ title }}!
</h1>
src/index.html
<html lang=“es”>
- Texto en español:
Modificar el archivo app.component.html, cambiando el texto que se encuentra en ingles.
<!--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í hay algunos enlaces para ayudarte 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://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
- Nombre de la app:
Modificar el archivo app.component.ts, cambiando la variable title.
export class AppComponent {
title = 'meridasquare';
}
export class AppComponent{
title = ‘PlatziSquare’;
}
Yo modifique el el idioma desde el componente app.component.html, hay me permite ingresar los mensajes de mi app
index.html
<title>PlatziSquare</title>
app.component.ts
export class AppComponent {
title = 'PlatziSquare';
}
app.component.html
<h1>
Bienvenido a {{ title }}!
</h1>
<html lang="es">
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'PlatziSquare';
}
```
- Accedemos a la carpeta sr/app/app.component.html y modificar las etiquetas en ingles por español.
- Guardar todo, y recargar página.
- npm update y ng serve
export class AppComponent {
title = ‘Platzi Square’;
}
Hola a todos! Legue a la parte del reto! Muestro mi resultado:
- Cambiar titulo a español:
<h1> Bienvenidos a {{ title }}! </h1> - Cambiar nombre de app:
export class AppComponent {
title = ‘PlatziSquare’; }
Alguien podría decirme como hacer para subir una imagen? Aun no logro hacerlo!
Gracias!
En la carpeta “src” contiene la carpeta “app” en ella hay un archivo “ts” (typescript) ahi vinene la linea que se puede cambiar para el titulo.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Bienvenidos al reto de modificacion de PlatziSquare';
}```
Fue sencillo el cambio, aunque me costo un par de minutos navegar en el árbol del proyecto para identificar decía “Welcome”.
Estoy recién aprendiendo Angular y bueno, vengo de la programación web convencional donde todo estaba en un HTML puro. Y me confundi cuando encontre un montón de archivos incluso en el folder de app.
<!--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>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://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
Reto Cumplido:
<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>Aqui encontraras algunos links de ayuda: </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://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<h3>Que disfrutes tu aprenidzaje!</h3>
<router-outlet></router-outlet>```
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Transferencias internacionales';
}
Cambieee el titleeeeeeeeeeee nice
Angular 7: Modificqué el archivo en la carpeta app: app.component.ts
para modificar todo el texto en la ruta src/app/app.component.html
<!–<h2>Here are some links to help you start: </h2>–>
<h2>Aquí hay algunos enlaces para ayudarte a comenzar: </h2>
se hace manual.
y el titulo de bienvenida 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 = ‘Platzi Square’;
}
<div style=“text-align:center”>
<h1>
Bienvenido a {{ title }}!
</h1>
</div>
<title>PlatziSquare</title>
En src/app/app.component.ts cambio la linea del titulo
title = 'platzisquare';
Y listo
Complicado para los que no sabemos
Para cambiar el titulo cambié la parte del app component.ts
Para cambiar el idioma cambié a mano las partes del app.component.html
export class AppComponent {
title = 'platzisquare';
}```
**tambien cambiar los tests
it(`should have as title 'Platzisquare'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('Platzisquare');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Bienvenido a PlatziSquare!');```
app.component.html
<span>{{ title }} PlatziSquare!</span>
El archivo index.html muestra una etiqueta que llama a nuestro contenido, <app-root></app-root>, busqué en la carpeta app y encontré un archivo llamado app.component.html, ese es el que hay que modificar para que cambie el contenido de nuestra página.
Se modifico el archivo en app.component.html
Reto cumplido.
app.component.html
app.component.ts
index.html
el cambio en la variable dentro de TS app.components.ts
})
export class AppComponent {
title = ‘PlatziSquare’;
}
En mi version de Angular hay una carpeta llamada app. En dicha carpeta hay varios archivos de los cuales para lo que nos interesa destaca el app.component.html y el app.component.ts
app.component.html
<h1>
Bienvenido a {{ title }}!
</h1>
app.component.ts
export class AppComponent {
title = 'PlatziSquare';
}
<!--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>Aqui hay algunos enlaces para ayudarte a comenzar: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Gira de Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">Documentacion de CLI</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
Reto completado
<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 algunos enlaces que te pueden ayudar a empezar: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour de los héroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">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>
<router-outlet></router-outlet>
reto completado!
- cambiar el texto a español en el archivo: app.component.html
- cambiar el texto de app por platzisquare desde: app.component.ts
Reto completado:
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" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aquí hay algunos links para ayudarte a comenzar: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour de héroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">Documentación de CLI</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
</li>
</ul>
app.module.ts
export class AppComponent {
title = 'PlatziSquare';
}
Cumplido!
<!-- Next Steps -->
<h2>Next Steps, Teddy Sipra Morgado</h2>
<p>What do you want to do next with your app?</p>
<input type=“hidden” #selection>
en app.component.html , realice el cambio en la etiqueta <h1>
<h1>
Bienvenido a {{ title }}!
</h1>
Hago un cambio en el fichero src\app\app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Kaixo eta ongi etorri gure {{ title }} aplikaziora!
</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://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>```
Cumplido!
export class AppComponent {
title = ‘PlaztiSquare!’;
}
HTML
<h1>
{{title}}
</h1>
el titulo en compomemt.ts y el idioma en component.html
Listo
Import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘LOS MAPAS DE PLATZI’;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?