Add service, move component

src/app/app-routing.module.ts

@@ -1,16 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
+
-import { ContactComponent } from './contact/contact.component';
+import { HomeComponent } from './component/home/home.component';
-import { SymptomeComponent } from './symptome/symptome.component';
+import { SymptomsComponent } from './component/symptoms/symptoms.component';
-import { BlogComponent } from './blog/blog.component';
+import { BlogsComponent } from './component/blogs/blogs.component';
+import { ContactComponent } from './component/contact/contact.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
-  { path: 'contacts', component: ContactComponent },
+  { path: 'symptoms', component: SymptomsComponent },
-  { path: 'symptômes', component: SymptomeComponent },
+  { path: 'blogs', component: BlogsComponent },
-  { path: 'blog', component: BlogComponent },
+  { path: 'contact', component: ContactComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -4,23 +4,43 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NavBarComponent } from './nav-bar/nav-bar.component';
+
-import { HomeComponent } from './home/home.component';
+/* Essential */
-import { FooterComponent } from './footer/footer.component';
+import { NavBarComponent } from './component/essential/nav-bar/nav-bar.component';
-import { SymptomeComponent } from './symptome/symptome.component';
+import { FooterComponent } from './component/essential/footer/footer.component';
-import { ContactComponent } from './contact/contact.component';
+
-import { BlogComponent } from './blog/blog.component';
+/* Home */
+import { HomeComponent } from './component/home/home.component';
+import { HomeAccueilComponent } from './component/home/all/home-accueil/home-accueil.component';
+import { HomeSymptomsComponent } from './component/home/all/home-symptoms/home-symptoms.component';
+
+/* Symptoms */
+import { SymptomsComponent } from './component/symptoms/symptoms.component';
+
+/* Blogs */
+import { BlogsComponent } from './component/blogs/blogs.component';
+
+/* Contact */
+import { ContactComponent } from './component/contact/contact.component';
+
 
 
 @NgModule({
   declarations: [
     AppComponent,
+    /* Essential */
     NavBarComponent,
-    HomeComponent,
     FooterComponent,
-    SymptomeComponent,
+    /* Home */
-    ContactComponent,
+    HomeComponent,
-    BlogComponent
+    HomeAccueilComponent,
+    HomeSymptomsComponent,
+    /* Symptoms */
+    SymptomsComponent,
+    /* Blogs */
+    BlogsComponent,
+    /* Contact */
+    ContactComponent    
   ],
   imports: [
     BrowserModule,

src/app/blog/blog.component.html

@@ -1 +0,0 @@
-<p>blog works!</p>

src/app/blog/blog.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-blog',
-  standalone: false,
-  templateUrl: './blog.component.html',
-  styleUrl: './blog.component.css'
-})
-export class BlogComponent {
-
-}

src/app/component/blogs/blogs.component.html

@@ -0,0 +1 @@
+<p>blogs works!</p>

src/app/component/blogs/blogs.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BlogComponent } from './blog.component';
+import { BlogsComponent } from './blogs.component';
 
-describe('BlogComponent', () => {
+describe('BlogsComponent', () => {
-  let component: BlogComponent;
+  let component: BlogsComponent;
-  let fixture: ComponentFixture<BlogComponent>;
+  let fixture: ComponentFixture<BlogsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [BlogComponent]
+      declarations: [BlogsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(BlogComponent);
+    fixture = TestBed.createComponent(BlogsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/component/blogs/blogs.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-blogs',
+  standalone: false,
+  templateUrl: './blogs.component.html',
+  styleUrl: './blogs.component.css'
+})
+export class BlogsComponent {
+
+}

src/app/component/essential/nav-bar/nav-bar.component.html

@@ -8,23 +8,22 @@
         <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav ms-auto">
                 <li class="nav-item">
-                    <a class="nav-link" 
+                    <a class="nav-link"
-   routerLink="/" 
+                        routerLink="/"
-   routerLinkActive="active-link" 
+                        routerLinkActive="active-link"
-   [routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
+                        [routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
-   [class.active-link]="isHomeActive()">
+                        [class.active-link]="isHomeActive()">
-   Accueil
+                        Accueil
-</a>
+                    </a>
-
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" routerLink="/symptômes" routerLinkActive="active-link">Symptômes</a>
+                    <a class="nav-link" routerLink="/symptoms" routerLinkActive="active-link">Symptômes</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" routerLink="/blog" routerLinkActive="active-link">Blog</a>
+                    <a class="nav-link" routerLink="/blogs" routerLinkActive="active-link">Blog</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" routerLink="/contacts" routerLinkActive="active-link">Contacts</a>
+                    <a class="nav-link" routerLink="/contact" routerLinkActive="active-link">Contact</a>
                 </li>
             </ul>
         </div>

src/app/component/essential/nav-bar/nav-bar.component.ts

@@ -13,7 +13,7 @@ export class NavBarComponent {
   isHomeActive(): boolean {
     return this.router.url === '/' || this.router.url === '/home';
   }
-
+  
   isHomeActiveBool(): boolean {
     if (this.router.url != '/home') {
       return true

src/app/component/home/all/home-accueil/home-accueil.component.html

@@ -0,0 +1,10 @@
+<div class="row align-items-center mb-4">
+    <div class="col-md-6 text-center text-md-start">
+        <h2 class="text-primary">Ensemble. Luttons.</h2>
+        <p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit...</p>
+        <button routerLink="/symptoms" class="btn btn-primary">Comment se protéger</button>
+    </div>
+    <div class="col-md-6 text-center">
+        <img src="/assets/illustration.png" alt="Illustration Covid" class="img-fluid">
+    </div>
+</div>

src/app/component/home/all/home-accueil/home-accueil.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeAccueilComponent } from './home-accueil.component';
+
+describe('HomeAccueilComponent', () => {
+  let component: HomeAccueilComponent;
+  let fixture: ComponentFixture<HomeAccueilComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HomeAccueilComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomeAccueilComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/home/all/home-accueil/home-accueil.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home-accueil',
+  standalone: false,
+  templateUrl: './home-accueil.component.html',
+  styleUrl: './home-accueil.component.css'
+})
+export class HomeAccueilComponent {
+
+}

src/app/component/home/all/home-symptoms/home-symptoms.component.html

@@ -0,0 +1,18 @@
+<div class="text-center mb-4">
+    <h2 class="text-primary">Symptôme du Coronavirus</h2>
+    <p>Lorem, ipsum dolor sit amet consectetur...</p>
+</div>
+
+<div class="row">
+    <div *ngFor="let symptom of symptoms" class="col-md-6 mb-3">
+        <div class="card p-3">
+            <div class="d-flex align-items-center">
+                <img [src]="symptom.imageName" [alt]="symptom.title" class="me-3">
+                <div>
+                    <h5 class="text-primary">{{ symptom.title }}</h5>
+                    <p>{{ symptom.description }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/component/home/all/home-symptoms/home-symptoms.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeSymptomsComponent } from './home-symptoms.component';
+
+describe('HomeSymptomsComponent', () => {
+  let component: HomeSymptomsComponent;
+  let fixture: ComponentFixture<HomeSymptomsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HomeSymptomsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomeSymptomsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/home/all/home-symptoms/home-symptoms.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { DataService } from '@services/data.service';
+
+@Component({
+  selector: 'app-home-symptoms',
+  standalone: false,
+  templateUrl: './home-symptoms.component.html',
+  styleUrl: './home-symptoms.component.css'
+})
+export class HomeSymptomsComponent {
+  constructor(private dataService: DataService) {}
+
+  get symptoms() {
+    return this.dataService.getSymptoms();
+  }
+}

src/app/component/home/home.component.html

@@ -0,0 +1,4 @@
+<div class="container py-5">
+    <app-home-accueil></app-home-accueil>
+    <app-home-symptoms></app-home-symptoms>
+</div>

src/app/component/symptoms/symptoms.component.html

@@ -0,0 +1 @@
+<p>symptoms works!</p>

src/app/component/symptoms/symptoms.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SymptomeComponent } from './symptome.component';
+import { SymptomsComponent } from './symptoms.component';
 
-describe('SymptomeComponent', () => {
+describe('SymptomsComponent', () => {
-  let component: SymptomeComponent;
+  let component: SymptomsComponent;
-  let fixture: ComponentFixture<SymptomeComponent>;
+  let fixture: ComponentFixture<SymptomsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SymptomeComponent]
+      declarations: [SymptomsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(SymptomeComponent);
+    fixture = TestBed.createComponent(SymptomsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/component/symptoms/symptoms.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-symptoms',
+  standalone: false,
+  templateUrl: './symptoms.component.html',
+  styleUrl: './symptoms.component.css'
+})
+export class SymptomsComponent {
+
+}

src/app/home/home.component.html

@@ -1,63 +0,0 @@
-<div class="container py-5">
-    <div class="row align-items-center mb-4">
-        <div class="col-md-6 text-center text-md-start">
-            <h2 class="text-primary">Ensemble. Luttons.</h2>
-            <p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit...</p>
-            <button routerLink="/symptômes" class="btn btn-primary">Comment se protéger</button>
-        </div>
-        <div class="col-md-6 text-center">
-            <img src="/assets/illustration.png" alt="Illustration Covid" class="img-fluid">
-        </div>
-    </div>
-
-    <div class="text-center mb-4">
-        <h2 class="text-primary">Symptôme du Coronavirus</h2>
-        <p>Lorem, ipsum dolor sit amet consectetur...</p>
-    </div>
-
-    <div class="row">
-        <div class="col-md-6 mb-3">
-            <div class="card p-3">
-                <div class="d-flex align-items-center">
-                    <img src="/assets/fievre.png" alt="Forte fièvre" class="me-3">
-                    <div>
-                        <h5 class="text-primary">Forte fièvre</h5>
-                        <p>Lorem ipsum dolor sit amet...</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-6 mb-3">
-            <div class="card p-3">
-                <div class="d-flex align-items-center">
-                    <img src="/assets/toux.png" alt="Toux" class="me-3">
-                    <div>
-                        <h5 class="text-primary">Toux</h5>
-                        <p>Lorem ipsum dolor sit amet...</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-6 mb-3">
-            <div class="card p-3">
-                <div class="d-flex align-items-center">
-                    <img src="/assets/gorge.png" alt="Gorge irritée" class="me-3">
-                    <div>
-                        <h5 class="text-primary">Gorge irritée</h5>
-                        <p>Lorem ipsum dolor sit amet...</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-6 mb-3">
-            <div class="card p-3">
-                <div class="d-flex align-items-center">
-                    <img src="/assets/migraine.png" alt="Migraine" class="me-3">
-                    <div>
-                        <h5 class="text-primary">Migraine</h5>
-                        <p>Lorem ipsum dolor sit amet...</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>

src/app/service/all/address/address.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AddressService } from './address.service';
+
+describe('AddressService', () => {
+  let service: AddressService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AddressService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/all/address/address.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AddressService {
+  constructor() { }
+
+  private addresses = [
+    { title: "Adresse 1", type: "Dépistage", address: "39 Rue Albert 75013 Paris" },
+    { title: "Adresse 2", type: "Vaccination", address: "10 Rue de la Huchette 75005 Paris" },
+    { title: "Adresse 3", type: "Dépistage", address: "29 Rue de Caumartin 75009 Paris" },
+    { title: "Adresse 4", type: "Dépistage & Vaccination", address: "4 Villa Monceau 75017 Paris" }
+  ];
+
+  getAddresses() {
+    return this.addresses;
+  }
+}

src/app/service/all/blog/blog.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BlogService } from './blog.service';
+
+describe('BlogService', () => {
+  let service: BlogService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BlogService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/all/blog/blog.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BlogService {
+  constructor() { }
+
+  private blogs = [
+    { title: "Blog 1", date: "2022-03-19", text: "Contenu..." },
+    { title: "Blog 2", date: "2022-12-14", text: "Contenu..." },
+    { title: "Blog 3", date: "2022-05-16", text: "Contenu..." },
+    { title: "Blog 4", date: "2022-05-04", text: "Contenu..." }
+  ];
+
+  getBlogs() {
+    return this.blogs;
+  }
+}

src/app/service/all/symptom/symptom.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SymptomService } from './symptom.service';
+
+describe('SymptomService', () => {
+  let service: SymptomService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SymptomService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/all/symptom/symptom.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SymptomService {
+  constructor() { }
+
+  private symptoms = [
+    { title: "Toux", imageName: "/assets/toux.png", description: "Lorem ipsum dolor sit amet..." },
+    { title: "Fièvre", imageName: "/assets/fievre.png", description: "Lorem ipsum dolor sit amet..." },
+    { title: "Migraine", imageName: "/assets/migraine.png", description: "Lorem ipsum dolor sit amet..." },
+    { title: "Mal de gorge", imageName: "/assets/gorge.png", description: "Lorem ipsum dolor sit amet..." }
+  ];
+
+  getSymptoms() {
+    return this.symptoms;
+  }
+}

src/app/service/data.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+  let service: DataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/data.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+import { SymptomService } from './all/symptom/symptom.service';
+import { BlogService } from './all/blog/blog.service';
+import { AddressService } from './all/address/address.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+
+  constructor(
+    private symptomService: SymptomService,
+    private blogService: BlogService,
+    private addressService: AddressService
+  ) {}
+
+  getSymptoms() {
+    return this.symptomService.getSymptoms();
+  }
+
+  getBlogs() {
+    return this.blogService.getBlogs();
+  }
+
+  getAddresses() {
+    return this.addressService.getAddresses();
+  }
+}

src/app/symptome/symptome.component.html

@@ -1 +0,0 @@
-<p>symptome works!</p>

src/app/symptome/symptome.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-symptome',
-  standalone: false,
-  templateUrl: './symptome.component.html',
-  styleUrl: './symptome.component.css'
-})
-export class SymptomeComponent {
-
-}

tsconfig.json

@@ -16,7 +16,11 @@
     "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022"
+    "module": "ES2022",
+    "baseUrl": "./src",
+    "paths": {
+      "@services/*": ["app/service/*"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,