Aggiungi pagine al tuo sito Web Angular utilizzando i file Markdown

Inizia a creare i contenuti del tuo sito in Markdown e sfrutta la sua sintassi più pulita e gestibile.

Markdown è un formato popolare per la scrittura di contenuti web. Il suo compromesso tra HTML e inglese semplice consente agli scrittori di utilizzare una sintassi più familiare. Può aiutare notevolmente a facilitare la gestione quotidiana di blog con più autori e siti simili.

Markdown può essere particolarmente utile se desideri creare un blog o avere più pagine Web con contenuti. L'uso dei file Markdown ti consente di concentrarti maggiormente sul contenuto, piuttosto che sul codice attorno a quel contenuto.

Puoi integrare Markdown con Angular utilizzando il pacchetto del nodo ngx-markdown e configurandolo per funzionare all'interno di un componente.

Configurazione di un'applicazione Angular

Se non disponi già di un'applicazione Angular, puoi scaricare questa applicazione Angular di esempio da GitHub.

Nella pagina del progetto su GitHub, fai clic sul pulsante Codice. Seleziona Scarica ZIP.
Decomprimi la cartella sul tuo computer locale.
Apri il progetto utilizzando un IDE, come Visual Code, Notepad++ o Sublime Text. Se stai utilizzando un IDE, puoi utilizzare un terminale integrato per eseguire tutti i comandi necessari.
Passare alla cartella principale del progetto utilizzando un terminale. Il nome della cartella principale è muo-sample-angular-app-main e contiene le cartelle e2e e src . Ad esempio, se il tuo progetto si trova nella cartella "Download", esegui il comando seguente per accedere alla cartella.
```
cd C:\Users\Sharl\Downloads\muo-sample-angular-app-main
```
Installa i moduli del nodo nel progetto. Se non riesci a eseguire i comandi del nodo, potrebbe essere necessario installare Node.js sul tuo computer.
```
npm install
```
Ora puoi avviare l'applicazione Angular. Esegui il comando seguente nella cartella principale del progetto.
```
ng serve
```
Dopo aver eseguito il comando ng serve, attendi che il progetto finisca di compilare. Una volta terminato, la riga di comando restituirà l'indirizzo locale su cui verrà eseguita l'app Angular. Di solito si trova su http://localhost:4200/.
Apri un browser web e inserisci l'indirizzo che ospita il tuo sito, ad esempio http://localhost:4200/. Una volta caricata la pagina, dovresti essere in grado di vedere la home page dell'applicazione angolare di esempio.

Come installare Ngx-Markdown nella tua applicazione Angular

Per poter utilizzare i file Markdown nella tua applicazione Angular, dovrai installare il pacchetto ngx-markdown.

Nella cartella principale del tuo progetto, esegui il seguente comando nel terminale. Assicurati che la versione del pacchetto ngx-markdown sia compatibile con la tua versione Angular.
```
npm install ngx-markdown@^10.1.1 --save
```
Apri il file app.module.ts. Questo file si trova nella cartella project/src/app.

Configura il nuovo modulo Markdown. Importa i seguenti pacchetti:

import { SecurityContext } from '@angular/core';
import { MarkdownModule } from 'ngx-markdown'; 
import { HttpClientModule, HttpClient } from '@angular/common/http';

Aggiungi il modulo Markdown all'array imports.

imports: [
    ...
    HttpClientModule, 
    MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE }) 
],

Come creare i tuoi file Markdown

Ogni file Markdown rappresenterà una pagina di contenuto per il tuo sito web. Dovrai creare una cartella in cui archiviare i file Markdown e compilare i file Markdown con i contenuti.

Passare alla cartella assets, che si trova nella cartella project/src .
Crea una nuova cartella denominata post.
Crea più file Markdown. I file Markdown utilizzano un'estensione .md.

Compila i file .md con alcuni contenuti formattati nella sintassi Markdown. Ecco alcuni contenuti di esempio che puoi utilizzare:

#### 03 June 2022
# Delicious Chocolate Recipe
___
This is how you make an awesome Chocolate Cheesecake:
* Crush the biscuits, mix with butter.
* Let it set in the fridge for 10 minutes.
* Mix some cream with syrup.
* Put it on top of the biscuits then put it back in the fridge.

Come eseguire il rendering del file Markdown in un componente

Dovrai elencare ciascuno di questi file nella home page dell'applicazione, in modo da poterli raggiungere.

Apri il file home.component.html . Questo file si trova nella cartella project/src/app/home.

Aggiungi collegamenti alle tue nuove pagine Markdown. Dovresti costruire i tuoi collegamenti in base al nome dei tuoi file Markdown. Ad esempio, se avessi un file Markdown chiamato "Recipe.md", l'URL della pagina sarà "/posts/post/Recipe".

<div class="links">
    <a routerLink="/posts/post/ChocolateCheesecakeRecipe" style="margin-bottom:24px">Chocolate Cheesecake Recipe >></a>
    
    <a routerLink="/posts/post/StrawberryCheesecakeRecipe" style="margin-bottom:24px">Strawberry Cheesecake Recipe
        >></a>
    
    <a routerLink="/posts/post/CaramelCheesecakeRecipe" style="margin-bottom:24px">Caramel Cheesecake Recipe >></a>
</div>

Aggiungi uno stile ai collegamenti:

.links {
  padding: 72px;
  text-align: center;
}

Crea un altro componente che puoi utilizzare come pagina separata. Questa pagina dovrebbe essere in grado di eseguire il rendering di qualsiasi file Markdown. Nel terminale, esegui il seguente comando ng generate per creare un nuovo componente:
```
ng g c home/posts
```
Ora dovrebbero essere generati quattro nuovi file all'interno della nuova cartella "post". Ciò include "posts.component.html", "posts.component.css", "posts.component.ts" e "posts.component.spec.ts".
Apri il file posts.component.html e aggiungi il codice HTML per eseguire il rendering dei file Markdown.
```
<div style="padding:100px" markdown [src]="post"></div>
```
Apri il file posts.component.ts . Aggiungi l'importazione del percorso.
```
import { ActivatedRoute } from '@angular/router';
```

Sostituisci le funzioni costruttore e ngOnInit() con il codice TypeScript per eseguire il rendering dei file Markdown. Questo prenderà il nome dell'articolo nel collegamento URL e verrà indirizzato al file Markdown corrispondente archiviato nella cartella delle risorse.

post: string; 
href: string; 
constructor(private route: ActivatedRoute) { } 
ngOnInit(): void {
    let articleName = this.route.snapshot.paramMap.get('article'); 
    this.href = window.location.href; 
    this.post = './assets/posts/' + articleName + '.md'; 
}

Apri il file app-routing.module.ts. Questo file si trova nella cartella project/src/app.

Importa il nuovo componente post e aggiungilo all'array delle rotte.

import { PostsComponent } from './home/posts/posts.component';
const routes: Routes = [
  // ...
  { path: 'posts/post/:article', component: PostsComponent }, 
];

Ora puoi avviare nuovamente l'applicazione Angular.
```
ng serve 
```
Visita http://localhost:4200 o qualsiasi indirizzo che ospita il tuo sito.
Fare clic su uno dei collegamenti della pagina. Ora dovresti vedere il rendering del contenuto Markdown su una pagina separata.
Puoi scaricare un esempio funzionante dalla pagina del progetto GitHub. È possibile seguire le istruzioni nel file README per scaricare ed eseguire il progetto.

Utilizzo di Markdown nella tua applicazione Angular

L'utilizzo dei file Markdown sul tuo sito web ti consente di concentrarti maggiormente sui tuoi contenuti. Questo può essere molto utile per i siti Web di blog. Se disponi di un'applicazione Angular, puoi utilizzare i file Markdown per le tue pagine Web utilizzando il pacchetto del nodo ngx-markdown.