diff --git a/PrésentationSession1_06022025.pptx b/PrésentationSession1_06022025.pptx new file mode 100644 index 0000000..44173cc Binary files /dev/null and b/PrésentationSession1_06022025.pptx differ diff --git a/angular/angular.json b/angular/angular.json index 61b95fe..a87b644 100644 --- a/angular/angular.json +++ b/angular/angular.json @@ -37,7 +37,8 @@ } ], "styles": [ - "src/styles.css" + "src/styles.css", + "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [] }, @@ -66,6 +67,9 @@ "defaultConfiguration": "production" }, "serve": { + "options": { + "port": 80 + }, "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { diff --git a/angular/package-lock.json b/angular/package-lock.json index 66ad6a2..b383da2 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -16,6 +16,7 @@ "@angular/platform-browser": "^19.1.0", "@angular/platform-browser-dynamic": "^19.1.0", "@angular/router": "^19.1.0", + "bootstrap": "^5.3.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" @@ -4923,6 +4924,17 @@ "node": ">=14" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.34.8", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz", @@ -6314,6 +6326,25 @@ "dev": true, "license": "ISC" }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/angular/package.json b/angular/package.json index 9b43c03..0300e6a 100644 --- a/angular/package.json +++ b/angular/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "^19.1.0", "@angular/platform-browser-dynamic": "^19.1.0", "@angular/router": "^19.1.0", + "bootstrap": "^5.3.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" diff --git a/angular/src/app/about/about.component.css b/angular/src/app/about/about.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular/src/app/about/about.component.html b/angular/src/app/about/about.component.html new file mode 100644 index 0000000..86a08c7 --- /dev/null +++ b/angular/src/app/about/about.component.html @@ -0,0 +1,37 @@ +
+ + + + +
+
+ Message + + +
+
+ + +
+

Liste des commentaires

+
    +
  1. +
    +
    {{ comment.message }}
    +
    + + {{ comment.date | date:'dd/MM/yyyy' }} +
    2. +
+
+ + + +

Aucun commentaire pour le moment

+ +
diff --git a/angular/src/app/about/about.component.spec.ts b/angular/src/app/about/about.component.spec.ts new file mode 100644 index 0000000..a84e18c --- /dev/null +++ b/angular/src/app/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({ + declarations: [AboutComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular/src/app/about/about.component.ts b/angular/src/app/about/about.component.ts new file mode 100644 index 0000000..d9193b1 --- /dev/null +++ b/angular/src/app/about/about.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-about', + standalone: false, + templateUrl: './about.component.html', + styleUrl: './about.component.css' +}) + +export class AboutComponent implements OnInit { + + info: Info = new Info(); + comments: Array = []; + comment: Comment = new Comment(); + newComment: boolean = false; + + constructor() {} + + ngOnInit(): void {} + + addComment() { + if (this.comment.message) { + this.comment.date = new Date(); + this.comments.push({ + message: this.comment.message, + date: this.comment.date + }); + this.comment.message = ''; + } + } +} + +export class Info { + name: string = "Test"; + email: string = "test@mail.com"; + phone: string= "000000000"; +} + +export class Comment { + message: string = ''; + date: Date | null = null; +} diff --git a/angular/src/app/account/account.component.css b/angular/src/app/account/account.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular/src/app/account/account.component.html b/angular/src/app/account/account.component.html new file mode 100644 index 0000000..67e00d1 --- /dev/null +++ b/angular/src/app/account/account.component.html @@ -0,0 +1,67 @@ +
+ + +
+
+
+

Ajouter vos informations

+ +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+
+ + @ + +
+
+ + @edu.igensia.com +
+
+ Adresse + +
+ +
+
+
+ + +
+

Liste des commentaires

+
    +
  • +
    +
    {{ info.nameLast }} {{ info.nameFirst }}
    +
    {{ info.email }}
    +
    {{ info.address }}
    +
    +
    + {{ info.gender }} + {{ info.date | date:'dd/MM/yyyy' }} +
    +
    • +
+
+ + + +

Aucun commentaire pour le moment

+ +
diff --git a/angular/src/app/account/account.component.spec.ts b/angular/src/app/account/account.component.spec.ts new file mode 100644 index 0000000..257b01d --- /dev/null +++ b/angular/src/app/account/account.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AccountComponent } from './account.component'; + +describe('AccountComponent', () => { + let component: AccountComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AccountComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AccountComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular/src/app/account/account.component.ts b/angular/src/app/account/account.component.ts new file mode 100644 index 0000000..efb49a6 --- /dev/null +++ b/angular/src/app/account/account.component.ts @@ -0,0 +1,51 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-account', + standalone: false, + templateUrl: './account.component.html', + styleUrl: './account.component.css' +}) + +export class AccountComponent { + info: Info = new Info(); + infos: Array = []; + newInfo: boolean = false; + + constructor() {} + ngOnInit(): void {} + + addInfo() { + if (this.info.gender && this.info.nameFirst && this.info.nameLast && this.info.email && this.info.address) { + this.info.date = new Date(); + this.info.nameFirst = this.info.nameFirst.charAt(0).toUpperCase() + this.info.nameFirst.slice(1).toLowerCase() + this.infos.push({ + gender: this.info.gender, + nameFirst: this.info.nameFirst, + nameLast: this.info.nameLast.toUpperCase(), + email: this.info.email.toLowerCase() + '@edu.igensia.com', + address: this.info.address, + date: this.info.date + }) + this.info.nameFirst = ''; + this.info.nameLast = ''; + this.info.email = ''; + this.info.address = ''; + this.info.gender = ''; + } + } + + updateGender() { + // console.log("Le genre sélectionné est :", this.info.gender); + } + +} + +export class Info { + gender: string = ''; + nameFirst: string = ''; + nameLast: string = ''; + email: string = ''; + address: string= ''; + date: Date | null = null; +} diff --git a/angular/src/app/app-routing.module.ts b/angular/src/app/app-routing.module.ts index 0297262..09f67a5 100644 --- a/angular/src/app/app-routing.module.ts +++ b/angular/src/app/app-routing.module.ts @@ -1,7 +1,15 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from './home/home.component'; +import { AboutComponent } from './about/about.component'; +import { ContactsComponent } from './contacts/contacts.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'home', component: HomeComponent }, + { path: 'about', component: AboutComponent }, + { path: 'contacts', component: ContactsComponent }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index 36093e1..9a8d940 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -1,336 +1,4 @@ - - - - - - - - - - - -
-
-
- -

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/angular/src/app/app.component.ts b/angular/src/app/app.component.ts index 02d0eac..677dbce 100644 --- a/angular/src/app/app.component.ts +++ b/angular/src/app/app.component.ts @@ -7,5 +7,5 @@ import { Component } from '@angular/core'; styleUrl: './app.component.css' }) export class AppComponent { - title = 'angular'; + title = 'AngularJS'; } diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index b1c6c96..679a4ef 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -3,14 +3,26 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { AboutComponent } from './about/about.component'; +import { FormsModule } from '@angular/forms'; +import { ContactsComponent } from './contacts/contacts.component'; +import { HomeComponent } from './home/home.component'; +import { NavBarComponent } from './nav-bar/nav-bar.component'; +import { AccountComponent } from './account/account.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + AboutComponent, + ContactsComponent, + HomeComponent, + NavBarComponent, + AccountComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + FormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/angular/src/app/contacts/contacts.component.css b/angular/src/app/contacts/contacts.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular/src/app/contacts/contacts.component.html b/angular/src/app/contacts/contacts.component.html new file mode 100644 index 0000000..e400718 --- /dev/null +++ b/angular/src/app/contacts/contacts.component.html @@ -0,0 +1 @@ +

contacts works!

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

Bienvenue à la formation AngularJS

+ +
+ About + Contacts +
+
+ + \ No newline at end of file diff --git a/angular/src/app/home/home.component.spec.ts b/angular/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..545a43d --- /dev/null +++ b/angular/src/app/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({ + declarations: [HomeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular/src/app/home/home.component.ts b/angular/src/app/home/home.component.ts new file mode 100644 index 0000000..906862d --- /dev/null +++ b/angular/src/app/home/home.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + standalone: false, + templateUrl: './home.component.html', + styleUrl: './home.component.css' +}) +export class HomeComponent { + +} diff --git a/angular/src/app/nav-bar/nav-bar.component.css b/angular/src/app/nav-bar/nav-bar.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular/src/app/nav-bar/nav-bar.component.html b/angular/src/app/nav-bar/nav-bar.component.html new file mode 100644 index 0000000..3cc1c37 --- /dev/null +++ b/angular/src/app/nav-bar/nav-bar.component.html @@ -0,0 +1,29 @@ + + \ No newline at end of file diff --git a/angular/src/app/nav-bar/nav-bar.component.spec.ts b/angular/src/app/nav-bar/nav-bar.component.spec.ts new file mode 100644 index 0000000..63b97ff --- /dev/null +++ b/angular/src/app/nav-bar/nav-bar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavBarComponent } from './nav-bar.component'; + +describe('NavBarComponent', () => { + let component: NavBarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [NavBarComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NavBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular/src/app/nav-bar/nav-bar.component.ts b/angular/src/app/nav-bar/nav-bar.component.ts new file mode 100644 index 0000000..a1e7892 --- /dev/null +++ b/angular/src/app/nav-bar/nav-bar.component.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-nav-bar', + standalone: false, + templateUrl: './nav-bar.component.html', + styleUrl: './nav-bar.component.css' +}) +export class NavBarComponent { + constructor(private router: Router) {} + + isHomeActive(): boolean { + return this.router.url === '/' || this.router.url === '/home'; + } + + isHomeActiveBool(): boolean { + if (this.router.url != '/home') { + return true + } else { + return false + } + } +} diff --git a/angular/src/styles.css b/angular/src/styles.css index 90d4ee0..c0224a9 100644 --- a/angular/src/styles.css +++ b/angular/src/styles.css @@ -1 +1,21 @@ /* You can add global styles to this file, and also import other style files */ +.active-link { + color: #ffc107 !important; /* Jaune Bootstrap */ + font-weight: bold; + border-bottom: 2px solid #ffc107; +} + +.breakWord { + word-break: break-word; + word-wrap: break-word; +} + +.SpaceMargin-02 { + margin-left: 10px; + margin-top: 2px; +} + +.SpaceMargin-05 { + margin-left: 10px; + margin-top: 10px; +} \ No newline at end of file