Les routes imbriquées sous Angular

Bonjour à tous,

Tout d’abord, non je ne suis pas mort ! 🙂 C’est juste que je n’ai trop pris le temps c’est dernier temps pour écrire. Mais je me rattrape avec cet article sur les routes sous angular7.

Mettre en place les routes « basiques » sous Angular7 est facile, il suffit de mettre dans le fichier app-routing.module.ts

, un code équivalent à : const routes: Routes = [
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'artists', component: ArtistComponent},
{path: 'login', component: LoginComponent},
{path: 'logout', component: LogoutComponent},
{path: '**', redirectTo: '/login'}
]

Ainsi, lorsqu’on va appeler http://localhost:4200/, on sera redirigé vers http://localhost:4200/#/login

C’est super, on a créé nos premières routes. Mais comment les utiliser ? Par exemple, lorsque l’utilisateur vient de s’authentifier, on veut le rediriger vers la page artist. Pour cela, dans la fonction de vérification d’authentification, lorsqu’elle est bonne on finit par une redirection vers artist. Le code ressemble à ça :
this.router.navigateByUrl('/artists');
Il faut noter la présence du / devant artist. Ca permet de dire qu’on recherche l’url à partir de la racine.

Ok, mais comment faire pour mettre en place des url imbriquées contenant l’id de l’artiste sélectionné ?

Déjà, l’intérêt de ce genre d’url est de pouvoir hiérarchiser les dépendances entre les différentes ressources. En gros, un artiste a un ou plusieurs albums, et chaque album a plusieurs chansons (pour faire simple). Donc, lorsqu’on est sur une chanson, on voudrait avoir une urls du style http://localhost:4200/#/artists/1/albums/3/sings/2. Comme ça, on sait qu’on a sélectionné l’artiste 1, l’album 3 et la chanson 2.

Pour mettre en place, des urls ressemblants à ça, il faut retourner dans le fichier app-routing.module.ts et mettre un code ressemblant à :
const routes: Routes = [
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'artists', component: ArtistComponent},
{
path: 'artist/:idArtist',
children: [
{path: '', redirectTo: 'artists', pathMatch: 'full'},
{path: 'artists', component: ArtistComponent},
{path: 'albums', component: AlbumComponent},
{path: 'albums/:idAlbum',
children: [
{path: '', component: AlbumComponent},
{path: 'sings',component: SingComponent},
{path: 'sings/:idSing',component: SingComponent}
]
}
]
},
{path: 'login', component: LoginComponent},
{path: 'logout', component: LogoutComponent},
{path: '**', redirectTo: '/login'}
];

Qu’avons nous fait ? Pour la route Artists, nous allons laissé le contrôleur, mais nous avons rajouté le fait qu’il pouvait y avoir une url de type : http://localhost:4200/#/artists/1. Dans ce cas là, le contrôleur ArtistComponent sera appelé, grâce à la ligne {path: 'artists', component: ArtistComponent},. Ca nous permettra par exemple d’afficher le détail d’un artist.
Lorsque l’url sera http://localhost:4200/#/artists/1/albums, le contrôleur AlbumComponent sera appelé, grâce à la ligne {path: 'albums', component: AlbumComponent}.
Pour appeler http://localhost:4200/#/artists/1, on pourrait imaginer que nous sommes dans un tableau qui liste tous les artistes et que pour chacun, il y a un bouton « Voir » :
<table>
<tr><th>Artiste</th><th></th></tr>
<tr *ngFor="let artist of artists">
<td>{{artist.name}}</td>
<td><a [routerLink]="['/artists', artist.id]">Voir</a></td>
</tr>
</table>

L’intérêt ici est le [routerLink]="['/artists', artist.id]". On a mis en première partie le début de l’url « /artists » et ensuite l’id qui sera injecté dans l’url construite. Ce qui nous permettra d’avoir en résultat : http://localhost:4200/#/artists/1.

De même, si nous voulons créer une url du style /#/artists/1/albums/2,
nous écririons un routerLink du style : [routerLink]="['/artists', artist.id, 'albums', album.id]".
Mais dans certains cas, nous voulons pouvoir créer ces urls directement depuis le contrôleur. Pour ce faire, il suffit d’ajouter dans le constructeur, le router: constructor(private router: Router) { }
, et là où nous voulons faire la rédirection : this.router.navigate(['/artists', artist.id, 'albums', album.id, 'sings', sing.id]);.
Ce qui génèrera une url ressemblant à : /#/artists/1/albums/3/sings/2

Le point d’attention de cet article se situe dans le fichier app-routing.module.ts.
En effet, souvent on trouve sur internet des tutoriels qui expliquent qu’il faut écrire un component par défaut juste avant de déclarer les enfants. Exemple :
path: 'artist/:idArtist',component: ArtistComponent,
children: [
{path: '', redirectTo: 'artists', pathMatch: 'full'},
....

En faisant ça, aucun contrôleur enfant ne sera appelé car le component par défaut interceptera toutes les requêtes commençant par « artists/… »

J’espère que cet article pourra aider certains d’entre vous et que vous n’allez pas vous embêter autant que moi pour trouver ça ! 😀

Carburmalin est sur android

Coucou à tous,

Je vous avais parlé ici du site Carburmalin, que j’ai fait.

Pour rappel, le site vous affiche une prévision de l’évolution du prix des carburants pour les 4 prochains jours.

Je me suis dis que ça pouvait vous intéresser de savoir que j’ai fait une application du même nom sur le play store. Vous pouvez la trouver ici.

Si vous avez des remarques ou des avis n’hésitez pas à me les envoyer ou de les laisser sur le store.

Carburmalin

Bonjour

Ça fait longtemps que je n’avais pas écris sur le blog. Aujourd’hui, je voudrais vous parler d’un projet perso : CarburMalin.

Site de prévision d'évolution du prix du carburant

Site de prévision d’évolution du prix du carburant


Le site vous permet d’avoir une idée de l’évolution du prix du carburant pour une station service des 4 prochains jours. Bien sur, pour ce faire, il faut qu’on ait des données liées à la station service. L’analyse probabilistique utilise des données open data et se base sur des IA maisons.

Comme il s’agit d’IA, ça se base sur des modèles mathématiques et donc l’erreur est toujours possible. Mais je fais des vérifications sur les prédictions passées et ce matin le taux de réussite était de 89%.

Et petit plus de ce site, il est gratuit !

N’hésitez pas à y faire un tour et à me dire ce que vous en pensez !

Edit du 12 décembre 2018 : CarburMalin est sur android et vous pouvez trouver l’article sur le sujet ici.

WasteBlasterz

Bonjour à tous,

Ce matin, je voulais vous parler de WasteBlasterz, un petit jeu développé par EDF Smart Electric Lyon et le studio Dowino, disponible sous Android et iOS.
Son sujet ? L’écologie.

En effet, vous devez chasser les wastivores, des petits monstres qui vivent grâce aux gaspillages des ressources. Pour éviter qu’ils ne réapparaissent à chaque nouvelle heure, il va falloir dépenser dans des améliorations énergétiques de la maison.
Par exemple, équiper les robinets de la maison en mousseur afin de réduire le gaspillage. Faire du composte, pour réduire les déchets.

Pour tuer les wastivores, il faut d’abord les trouver et les rendre visibles. Pour cela, il faudra répondre à des questions vastes mais toujours autour de l’environnement.

Bien sur, l’intérêt du jeu n’est pas dans la chasse aux wastivores, mais plutôt dans les connaissances apprises durant la partie.

Source : Numerama

Robot aspirateur Neato XV Signature

Bonjour,

Ca fait quelques temps que je n’avais pas écrit sur ce blog. Et oui, la routine prend vite le pas et il est difficile de trouver du temps.
Aujourd’hui, je vais vous faire un petit article sur les robots aspirateurs et plus précisément le Neato XV signature que j’ai pu tester.

Tout d’abord, il est possible de programmer pour chaque jour de la semaine si on veut que le robot passe et si oui à partir de quelle heure.
Lorsqu’il se lance, il commence par faire le tour de la pièce, en aspirant en même temps, ou si elle est trop grande la découpe en plusieurs parties. Il fait des tours de la zone en allant de l’extérieur vers l’intérieur et dès qu’il trouve un obstacle l’évite. L’intérêt de cette façon de faire est qu’il ne fait pas de déplacement aléatoire. Ça permet d’avoir des déplacements plus efficaces et surtout être sûr qu’il passera partout. L’inconvénient est que si vous êtes dans la pièce et que le robot vous évite, il ne repassera pas par cet endroit. Il vous a considéré comme un meuble. 🙂

Point sympathique, lorsqu’il est à court de batterie, il note son emplacement et retourne à sa base par le chemin le plus court et non pas par là où il est passé pour nettoyer. Une fois chargé, il retourne là où il s’était arrêté dans son nettoyage et reprend son travail.

L’avant du robot est plat afin de lui permettre d’aller au plus près des coins et des plinthes, ce qui lui permet d’être plus efficace qu’un robot rond.

Avec le robot, il est fourni une bande magnétique, découpable, qui permet d’empêcher au robot de passer là où elle se trouve. Sa forme lui permet d’être glissée sous une barre de seuil pour lui bloquer l’accès à une pièce.

Point négatif, le bruit ! Lorsqu’il se lance, il fait autant de bruit (voir un peu plus) qu’un aspirateur classique et il est plus lent qu’un humain. Ce qui fait que le bruit dure plus longtemps.
Il n’aime pas les câbles, les tapis avec des franges et les espaces qui font sa largeur. Pour les deux premiers, il se prend dedans et reste bloqué. Pour le dernier, il avance mais n’arrive pas à sortir car il cherche à faire demi-tour et reste bloqué.
Concernant les câbles ou les franges de tapis, lorsqu’il sent une résistance dans la brosse, il s’arrête au lieu de forcer, ce qui fait qu’il est très facile de le débloquer. On n’a pas à démêler des câbles enroulés dans la brosse. On a juste à le soulever et tirer, doucement, sur le câble pour le retirer.

Tous les soirs où le robot fonctionne, il faut penser à vider le bac pour éviter des pertes d’aspiration et donc qu’il force sur le moteur. Ca va vite et ça permet de vérifier qu’il ne tourne pas pour rien.

En résumé, malgré son prix, je trouve que ce robot est un bon investissement qui vous fera gagner pas mal de temps pour l’entretien de la maison. Mais, pour son efficacité et votre tranquillité, je vous le conseille si vous n’êtes pas à la maison lorsqu’il fonctionne, où tout du moins pas dans la pièce où il travaille.