service api, page home, affiche categ,

install btsrap

README.md

@@ -6,6 +6,8 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
+Run `npm run api` for the api server. Reach to `http://localhost:3000/` 
+
 ## Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

angular.json

@@ -33,7 +33,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ]
           },
           "configurations": {
             "production": {

db.json

@@ -0,0 +1,28 @@
+{
+  "types": [
+    {
+      "id_type": "1",
+      "libelle": "Pizzeria"
+    },
+    {
+      "id_type": "2",
+      "libelle": "Créperie"
+    },
+    {
+      "id_type": "3",
+      "libelle": "Boulangerie"
+    },
+    {
+      "id_type": "4",
+      "libelle": "Kebab"
+    },
+    {
+      "id_type": "5",
+      "libelle": "Thaï"
+    },
+    {
+      "id_type": "6",
+      "libelle": "Supermarché"
+    }
+  ]
+}

package-lock.json

@@ -2484,6 +2484,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "api": "json-server db.json"
   },
   "private": true,
   "dependencies": {
@@ -18,6 +19,7 @@
     "@angular/platform-browser": "~13.0.0",
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
+    "bootstrap": "^5.1.3",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app-routing.module.ts

@@ -1,7 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomePageComponent } from './pages/home-page/home-page.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+    { path: '', redirectTo: 'home', pathMatch: 'full' },
+    { path: 'home', component: HomePageComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.module.ts

@@ -13,6 +13,8 @@ import { AvisRestoComponent } from './filter/components/avis-resto/avis-resto.co
 import { CardCategoryComponent } from './card-category/card-category.component';
 import { CardRestoComponent } from './card-resto/card-resto.component';
 import { FooterComponent } from './footer/footer.component';
+import { HomePageComponent } from './pages/home-page/home-page.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -26,11 +28,13 @@ import { FooterComponent } from './footer/footer.component';
     AvisRestoComponent,
     CardCategoryComponent,
     CardRestoComponent,
-    FooterComponent
+    FooterComponent,
+    HomePageComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/card-category/card-category.component.html

@@ -1 +1,7 @@
-<p>card-category works!</p>
+<div class="card" style="width: 18rem;">
+    <img class="card-img-top" src="..." alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">{{ categoryData.libelle }}</h5>
+      <a href="#" class="btn btn-primary">Go somewhere</a>
+    </div>
+  </div>

src/app/card-category/card-category.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-card-category',
@@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CardCategoryComponent implements OnInit {
 
+  @Input() categoryData : any;
+  
   constructor() { }
 
   ngOnInit(): void {

src/app/pages/home-page/home-page.component.html

@@ -0,0 +1,3 @@
+<div *ngFor="let category of listCategories">
+    <app-card-category [categoryData]="category"></app-card-category>
+</div>

src/app/pages/home-page/home-page.component.spec.ts

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

src/app/pages/home-page/home-page.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiBackService } from 'src/app/services/api-back.service';
+
+@Component({
+  selector: 'app-home-page',
+  templateUrl: './home-page.component.html',
+  styleUrls: ['./home-page.component.scss']
+})
+export class HomePageComponent implements OnInit {
+
+  listCategories : string[];
+
+  constructor(private apiBackService : ApiBackService) {
+    this.listCategories = [];
+   }
+
+  ngOnInit(): void {
+    this.apiBackService.getCategories().subscribe((listCategories: any[]) => {
+      console.log(listCategories);
+
+      // const listCategoriesLibelle = listCategories.map(
+      //   (category) => category.libelle
+      // );
+
+      this.listCategories = listCategories;
+
+    });
+
+  }
+
+}

src/app/services/api-back.service.spec.ts

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

src/app/services/api-back.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiBackService {
+  
+  constructor(private httpClient: HttpClient) { }
+
+  getRestaurants(): Observable<any[]> {
+    return this.httpClient.get<any[]>(`${environment.apiUrl}/restaurants`);
+  }
+
+  getCategories(): Observable<any[]>{
+    return this.httpClient.get<any[]>(`${environment.apiUrl}/types`);
+  }
+
+
+
+}

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  apiUrl: ""
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiUrl: "http://localhost:8080",
 };
 
 /*

src/styles.scss

@@ -1 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~bootstrap/scss/bootstrap.scss';
+// le tilde agit comme un raccourci vers le node_modules