Housing Finder — Angular Tutorial App

Application Angular simple pour explorer une liste de logements, filtrer par ville et afficher les détails d'un logement, basée sur les données locales de db.json et un petit service HTTP.

---

Origine du projet

Ce projet est basé sur le tutoriel officiel Angular :

• "First App" — https://angular.dev/tutorials/first-app

Le code a été reproduit et adapté à des fins d'apprentissage personnel.

---

Aperçu

Vue	Capture
Page d'accueil
Résultats filtrés
Page de détails

---

Ce que ce projet illustre

Ce projet montre les bases d'une application Angular moderne :

• Comment structurer une app avec des composants autonomes (standalone components).
• Comment configurer un routeur pour naviguer entre une liste et une page de détails.
• Comment consommer une API REST (ici un serveur JSON local) via un service Angular.
• Comment filtrer une liste en fonction de la saisie de l'utilisateur.

C'est un bon point de départ pour comprendre la structure d'une application Angular 16+ / 17+ avec bootstrapApplication et provideRouter.

---

Fonctionnalités principales

• Liste des logements : chargement de tous les logements depuis une API (http://localhost:3000/locations) via le service Housing.
• Filtre par ville : filtrage côté client dans le composant Home avec un champ texte.
• Page de détails : route dynamique details/:id affichant les informations détaillées d'un logement.
• Formulaire de candidature : formulaire réactif (ReactiveFormsModule) sur la page de détails, avec soumission simulée en console.
• Navigation Angular Router : liens routerLink depuis chaque carte de logement vers la page de détails.

---

Données

• Source principale : db.json à la racine du projet.
  • Contient un tableau locations avec les attributs : id, name, city, state, photo, availableUnits, wifi, laundry.
  • Le service Housing consomme l'endpoint http://localhost:3000/locations.

Exemple d'entrée dans db.json :

{
  "id": 0,
  "name": "Acme Fresh Start Housing",
  "city": "Chicago",
  "state": "IL",
  "photo": "https://...jpg",
  "availableUnits": 4,
  "wifi": true,
  "laundry": true
}

Pour servir ces données, le plus simple est d'utiliser json-server.

---

Démarrage rapide

1. Prérequis

• Node.js + npm installés.
• (Recommandé) Angular CLI installé globalement :

npm install -g @angular/cli

2. Installer les dépendances

À la racine du projet :

npm install

3. Lancer l'API locale (json-server)

Depuis la racine du projet, avec db.json :

npx json-server --watch db.json --port 3000

Cela expose l'endpoint :

• GET http://localhost:3000/locations

4. Lancer l'application Angular

Dans un autre terminal, à la racine du projet :

npm start

Puis ouvrir :

• http://localhost:4200/

---

Comment ça marche

1. Bootstrap de l'application

   • src/main.ts utilise bootstrapApplication(App, { providers: [...] }).
   • Le routeur est fourni via provideRouter(routeConfig) avec la configuration définie dans src/app/routes.ts.

2. Routage

   • Chemin "" → composant Home (page d'accueil avec la liste et la recherche).
   • Chemin "details/:id" → composant Details (page de détails d'un logement).

3. Service de données

   • src/app/housing.ts définit le service Housing :
     • getAllHousingLocations() récupère tous les logements depuis http://localhost:3000/locations.
     • getHousingLocationById(id) récupère un logement spécifique par id.
     • submitApplication(...) journalise pour l'instant les données du formulaire dans la console.

4. Page d'accueil (Home)

   • Fichier : src/app/home/home.ts.

   • Au constructor, le composant appelle Housing.getAllHousingLocations() et stocke les résultats dans housingLocationList et filteredLocationList.

   • La méthode filterResults(text: string) filtre filteredLocationList en fonction de la ville :

     this.filteredLocationList = this.housingLocationList.filter((housingLocation) =>
       housingLocation?.city.toLowerCase().includes(text.toLowerCase()),
     );

5. Carte logement (HousingLocation)

   • Fichier : src/app/housing-location/housing-location.ts.
   • Composant autonome recevant une entrée housingLocation et affichant : photo, nom, ville/état et un lien "Learn More" vers /details/:id.

6. Page de détails (Details)

   • Fichier : src/app/details/details.ts.
   • Utilise ActivatedRoute pour lire :id dans l'URL et récupère le logement correspondant via le service Housing.
   • Affiche les informations détaillées et un formulaire réactif pour une candidature.

---

Configuration

• URL de l'API : modifiable dans src/app/housing.ts via la propriété url.
• Styles globaux : dans src/styles.css.
• Styles de composants : dans les fichiers .css associés à chaque composant (app.css, home.css, details.css, housing-location.css, etc.).
• Routage : à ajuster dans src/app/routes.ts si tu ajoutes de nouvelles pages.

---

Structure du dépôt (fichiers principaux)

• src/main.ts — point d'entrée Angular, bootstrap de l'application.
• src/app/app.ts — composant racine, shell de l'application.
• src/app/routes.ts — configuration des routes (Home, Details).
• src/app/housing.ts — service Housing pour la récupération des données et la soumission du formulaire.
• src/app/home/home.ts — composant de la page d'accueil (liste + filtre).
• src/app/details/details.ts — composant de la page de détails + formulaire réactif.
• src/app/housing-location/housing-location.ts — composant carte pour un logement individuel.
• db.json — source de données JSON pour json-server.

---