Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:05 [2024/11/04 11:28] alexandru.predescu |
isi:laboratoare:05 [2024/11/04 12:52] (current) sorin.ciolofan [Firebase Realtime Database] |
||
|---|---|---|---|
| Line 18: | Line 18: | ||
| <note tip>Folosiți contul vostru de Google.</note> | <note tip>Folosiți contul vostru de Google.</note> | ||
| - | === Creați un proiect nou și o aplicație web === | + | === Creați un proiect nou === |
| {{:isi:laboratoare:lab5:firebase_project.png?400|}} | {{:isi:laboratoare:lab5:firebase_project.png?400|}} | ||
| Line 34: | Line 34: | ||
| {{:isi:laboratoare:lab5:firebase_access.png?600|}} | {{:isi:laboratoare:lab5:firebase_access.png?600|}} | ||
| - | === Creați o aplicație nouă și salvați configurările necesare pentru conectare === | + | === Creați o aplicație web nouă și salvați configurările necesare pentru conectare === |
| <note tip>Dacă ați creat deja o aplicație în Firebase Console, reveniți la pagina de configurare (Project settings).</note> | <note tip>Dacă ați creat deja o aplicație în Firebase Console, reveniți la pagina de configurare (Project settings).</note> | ||
| Line 67: | Line 67: | ||
| ==== Task ==== | ==== Task ==== | ||
| - | Descărcați scheletul aplicației de pe GitHub. | + | Descărcați scheletul aplicației de pe GitHub: [[https://github.com/ACS-ISI/AngularDemoFirebase|AngularDemoFirebase]]. |
| <note> | <note> | ||
| Line 78: | Line 78: | ||
| </code> | </code> | ||
| - | * servicii: services/firebase.ts | + | * servicii: **services/firebase.ts** |
| - | * injectarea dependențelor: | + | * injectarea dependențelor: **pages/home/home.component.ts** |
| + | |||
| + | <code> | ||
| + | constructor( | ||
| + | private fbs: FirebaseService, | ||
| + | // .. | ||
| + | ) | ||
| + | </code> | ||
| * variabile de environment: environments - firebase config (doar obiectul de confgurare) | * variabile de environment: environments - firebase config (doar obiectul de confgurare) | ||
| - | * declararea modulelor: app.module.ts (ex. AngularFireModule) | + | * declararea modulelor: **app.module.ts** (ex. AngularFireModule) |
| <code> | <code> | ||
| - | AngularFireModule.initializeApp(environment.firebase, 'AngularDemoFirebase'), | + | import { AngularFireModule } from '@angular/fire/compat'; |
| - | AngularFireDatabaseModule | + | import { AngularFireDatabaseModule } from '@angular/fire/compat/database'; |
| + | |||
| + | //.. | ||
| + | |||
| + | imports: [ | ||
| + | // .. | ||
| + | AngularFireModule.initializeApp(environment.firebase, 'AngularDemoFirebase'), | ||
| + | AngularFireDatabaseModule | ||
| + | // .. | ||
| + | ] | ||
| </code> | </code> | ||
| </note> | </note> | ||
| Line 107: | Line 124: | ||
| ==== Aspecte diverse ==== | ==== Aspecte diverse ==== | ||
| - | === Actualizarea dinamică a paginilor în Angular === | + | === Actualizarea dinamică a conținutului paginilor în Angular === |
| - | <code> | + | <code html> |
| <mat-list> | <mat-list> | ||
| <mat-list-item> | <mat-list-item> | ||
| Line 120: | Line 137: | ||
| </code> | </code> | ||
| - | <note tip>Directiva Angular **NgFor** randează un template HTML pentru fiecare element dintr-o colecție. Similar, există **NgIf** pentru randare condițională</note> | + | <note tip>Directiva Angular **NgFor** afișează / generează un template HTML în pagină pentru fiecare element dintr-o colecție. Similar, există **NgIf** pentru afișare condițională</note> |
| ==== Resurse ==== | ==== Resurse ==== | ||
