azaharafernandezguizan

import {RouterConfiguration, Router} from 'aurelia-router';
import {PLATFORM} from 'aurelia-pal';

export class App {
  router: Router;

  configureRouter(config: RouterConfiguration, router: Router): void {
    this.router = router;
    config.title = 'Aurelia';
    config.map([

azaharafernandezguizan

<template>
  <require from="./styles.css"></require>

  <div class="menu">
    <ul  repeat.for="nav of router.navigation">
      <li class="${nav.isActive ? 'active menuButtons' : 'menuButtons'}"><a class="menuLink" href.bind="nav.href">${nav.title}</a></li>
    </ul>  
  </div>

  <div class="mainContent">

azaharafernandezguizan

export class IgNobel {
    IgNobleID: number;
    Categoria: string;
    Descripcion: string;
    Anio: string;
        
    constructor(IgNobleID: number, Categoria: string, Descripcion: string, 
                Anio: string) {
        this.IgNobleID = IgNobleID;
        this.Categoria = Categoria;

azaharafernandezguizan

import { IgNobel } from './../models/IgNobel';
import { inject, NewInstance } from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(NewInstance.of(IgNobel))
export class IgNobelService {
    private http: HttpClient = null;
    public data : IgNobel[];

    constructor() {

azaharafernandezguizan

<template>

    <div show.bind = "igNobelRandomList.length >0" class="IgNobelDiv">
        <div repeat.for="igNobel of igNobelRandomList" class="igNobelList ${igNobel.categoria}">
            <span>${igNobel.anio}</span><br/>
            <span class="igNobelCategoria">${igNobel.categoria}</span><br/>
            <span>${igNobel.descripcion}</span><br/>
        </div>
    </div>
    <button click.delegate = "moreIgNobel()">Más IgNobels</button>

azaharafernandezguizan

import { IgNobel } from './models/IgNobel';
import { inject } from 'aurelia-framework';
import { IgNobelService } from './services/IgNobel-service';

@inject(IgNobelService)
export class Fun {

  igNobelService : IgNobelService;
  igNobelRandomList : IgNobel[];
  igNobelTotalData: IgNobel[];

azaharafernandezguizan

/**Fun content**/
.igNobelList{
    margin: 1.5%;
    padding:1%;
    border-radius: 19px 19px 19px 19px;
    -moz-border-radius: 19px 19px 19px 19px;
    -webkit-border-radius: 19px 19px 19px 19px;
    border: 0px solid #000000;
}

azaharafernandezguizan

import { Injectable, } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { RoomDetail } from 'src/app/_models/rooms.model';
import { RoomService } from 'src/app/_services/room.service';

@Injectable()
export class MagicalLessonsResolver implements Resolve<RoomDetail> {
  constructor(

azaharafernandezguizan

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MagicalLessonsListComponent } from './magical.lessons.list.component';
import { MagicaLessonsComponent } from './magical.lessons.component';
import { MagicalLessonsResolver } from './magical.lessons.resolver';

const routes: Routes = [
  {
    path: '',
    component: MagicalLessonsListComponent    

azaharafernandezguizan

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule} from '@angular/forms';
import { MagicaLessonsComponent } from './magical.lessons.component';
import { MagicalLessonsListComponent } from './magical.lessons.list.component';
import { MagicalLessonsResolver } from './magical.lessons.resolver';

@NgModule({
  imports: [
    CommonModule,