Articles

Tutoriel Angular / Spring / Java - partie 2

Tutoriel Angular / Spring / Java - partie 2 Dans l'article précédent nous avons vu comment créer un squelette d'application de Kanban basique avec Angular. Dans cet article nous allons rendre ce kaban utile en permettant de changer l'état des tâches (A faire, en cours et Fini). Par ailleurs nous allons créer des tests unitaires pour un service. Drag And Drop Commençons par ajouter la fontion de drag and drop pour permettre la modification des tâches (TODO vers DOING, etc). Pour ceci nous allons utiliser Angular Material (cf https://material.angular.io/cdk) : yarn add @angular/material @angular/cdk @angular/animations Ajouter les modules BrowserAnimationsModule et DragDropModule dans app.mosule.ts : import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {DragDropModule} from '@angular/cdk/drag-drop'; @NgModule({   declarations: [     AppComponent,     CarteComponent,     DetailCarteComponent   ],   imports: [     Br

Tutoriel Angular / Spring / Java - partie 1

Image
Tutoriel Angular / Spring / Java - partie 1 Dans cette série d'articles nous allons créer un Kanban basique. Le but étant de mettre en pratique la dernière version d'Angular (v8 au moment de rédaction de l'article), Spring pour le backend et PostgreSQL pour la partie bdd. Par la suite nous ajouterons une fonctionnalité de chat pour rendre le dashboard plus pratique. Le tutoriel est prévu pour Linux mais tout peut fonctionner sous Windows. Prérequis : - Nodejs - Npm - Visual Studio Code (ou un autre IDE comme IntelliJ) Commençons par le setup basic Le tuto nécessite npm installé en local globalement (cf le site de npm) Installer ou mettre à jour npm sudo npm install -g npm Installer angular dans le projet : sudo npm install -g @angular/cli Créer un nouveau projet angular : ng new kanban (laisser les valeurs par défaut) Normalement voici l'arborescence à ce stade : Actuellement le typescript du composant principal contient le minimum néce

Ajouter la coloration syntaxique proprement dans Blogger

Image
Si Blogger permet de copier / coller du code dans un article, et d'afficher la coloration syntaxique directement, le code html généré de l'article n'est pas "propre" : chaque ligne comporte des balises "style" particulières ajoutées automatiquement pour permettre le rendu du code. On peut faire mieux en utilisant Highlight.js Pour ce faire, aller dans Thème dans la barre de menu de gauche (en partant du principe que vous avez déjà choisi un thème), et cliquer sur "Modifier le code html". Coller ce code à la fin de la balise "head" : <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/default.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> Ici le code de highlight est récupéré de cloudflare (qui est un CDN), et il est