How to Connect Firebase to Angular Project - Do It Right
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- In this video you will learn how to connect Firebase to Angular project. Firebase is an extremely popular service solution from Google which can do lots of stuff for you. Here we will use it to store data there and connect Angular to it without need to setup backend or databases.
TIMESTAMPS
0:00 Introduction
1:02 Initial project
1:49 Configuring Firebase
4:00 Configuring packages
6:17 Angular application
6:52 Firebase service
10:19 Adding todo
13:36 Removing todos
15:40 Updating todos
18:37 Toggle All
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...
Thank you for this great tutorial. I found it really helpful. With all the updates to Angular recently it's great to find something that's up to date with all the latest features. Keep the firebase videos coming!
Glad it was helpful!
this is a great tutorial!
can you please continue creating Login and CRUD projects in Angluar and Firebase applications
I will add it to the list of ideas
It's great if you can provide more videos about firebase. Like authentication etc.
I will ad it to the list of ideas
@@MonsterlessonsAcademy It can also be a course idea :)
What I would love to practice too is this angular oauth2/oidc library for authentication and authorization.
But only if you are interested in this topic.
@@MonsterlessonsAcademyand also do topics like sessions.
You rock Oleksandr 👍 Thank you very much.
It's interesting that you have two services for the Todo model only. One for state (signals) and one for firebase.
I think I would have implemented one service for both cases: Call the API and update the signals inside subscribe(). I hope there is no problem with this approach?
Many thanks again
No problem. Just do how you like.
@@MonsterlessonsAcademy Ok Thanks!
Separation of concerns i guess
is it safe to show the apiKey of your firebase project? I mean in documentation they tell that you can simply copy paste it, but for example if your code is open source is it really safe?
No it's not safe. I removed the project after recording the video. You need to use environment variables (.env) if you push your repo to public folder.
@@MonsterlessonsAcademy got it, thank you a lot. And another doubt that i have is: if my key is in the index.html, isn't that visible to the user? I mean, when I go on an Angular website, the index.html is visible to me, isn't it? (I don't know how to access it but i guess in some way it is visible to the user)
U r a king ❤
Thank you!
is inject(service) the same as constructor(service: Service)
I haven't heard of inject before.
Then you need to check more video on the channel :)
th-cam.com/video/SMFhsSQvsEc/w-d-xo.htmlsi=-zn2GY_ElnpuRWLI
can i use SQL Server database in firebase?
It is not possible to use Firebase in this way. Firebase is a real-time object store. It is not a SQL database and is not intended to be a replacement for one. It completely lacks mechanisms such as JOINs, WHERE query filters, foreign keys, and other tools relational databases all provide.
where is the previous todo app project to follow this course? cannot find it.
Here you go th-cam.com/video/uyTC0Skvvls/w-d-xo.htmlsi=spWpGQOOvHS0LcsO
@@MonsterlessonsAcademy thanks for the quick response! appreciate
Please make video on how to host on firebase for both csr and ssr mode. please
I will add it to the list of ideas
@@MonsterlessonsAcademy thank you ❤️
The confusion I'm having is disconnecting you service from the firebase service. Do you have a video where you connect firebase from scratch without the existing service?
I don't understand your question. You can write the same code in the component without additional service if you want.
@@MonsterlessonsAcademy You have an existing toDoService from the previous video, I don't have any of that, I'm starting from a blank project and trying to only include my own FirebaseService. But I keep trying to understand what your doing, and you have a service in your component, which I don't understand.
what your version of angular and @angular/fire ??
17
Thanks for this excellent tutorial. Please tell me why you have so many subscribe() calls, but no unsubscribe() calls. Are they unnecessary?
It depends. If you want to be on the safe side just unsubscribe everywhere. Here we always have promises which means subscribe will be also called only once.
Thanks.@@MonsterlessonsAcademy
Can you create a video on getting and setting data with firebase realtime database with angular as there is no proper video about same
I will add it to the list of the ideas
Dude, I love your videos, but I have to ask. What the hell are those thumbnails of yours?
What is with them?
@@MonsterlessonsAcademy They are the exact opposite of the energy you give out and the content of the video.
I get that they are made to be more clickbaity, but I was actually discouraged from clicking on your videos at the beginning, because the thumbnail looks like a clickbait, usually from videos with 0 content. I stayed because, its actually good content and the headline.
@@godlypotato4195 I agree with you and you are not the first person to mention this. I will remove this specific thumbnail from future videos. Thanks for the feedback
Где увидеть API для firebase под angular 17? Where can I see the API for firebase under angular 17?
Nowhere. Documentation is not a thing in Firebase. You can find some pieces here but just basics.
github.com/angular/angularfire/blob/master/docs/firestore.md#cloud-firestore
🥲@@MonsterlessonsAcademy
Just sent you an E-Mail btw
Thank you, I responded.