Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:05 [2024/11/04 11:32] alexandru.predescu [Task] |
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 81: | Line 81: | ||
| * injectarea dependențelor: **pages/home/home.component.ts** | * injectarea dependențelor: **pages/home/home.component.ts** | ||
| - | <code typescript> | + | <code> |
| constructor( | constructor( | ||
| private fbs: FirebaseService, | private fbs: FirebaseService, | ||
| Line 90: | Line 90: | ||
| * 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 typescript> | ||
| - | AngularFireModule.initializeApp(environment.firebase, 'AngularDemoFirebase'), | ||
| - | AngularFireDatabaseModule | ||
| - | </code> | ||
| <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 133: | 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 ==== | ||
