Semana 5 Angular Rutas y Controladores

1. DEFINICION DE
RUTAS Y
CONTROLADORES
Mg. Richard E. Mendoza G.

3. https://www.youtube.com/watch?v=RedH0yFmWUw

5. 5
• En el archivo app-routing-module.ts se
encuentra un objeto Route el cual sirve
para incrustar las rutas del proyecto.
• Además, debemos importar los
decoradores que hacen referencia a los
componentes.
• En el app-component debemos llamar al
tab
• <router-outlet></router-outlet> el cual
carga el componente indicado según su
ruta.
RUTAS EN ANGULAR
La sintaxis dentro del route:
{
path = ‘routeName’,
component = componentName
}
ng g c home
ng g c products
ng g c contact
//app-routing-module.ts
import { HomeComponent } from './home/hom
e.component';
import { ProductsComponent } from './prod
ucts/products.component';
import { ContactComponent } from './conta
ct/contact.component';
const routes: Routes = [
{
path: 'home',
component: HomeComponent},
{
path: 'products',
component: ProductsComponent},
{
path: 'contact',
component: ContactComponent},];
//app.component.html
<router-outlet></router-outlet>

6. 6
• Los módulos y rutas sirven para dividir y
abstraer mejor por dominio la aplicación.
• Los componentes que hacen parte de una
página en particular se pueden
encapsular en un mismo módulo.
• Los módulos especiales son core y
shared.
• Core: guarda todos los servicios y
componentes que usaremos a lo largo de
todos los otros módulos.
• Shared: podemos almacenar
componentes y servicios compartidos.
NGMODULE
ng g c header
ng g c footer
ng g c banner

7. https://swiperjs.com/
npm install swiper --save

8. 8
• Swiper es el control deslizante táctil
móvil gratuito más moderno con
transiciones aceleradas por hardware y
un comportamiento nativo sorprendente.
Está destinado a ser utilizado en sitios
web móviles, aplicaciones web móviles y
aplicaciones móviles nativas / híbridas.
• Swiper no es compatible con todas las
plataformas, es un control deslizante
táctil moderno que se enfoca solo en
aplicaciones / plataformas modernas para
brindar la mejor experiencia y simplicidad
SWIPER
npm i swiper
npm i ngx-swiper-wrapper
//angular.json o "./node_modules/swiper/s
wiper-bundle.css",
"root": "",
...
"styles": [
** "./node_modules/swiper/css/sw
iper.min.css",**
"src/styles.scss"],}},
//banner.component.ts
images: string[] = [
'assets/images/banner-1.jpg',];
//banner.component.html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-
slide" *ngFor="let img of images">
<img [src]="img" alt="" />
<div class="swiper-button-
next"></div>
<div class="swiper-button-
prev"></div></div></div></div>
//home.component.ts
import { Component, OnInit, AfterViewInit
} from '@angular/core';
import Swiper from 'swiper';
export class HomeComponent implements OnI
nit, AfterViewInit {
mySwiper: Swiper;constructor() { }
ngOnInit() {}
ngAfterViewInit() {
this.mySwiper = new Swiper('.swiper-
container');}}

9. 9
• routerLink: esta directiva, que viene del
módulo routerModule, se usa en
sustitución del atributo estándar href. La
directiva instruye al navegador para qué
no solicite la ruta al servidor, sino que el
propio código local de JavaScript se
encargará de procesarla.
• routerLinkActive: esta directiva tiene la
función de aplicar una clase cuando la
ruta se encuentre activa, así mismo esta
directiva se aplica en el elemento padre
que contiene el routerLink
routerLink y routerActive
<a [routerLink]="[ 'home', 'location', '1', 'hero' ]">Hero</a>
<li routerLinkActive="active">
<a [routerLink]="[ 'home' ]">Home</a>
</li>
<!--header.component,html-->
<nav>
<a routerLink="/home" routerLinkActiv
e="active">Home</a>
<a routerLink="/products" routerLinkA
ctive="active">Products</a>
<a routerLink="/contact" routerLinkAc
tive="active">Contact</a>
</nav>
/*header.component.scss*/
nav > a {
padding: 5px;
text-decoration: none;}
nav > a.active {
background-color: blue;}

10. https://colorlib.com/wp/free-404-error-page-templates/

11. 11
• A veces existen componentes que se
utilizan en varios otros componentes,
para esto existe la técnica de vistas
anidadas, la cual consiste en crear un
componente que albergue los elementos
que se repiten y los otros componentes
que los utilizan serán rutas hijas del
componente creado anteriormente.
• Primero creamos el componente que
almacena los elementos con el comando
‘ng g c layout’.
Modulo con vistas anidadas
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
import { PageNotFoundComponent } from './
page-not-found/page-not-found.component';
import { LayoutComponent } from './layout
/layout.component';
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: '',
redirectTo: '/home',
pathMatch: 'full',},
{
path: 'home',
component: HomeComponent},
{
path: 'contact',
component: ContactComponent},]},
{
path: '**',
component: PageNotFoundComponent}];

12. https://material.angular.io/