04. Squelette HTML et styles de l’application

Avant de gérer nos séries, nous allons mettre en place un visuel plus agréable en structurant le HTML et en écrivant quelques lignes de CSS.

Le module show

Avant de mettre en place le menu de navigation, nous allons mettre en place le module show de la même manière que le module home. Nous renommerons seulement le nom des éléments.

Le composant permettant d'afficher la liste des séries:

//src/show/components/show-list.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'show-list',
    templateUrl: './app/show/components/show-list.component.html'
})
export class ShowListComponent {

}

Sa vue HTML:

<!--src/show/components/show-list.component.html-->
<h1>Shows <small>List</small></h1>

Et enfin, le module qu'il ne faudra pas oublier d'inclure dans AppModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { ShowListComponent } from './components/show-list.component';

const showRoutes: Routes = [
    {
        path: 'shows',
        component: ShowListComponent
    }
];

@NgModule({
    imports:[CommonModule, RouterModule.forChild(showRoutes)],
    declarations:[ShowListComponent]
})
export class ShowModule{}

Squelette HTML de l’application

Nous allons retourner dans le composant parent de l'application afin de définir un squelette HTML que nous styliserons. Nous le décomposerons en deux partie: un en-tête contenant le titre et le menu de navigation, puis un contenu où seront injectés les sous composants.

<div id="main">
    <div id="top">
        <div id="header-right">
            <a routerLink="/home" class="button primary large">Home</a>
            <a routerLink="/shows" class="button primary large">Shows</a>
        </div>
        <div id="header-left">
            <span class="title">ShowTheque</span>
        </div>
    </div>
    <div id="content">
        <router-outlet></router-outlet>
    </div>
</div>

Pour créer un lien avec le router, il faut utiliser l’attribut routerLink et lui spécifier comme valeur, le chemin.

CSS personnalisé de l’application

A la suite des imports dans le app.scss, ajoutons quelques règles pour mettre en page ce HTML. J'utilise ici les flexbox pour afficher un menu en haut et un contenu qui prend tout le reste de la page.

#main {
    height: 100%;
    display: flex;
    flex-direction: column;
    &>#top {
        flex: 0 0 auto;
        background-color: $black;
        display: flex;
        flex-direction: row-reverse;
        color: $white;
        &>#header-left {
            flex:1 0 auto;
            & span.title {
                font-weight: bold;
                font-size: map-get($button-sizes, large);
                display: inline-block;
                padding-top: get-side($button-padding, top);
                padding-left: get-side($button-padding, left);
            }
        }
    }
    &>#content {
        flex:1 0 auto;
        padding-top: 20px; 
    }
}

Les variables $button-sizes et $button-padding proviennent de Foundation. je les utilise plutôt que des valeurs en dur, pour être plus propre et ne pas avoir de problème en cas de mise à jour

Conclusion

Nous avons maintenant une mise en page agréable. On va pouvoir dans la prochaine leçon, entrer dans le vif du sujet et lister nos séries.