ObsiViewer/docs/URL_STATE/URL_STATE_QUICK_START.md

UrlStateService - Démarrage Rapide (5 minutes)

🚀 En 5 minutes

Étape 1: Injecter le service dans AppComponent (1 min)

// src/app/app.component.ts
import { Component, inject } from '@angular/core';
import { UrlStateService } from './services/url-state.service';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `...`
})
export class AppComponent {
  private urlStateService = inject(UrlStateService);
  // C'est tout! Le service s'initialise automatiquement
}

Étape 2: Utiliser dans NotesListComponent (2 min)

// src/app/features/list/notes-list.component.ts
import { Component, inject } from '@angular/core';
import { UrlStateService } from '../../services/url-state.service';

@Component({
  selector: 'app-notes-list',
  standalone: true,
  template: `
    <!-- Afficher le filtre actif -->
    <div *ngIf="urlState.activeTag() as tag">
      Filtre: #{{ tag }}
    </div>
    
    <!-- Ouvrir une note -->
    <button *ngFor="let note of notes"
            (click)="selectNote(note)">
      {{ note.title }}
    </button>
  `
})
export class NotesListComponent {
  urlState = inject(UrlStateService);
  
  selectNote(note: Note): void {
    this.urlState.openNote(note.filePath);
  }
}

Étape 3: Tester les URLs (2 min)

Ouvrez votre navigateur et testez:

# Ouvrir une note
http://localhost:4200/viewer?note=Docs/Architecture.md

# Filtrer par tag
http://localhost:4200/viewer?tag=Ideas

# Filtrer par dossier
http://localhost:4200/viewer?folder=Notes/Meetings

# Rechercher
http://localhost:4200/viewer?search=performance

✅ Vérification

• Le service est injecté dans AppComponent
• NotesListComponent utilise le service
• Les URLs fonctionnent
• L'état est restauré après rechargement

📚 Prochaines étapes

1. Lire la documentation complète

   • docs/URL_STATE_SERVICE_INTEGRATION.md

2. Voir les exemples

   • src/app/components/url-state-integration-examples.ts

3. Intégrer dans d'autres composants

   • NoteViewComponent
   • FoldersComponent
   • TagsComponent
   • SearchComponent

4. Ajouter le partage de lien

   async shareCurrentState(): Promise<void> {
     await this.urlState.copyCurrentUrlToClipboard();
     this.toast.success('Lien copié!');
   }
   

🎯 Cas d'usage courants

Ouvrir une note

await this.urlState.openNote('Docs/Architecture.md');

Filtrer par tag

await this.urlState.filterByTag('Ideas');

Filtrer par dossier

await this.urlState.filterByFolder('Notes/Meetings');

Rechercher

await this.urlState.updateSearch('performance');

Réinitialiser

await this.urlState.resetState();

🔍 Signaux disponibles

// État actuel
urlState.currentState()

// Note ouverte
urlState.currentNote()

// Tag actif
urlState.activeTag()

// Dossier actif
urlState.activeFolder()

// Quick link actif
urlState.activeQuickLink()

// Recherche active
urlState.activeSearch()

🐛 Troubleshooting

L'URL ne change pas

// ❌ Mauvais
this.currentTag = 'Ideas';

// ✅ Correct
await this.urlState.filterByTag('Ideas');

La note n'est pas trouvée

Vérifiez le chemin exact:

console.log(this.vault.allNotes().map(n => n.filePath));

L'état n'est pas restauré

Assurez-vous que le service est injecté dans AppComponent.

📞 Besoin d'aide?

• Consultez docs/URL_STATE_SERVICE_INTEGRATION.md
• Vérifiez les exemples dans src/app/components/url-state-integration-examples.ts
• Exécutez les tests: ng test --include='**/url-state.service.spec.ts'

🎉 Vous êtes prêt!

Le service est maintenant intégré et fonctionnel. Continuez avec la documentation complète pour découvrir toutes les fonctionnalités.