From 8e9bd1a6d0ccee5e0fbb1cbd125bfcedbe671576 Mon Sep 17 00:00:00 2001 From: ExostFlash Date: Wed, 26 Nov 2025 10:28:23 +0100 Subject: [PATCH] Initial commit & more option --- angular.json | 3 + src/app/app.component.html | 337 +----------------- src/app/app.component.ts | 5 +- src/app/app.routes.ts | 8 +- src/app/component/about/about.component.css | 0 src/app/component/about/about.component.html | 1 + .../component/about/about.component.spec.ts | 23 ++ src/app/component/about/about.component.ts | 11 + src/app/component/footer/footer.component.css | 9 + .../component/footer/footer.component.html | 3 + .../component/footer/footer.component.spec.ts | 23 ++ src/app/component/footer/footer.component.ts | 11 + src/app/component/header/header.component.css | 16 + .../component/header/header.component.html | 7 + .../component/header/header.component.spec.ts | 23 ++ src/app/component/header/header.component.ts | 17 + src/app/component/home/home.component.css | 0 src/app/component/home/home.component.html | 1 + src/app/component/home/home.component.spec.ts | 23 ++ src/app/component/home/home.component.ts | 11 + 20 files changed, 196 insertions(+), 336 deletions(-) create mode 100644 src/app/component/about/about.component.css create mode 100644 src/app/component/about/about.component.html create mode 100644 src/app/component/about/about.component.spec.ts create mode 100644 src/app/component/about/about.component.ts create mode 100644 src/app/component/footer/footer.component.css create mode 100644 src/app/component/footer/footer.component.html create mode 100644 src/app/component/footer/footer.component.spec.ts create mode 100644 src/app/component/footer/footer.component.ts create mode 100644 src/app/component/header/header.component.css create mode 100644 src/app/component/header/header.component.html create mode 100644 src/app/component/header/header.component.spec.ts create mode 100644 src/app/component/header/header.component.ts create mode 100644 src/app/component/home/home.component.css create mode 100644 src/app/component/home/home.component.html create mode 100644 src/app/component/home/home.component.spec.ts create mode 100644 src/app/component/home/home.component.ts diff --git a/angular.json b/angular.json index 4bbb71a..8a327df 100644 --- a/angular.json +++ b/angular.json @@ -92,5 +92,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..d3cbf4b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,5 @@ - - - - - - - - + - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4d20760..4b34415 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,9 +1,12 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { HeaderComponent } from './component/header/header.component'; +import { FooterComponent } from './component/footer/footer.component'; + @Component({ selector: 'app-root', - imports: [RouterOutlet], + imports: [RouterOutlet, HeaderComponent, FooterComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..cdc1771 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,9 @@ import { Routes } from '@angular/router'; +import { HomeComponent } from './component/home/home.component'; +import { AboutComponent } from './component/about/about.component'; -export const routes: Routes = []; +export const routes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'home', component: HomeComponent }, + { path: 'about', component: AboutComponent } +]; diff --git a/src/app/component/about/about.component.css b/src/app/component/about/about.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/about/about.component.html b/src/app/component/about/about.component.html new file mode 100644 index 0000000..6094aa9 --- /dev/null +++ b/src/app/component/about/about.component.html @@ -0,0 +1 @@ +

about works!

diff --git a/src/app/component/about/about.component.spec.ts b/src/app/component/about/about.component.spec.ts new file mode 100644 index 0000000..74d6d9e --- /dev/null +++ b/src/app/component/about/about.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutComponent } from './about.component'; + +describe('AboutComponent', () => { + let component: AboutComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AboutComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/about/about.component.ts b/src/app/component/about/about.component.ts new file mode 100644 index 0000000..1988da8 --- /dev/null +++ b/src/app/component/about/about.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-about', + imports: [], + templateUrl: './about.component.html', + styleUrl: './about.component.css' +}) +export class AboutComponent { + +} diff --git a/src/app/component/footer/footer.component.css b/src/app/component/footer/footer.component.css new file mode 100644 index 0000000..65945df --- /dev/null +++ b/src/app/component/footer/footer.component.css @@ -0,0 +1,9 @@ +.footer { + background: #f5f5f5; + padding: 1rem; + text-align: center; + border-top: 1px solid #ddd; + font-size: 0.95rem; + color: #666; + margin-top: 2rem; +} diff --git a/src/app/component/footer/footer.component.html b/src/app/component/footer/footer.component.html new file mode 100644 index 0000000..d4b0798 --- /dev/null +++ b/src/app/component/footer/footer.component.html @@ -0,0 +1,3 @@ +
+ © 2025 TaskBoard. Tous droits réservés. +
diff --git a/src/app/component/footer/footer.component.spec.ts b/src/app/component/footer/footer.component.spec.ts new file mode 100644 index 0000000..3f93915 --- /dev/null +++ b/src/app/component/footer/footer.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FooterComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/footer/footer.component.ts b/src/app/component/footer/footer.component.ts new file mode 100644 index 0000000..08cf5c1 --- /dev/null +++ b/src/app/component/footer/footer.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-footer', + imports: [], + templateUrl: './footer.component.html', + styleUrl: './footer.component.css' +}) +export class FooterComponent { + +} diff --git a/src/app/component/header/header.component.css b/src/app/component/header/header.component.css new file mode 100644 index 0000000..c91d8d1 --- /dev/null +++ b/src/app/component/header/header.component.css @@ -0,0 +1,16 @@ +.header { + background: #f5f5f5; + padding: 1rem; + text-align: center; + border-bottom: 1px solid #ddd; +} +nav a { + color: #333; + text-decoration: none; + margin: 0 1rem; + font-weight: 500; +} +nav a.active { + color: #1976d2; + border-bottom: 2px solid #1976d2; +} diff --git a/src/app/component/header/header.component.html b/src/app/component/header/header.component.html new file mode 100644 index 0000000..13a359d --- /dev/null +++ b/src/app/component/header/header.component.html @@ -0,0 +1,7 @@ +
+ +
diff --git a/src/app/component/header/header.component.spec.ts b/src/app/component/header/header.component.spec.ts new file mode 100644 index 0000000..204ed6e --- /dev/null +++ b/src/app/component/header/header.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HeaderComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/header/header.component.ts b/src/app/component/header/header.component.ts new file mode 100644 index 0000000..9beb6c9 --- /dev/null +++ b/src/app/component/header/header.component.ts @@ -0,0 +1,17 @@ + +import { Component } from '@angular/core'; +import { Router, RouterLink, RouterLinkActive } from '@angular/router'; + +@Component({ + selector: 'app-header', + imports: [RouterLink, RouterLinkActive], + templateUrl: './header.component.html', + styleUrl: './header.component.css' +}) +export class HeaderComponent { + constructor(public router: Router) {} + + isHomeActive(): boolean { + return this.router.url === '/' || this.router.url === '/home'; + } +} diff --git a/src/app/component/home/home.component.css b/src/app/component/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/home/home.component.html b/src/app/component/home/home.component.html new file mode 100644 index 0000000..5f2c53f --- /dev/null +++ b/src/app/component/home/home.component.html @@ -0,0 +1 @@ +

home works!

diff --git a/src/app/component/home/home.component.spec.ts b/src/app/component/home/home.component.spec.ts new file mode 100644 index 0000000..1191557 --- /dev/null +++ b/src/app/component/home/home.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HomeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/home/home.component.ts b/src/app/component/home/home.component.ts new file mode 100644 index 0000000..35c8e26 --- /dev/null +++ b/src/app/component/home/home.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + imports: [], + templateUrl: './home.component.html', + styleUrl: './home.component.css' +}) +export class HomeComponent { + +}