Discussion :

[pcouas]

Bonjour

L'un d'entre vous à t'il utilisé ANGULAR avec PUG ?
Mon API de composant est KENDO pour Angular

Merci de vos réponses
Phil

[dukoid]

heuu non
c'est koi le pb ?

[pcouas]

Bonjour

Jusqu'a present j'avais prévu d'utiliser BOOTSTAP5 car je migre une application en BOOTSTRAP3 et ANGULARJS vers ANGULAR12/13
J'ai une nouvelle collègue qui souhaiterais utiliser PUG que je ne connais pas
Mon soucis est que je dois m'assurer qu'avec les composants Angular de KENDO cela va fonctionner avant de lui dire oui
Je cherche donc des informations
Merci

[dukoid]

c'est quoi PUG ?

kendo ok

sinon tu peux voir du coté d'angular material qui est gratuit

il faut faire l'inventaire des composants de l'ancienne version et voir si ils sont présent dans la liste des composants de kendo ou material ....
à mon avis ça devrait être positif pour les 2 !

[pcouas]

bonjour

pour PUG
https://blog.ippon.fr/2018/07/03/introduction-a-pug/

pour Kendo, cela m'est imposé

le message d'erreur en Angular12

Error: src/app/app.component.pug:26:2 - error NG5002: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

[dukoid]

pour quelles raisons pug et pas autres choses ?
si je sais pourquoi, je pourrais peut etre t'orienté sur des solutions plus adaptés

parceque ça m'a l'air complexe et inutile ce pug

[pcouas]

Bonjour

Le Pug m"est proposé par un des dev junior qui vient de rentrer dans l’équipe, perso je ne connaissais pas.
J'essaye de m'informer pour voir si cela est utile, mon but initial était de migrer une charte graphique écrite en bootstrap3

[krakatoa]

utilises les standard comme angular material !

pour les grilles css, utilises flexbox et en plus, eventuellement css grid. se sont des standards !

flexbox: pour mettre en page des flux de données (liste de produit...)
css grid: pour créer un gabarit (header, content, footer...)


pug n'a rien à faire dans un projet angular

[NoSmoking]

Bonjour,
PUG est un « convertisseur » de code en code HTML conforme. Écrire moins là où le code HTML est verbeux.

Il suffit de regarder la documentation officielle pour en voir les possibilités.

J'essaye de m'informer pour voir si cela est utile, mon but initial était de migrer une charte graphique écrite en bootstrap3

PUG ne te servira à rien, il ne résoudra pas pour toi les soucis CSS que tu peux rencontrer.

Tu auras par exemple :

Code pug :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
section
  p.first-paragraph Texte du 1st paragraph
  p.second-paragraph.autre-classe Texte du 2nd paragraph

qui donneras

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<section>
  <p class="first-paragraph">Texte du 1st paragraph</p>
  <p class="second-paragraph autre-classe">Texte du 2nd paragraph</p>
</section>

mais pas mieux.

J'ai une nouvelle collègue qui souhaiterais utiliser PUG que je ne connais pas

Je ne connais pas en profondeur PUG mais cela peut effectivement te permettre d'« accélerer » l'écriture des composants mais avec de grosses restrictions quand même.

Demande par exemple à ta nouvelle collègue comment elle écrirait en PUG le src/app/hero-list.component.html pour obtenir le résultat de la documentation.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<h2>Hero List</h2>
<p><i>Select a hero from the list to see details.</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

On trouve des PUG to HTML voire des HTML to PUG.

Cela peut donc être une aide pour écrire moins pour faire plus (tiens cela me rappelles quelque chose) mais je présume que vous avez des conventions d'écriture et c'est celles-ci qu'il faut respecter.