Angular: ngIf, else et variable

Article à garder sous le coude : https://ultimatecourses.com/blog/angular-ngif-else-then

Un exemple plus perso :

<div *ngIf="this.getState(m, d, i); else noVote; let state" >
    <app-weather-image [state]="state"></app-weather-image>
</div>
<ng-template #noVote>
     {{ 'NOTVOTED' | translate }}
</ng-template>

Quelques explications : *ngIf= »this.getState(m, d, i); else noVote; let state »

le *ngIf est assez classique mais après :

  • else noVote : indique si le est faux, on affiche le templace pointé par #noVote,
  • let state: stocke le résultat de la fonction. Ce qui est pratique car il est possible d’utiliser la variable dans la suite du template.

Attention cependant, c’est bien le résultat du test qui est stocké donc si le code est this.getState(m, d, i) > 0 dans cas state contiendra toujours true.

type=button

Parfois, un oubli peut faire perdre quelques neurones :



Sans cela, le bouton Cancel devient un bouton de validation du formulaire … ce qui pour un bouton Annuler est pas pratique …

[Angular] Init un service avant le chargement

Parfois, nous avons une classe de service qu’on aimerait bien charger AVANT les autres et sans qu’elle n’est de dépendance avec les autres. Si, ça arrive !

Par exemple dans un proto Electron/Angular :

  • J’ai une classe qui expose un Subjet/Observable,
  • Un service est à l’écoute de cet observable pour communiquer avec la couche electron,
  • La 2ème n’est référencée par personne car je ne souhaite pas que toute les classes aient un lien avec electron

Donc si, cela arrive. Un autre exemple (tirez du lien ci-dessous), on souhaite appeler un service de chargement de données AVANT la fin du chargement de l’application.

Pour ce faire, il est possible d’utiliser la notion suivante APP_INITIALIZER qui n’est pas forcément hyper bien documentée. Voici un lien qui explique tout bien comment qui faut faire :
How to call an asynchronous service before bootstrap ?

[Angular][NodeJS] Gestion des routes

Présentation

Un point qui peut devenir « embêtant » quand on associe Angular & NodeJs et que NodeJS « sert » l’application Angular: la gestion des routes.

En effet, comment faire la différence entre une route qui doit être gérée par NodeJS (l’API) et une route qui est gérée par Angular ? Il ne faudrait pas qu’un utilisateur reçoivent une erreur 404 de la part de NodeJs alors qu’il essaye d’accéder à une URL gérée par Angular.

Solution : ce qui n’est pas géré par Node renvoie vers Angular


app.get('*', (req, res) => {
    res.sendFile(path.join( __dirname + '/client/dist/index.html' ));
});

Cette route doit être intégrée après les différentes routes gérées dans NodeJS.

MEAN ? What’s that MEAN ? (Part 2)

Présentation

Suite de la semaine dernière …

Gestion du jeton

La semaine dernière, pour gérer la sécurité, JWT a été mis en place dans le projet via JSonWebToken et le code suivant dans le fichier contenant les routes de la partie authentification :


    /**
     * "Middleware" qui va intercepter les services AVANT certaines routes pour valider
     * que l'utilisateur est bien connecté
     */
    router.use((req, res, next) => {
        // Récupération du token
        const token = req.headers['authorization']; 
        // !token ?
        if (!token) { res.json({ success: false, message: 'No token provided' }); return; } 

        // Le token ayant été "crée" par jwt, on lui demande de recommencer le travail :)
        jwt.verify(token, config.secret, (err, decoded) => {
            if (err) { res.json({ success: false, message: 'Token invalid: ' + err }); return ;}

            // Ajout de ce qui a été décode (user._id) pour utilisation dans la suite du process
            req.decoded = decoded; 
            // Passage à la méthode suivante
            next(); 
        });
    });

.

En commençant le travail sur de nouvelles routes, j’ai constaté que l’accès aux routes demandait également le token. Ce que je n’avais pas identifié c’était que l’appel à router.use impliquant que ce test serait réalisé sur TOUTES les routes qui seraient définies après son ajout.

Donc comme les toutes sont enregistrés comme tel :


app.use('/authentification', authentication);
app.use('/blogs', blog);

toutes les routes « blogs » sont protégées. C’est bon à savoir et à garder dans un coin de la tête quand sur une application tu as une partie privée et publique …

MEAN ? What’s that MEAN ?

Introduction

Alors encore une fois, je rattrape mon retard technologique … Depuis plusieurs semaines (mois ?), je tombe régulièrement sur des articles / blog parlant de MEAN. Comme l’objectif de mes journées Off ou R&D est de découvrir, découvrons MEAN !

MEAN

Depuis des données, j’utilise LAMP et plus spécifiquement LAMPS : Linux, Apache, MySQL, PHP & Symfony :). MEAN se veut une autre plateforme composé de Mongo, Express, Angular(JS ou pas) et NodeJS.

Une petite description de chaque composant :

  • MongoDB : « base de données » NoSQL de type documentaire,
  • Express : Framework web pour NodeJS qui permet de créer des applications complètes ou des APIs,
  • AngularJS ou Angular : FrameWork Front End bien connu,
  • NodeJS : un runtime JS qui permet de faire tourner un serveur, d’exécuter des procédures, etc… Sa force est d’être non bloquant, performant. Il est associé à l’outil npm qui est une référence pour la gestion des dépendance (entre-autres)

BeerEDex

J’ai trouvé un tuto « rigolo » pour débuter pas forcément avec MEAN mais avec MEN (MongoDB, Express & NodeJS). Le sujet : faire un Pokedex ! Bon, moi, j’ai fait un BeerEDex ! Les liens :

Les éléments intéressants :

  • Mongoose : Un ODM pour MongoDB qui simplifie l’accès à la base MongoDB. C’est bien un ODM car MongoDB est base de données documentaires,
  • Nunjucks : Un framework de template qui (je trouve) ressemble beaucoup à Twig utilisé via Symfony,
  • Multer : Librairie qui permet de gérer les formulaires multipart/form-data qui vient compléter Express

Un peu de Docker

Sur la base du lien (ici), je me suis fait un fichier Docker pour être capable d’avoir une machine « web/nodejs » qui communique avec mongod en arrière plan. Pour ceux que cela vaut, mon fichier docker-compose :


version: "2"
services:
  web:
    image: devbieres/nodejs8
    volumes:
      - ./:/app
    ports:
      - "3000:3000"
    links:
      - mongo
    stdin_open: true
    tty: true
  mongo:
    image: mongo
    ports:
       - "27017:27017"
    volumes:
       - ./data:/data/db

Les différences avec le lien sont que :

  • j'utilise ma propre image nodejs
  • je mappe mongo avec un répertoire locale
  • je mets des options pour que la machine node reste en arrière plan

Blog

Allez c'est parti ! J'ai trouvé une série vidéo qui propose de créer un blog (as usual :))

  • Nodemon : Outil qui surveille les modifications dans le code et relance le serveur node/express. J'aurais aimé y pensé pendant BeerEDex 🙂
  • Génération d'un "secret" : const crypto = require('crypto').randomBytes(256).toString('hex');
  • La nouvelle version (4) d'Angular propose des messages d'erreur beaucoup plus clair en console comme via la page
  • require avec param : require('./routes/authentication')(router). Ce qui permet dans le module appelé : module.exports = (router) => { ... }
  • BodyParser : un gentil module d'express qui s'occupe de "parser" les données renvoyer par le front pour nous rendre les choses plus simples. Sympa !
  • BCrypt : librairie pour chiffrer et pas stocker les mots de passe en clair (ce qui est mal !)
  • NPM Cors : gestion des CROSS ORIGIN
  • JSONWebToken : Pour la gestion des tokens JWT du côté Back. Le truc bête qui fait perdre 5 minutes : les token se basent sur un secret qui est généré à chaque fois que le serveur est relancé ... donc les anciens tokens d'il y a deux minutes ne servent à rien.
  • Angular 2 Flash Messages: Petite librairie qui gère des messages simples envoyés à l'utilisateur
  • BootSwatch : Theme pour Boostrap
  • How to - Hoverable DropDown : comment faire simplement un bouton drop down

Liens