Conectando nuestras pantallas con el router de Angular

Clase 26 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Tomar examen

Comentarios

Alonso Alejandro Zúñiga Beltrán

student•

En app.component.css es opcional poner:

[ng-reflect-router-link] {
  cursor: pointer;
}

[ng-reflect-router-link]:focus {
  outline: 0 !important;
}

Carlos Enrique Ramírez Flores

student•

thanks!!

Gustavo Casimiro Pinzon

student•

para que tenga el icono de la mano , como un link nornal,para mi fue mas facil poner directamente el estilo en el span
style=“cursor: pointer”

Sergio Toshio Minei

student•

Routing

Lo primero que se debe de hacer para definir rutas es agregar el Routing en el app.module.

import { Routing } from './app.routing';

@NgModule({
  //...
  imports: [
    Routing
  ]
  //...
})
export class AppModule { }

Luego, para definir rutas dentro de Angular, se va a crear el archivo app.routing.ts.

En ese archivo, se va a importar Routes y RouterModule y se van a definir las rutas con sus respectivos componentes.

import { Routes, RouterModule } from '@angular/router';
import { QuestionListComponent } from './question/question-list.component';
import { SigninScreenComponent } from './auth/signin-screen-component';
import { SignupScreenComponent } from './auth/signup-screen.component';

const APP_Routes: Routes = [
  { path: '', component: QuestionListComponent, pathMatch: 'full' },
  { path: 'signin', component: SigninScreenComponent },
  { path: 'signun', component: SignupScreenComponent }
];

export const Routing = RouterModule.forRoot(APP_Routes);

Para usar las rutas en el HTML, se hace de la siguiente manera:

router-outlet: Define el lugar en donde se va a cargar el componente definido en app.routing.ts dependiendo de la url.
routerLink: define a dónde va redirigir al hacer click.

<mat-toolbar color="primary">
  <span [routerLink]="['/']">PlatziOverflow</span>
  <span class="space"></span>
  <mat-icon [routerLink]="['/signin']">account_circle</mat-icon>
</mat-toolbar>
<router-outlet></router-outlet>

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Walter Lensinas

student•

Código del proyecto:

Andres Alvarez

student•

Otra opción para darle un poquito de estetica es

<mat-toolbar color="primary">
  <a  [routerLink]="['/']">PlatziOverflow</a>
  <span class="spacer"></span>
  <a [routerLink]="['/Signin']"><mat-icon >account_circle</mat-icon></a>
</mat-toolbar>
<router-outlet></router-outlet>

a {
  text-decoration: none;
  color: white;
}

import { Routes, RouterModule } from '@angular/router';
import { QuestionListComponent } from './question/question-list.component';
import { SigninScreenComponent } from './auth/signin-screen-component';
import { SignupScreenComponent } from './auth/signup-screen.component';

const APP_Routes: Routes = [
  { path: '', component: QuestionListComponent, pathMatch: 'full' },
  { path: 'signin', component: SigninScreenComponent },
  { path: 'signun', component: SignupScreenComponent }
];

export const Routing = RouterModule.forRoot(APP_Routes);

<mat-toolbar color="primary">
  <span [routerLink]="['/']">PlatziOverflow</span>
  <span class="space"></span>
  <mat-icon [routerLink]="['/signin']">account_circle</mat-icon>
</mat-toolbar>
<router-outlet></router-outlet>

<mat-toolbar color="primary">
  <a  [routerLink]="['/']">PlatziOverflow</a>
  <span class="spacer"></span>
  <a [routerLink]="['/Signin']"><mat-icon >account_circle</mat-icon></a>
</mat-toolbar>
<router-outlet></router-outlet>

Conectando nuestras pantallas con el router de Angular

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta