Angular Course with NgRx - Building Angular Project From Scratch
HTML-код
- Опубликовано: 13 июл 2024
- ► ANGULAR NGRX COURSE - monsterlessons-academy.com/co...
In this course we will build a Medium clone using Angular and NgRx. This course is fully focused on fast and deep dive into creation of real application with Angular and NgRx. We will start from scratch and step by step you will get close to finished real application. You will deeply understand how to structure your application, build reusable and understandable modules and components and split code into smaller chunks of code. We will write code together in efficient way to make it pure and avoid data complexity.
For each lesson you'll get source code of the lesson, so it's easy to see the progress and get a working app on any lesson you want without retyping code from screen.
What you will learn in this course:
- Structure and configure project
- Write high quality code with Angular and NgRx on real project
- Isolating and splitting features
- Create reusable standalone components instead of modules
- Implementing authentication
- Cover everything with Typescript interfaces
- Working with real API
- Full compatibility with Angular signals
If you are feeling like you learned Angular but you still still missing knowledge of how to build your own real application this course is what you need. This course is fully focused on creating the application without getting deep into basic knowledge of Angular!
TIMESTAMPS
00:00 - Introduction
00:27 - Course introduction
01:40 - Bootstrapping the project
11:41 - Why NgRx?
15:06 - Project structure
21:45 - Prettier
24:49 - Language server
27:37 - Setting up local API
32:07 - Setiings strict configuration
33:38 - Register module
41:09 - Register layout
48:38 - Installing NgRx
59:52 - Installing Redux Devtools
01:04:24 - Creating auch interfaces
01:07:09 - Adding with reducer
01:15:17 - Creating selectors
01:21:14 - Register service
01:31:18 - Register effect
01:43:59 - Updating auth reducer
01:51:30 - Backend error messages
02:01:28 - Persistence service
02:10:18 - Outro
► 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
I was waiting for this entire collection for ngrx series . Thanks a lot!
Most welcome!
great work! everything is very clean and sequentially 👍
Thanks a lot!
Excellent lessons. Didn't know we can do all this within Angular and Ngrx. Thank a lot!
You are welcome!
Nice refresh, tnx for video :) I am sure alot of ppl, including myself, would be interested for Nx getting introduced into this stack (best practices for NgRx with libs in Nx workspace etc). There aren't many guides right now that are covering this topic :)
It is in the list already but as I have too many topics it won't come anytime soon.
Nice! Will definitely be looking into this later today.
Have fun!
Love this, excellently explained.
Glad it was helpful!
Excellent tutorial. Learned a lot from it. Thank you
Glad it was helpful!
awesome! thanks!
No problem!
Really good video! I definitely learned something new
Glad to hear it!
Well done , thanks so much
No problem 👍
Gotta watch this. ❤
Happy watching
Thanks for this wonderful detailed video. Could you please create one video or short on when to use state management and when to avoid it? I learned from resources that state management is an overkill in some scenarios.
I will add it to the list of ideas
Loveee standalone and signals
There are no signals in this course but as we write 90% of the code in ngrx we can use selectSignal so it is a one liner change. I show how to do it at the end of the course.
Thanks!
Welcome!
Excellenet video,learnt a lot from this. It would be more helpful if project could be shared
As this is a part of the full course the project is not shared. You can get access to the source code of every single video in a full course.
Thanks for your video Alexander, i would like to know do you feel more productive using Vim or Neo Vim instaad VSCode?
Yes obviously, this is why I use it :)
thank you a lot
You're welcome!
you are the best man
Thanks!
Great video with the clear explanation and one more questions, ARE YOUR COURSES DOWNLOADABLE AFTER SUBSCRIPTION?
No they are not. As in services like Udemy they are also not downloadable.
Thank you so much for this informative video on NgRx, I can see you have used combineLatest operator to pass argument as an single object of multiple observables, but mostly I have used like array of observables, can you please help me understanding if there is any specific reason or advantage that we get in using it as an object of observables?
You want to read it like data.foo, data.bar in the html. Array doesn't allow that.
@@MonsterlessonsAcademy ohh got it, this is specific use case. Thanks for replying.
Hello Sir Monster, i've been watching lot of your videos and i've come with a question. I wonder, is NgRx necessary? I've not studied it a lot yet but i feel like it has the mission of creating a "state store" and that is already possible through observables so i do not really see the point of using this third party library
I already covered that. ruclips.net/video/vUEaDo6aXic/видео.htmlsi=N6aF2TWcTB5lnkSD
Love this, well explained. can you please share github link for this bode base
No as this is a part of a full course. You get access to the course code of every video in the full course.
In chapter Setting up local API, you are mentioning an archive file. Where is it ?
You can take it from here: github.com/EJIqpEP/koa-knex-realworld-example
thanks for video. can you create for NGSX ?
I will add it to the list of ideas. Thank you!
The api is not working with localhost also
Your teaching skills are very good but i cant cope up with you because your using Vim ide. can you please switch to Vscode and explain the code little bit slow when ur writing it.
Unfortunately it is not comfortable for me to use Vscode so I can't help you with that. You can make the speed of the video slower if it is too fast.
Whats the difference between this and the 4 hour version? Is it redone or just condensed from the same material?
It is the first part of the full course in both videos. The course was redone with latest updates and the length dropped significantly.
When you install cli, you just need to omit -g if you don’t want to install globally and just to this directory. So why use npx, I am interested?
With npx you install all clis for anything in the same way. You also don't need to install it locally for every project.
I don't see the archive with the API for local installation
github.com/EJIqpEP/koa-knex-realworld-example
Can you please do a real world with signals?
I will add it to the list of ideas!
Holy mother of vim!
Thanks
plz use vs code because its really confusing when you are using this editor...
Unfortunately that won't happen as vscode is not comfortable for me and I used vim for years.
when i try to run command "docker-compose build" it tells me that there is no configuration file provided: not found. how do i fix it? at 31:15
You can just use public API for the whole course without Docker
Will u update the same course on RU lang ?
Unfortunately no. There won't be any updates or new courses in russian.
@@MonsterlessonsAcademy pity
Hi, sir. I keep getting the error "Cannot find module 'src/app/auth/auth.routes' or its corresponding type declarations." when trying to setup the routing at 39:00
It seems like the compiler does not register the ability to lazy load on routes config.
Any idea on how to fix?
It is difficult to help without seeing the code
i believe you did already fix it but if anyone else got same error, probably it is because of path to the file, your IDE should hint you the right one
Great video as always! Thank you for all valuable lessons you provide for us.
May I ask you to consider making some tutorials about Angular testing? Will be highly appreciated!
I already have a video ruclips.net/video/V322hFii-H8/видео.htmlsi=MvzoCh2M9Kl9Odr-
and a full big course which covers testing
monsterlessons-academy.com/courses/angular-testing-unit-testing-angular-and-e2e-testing
@@MonsterlessonsAcademy Thank you! I'm currently watching it. 🤓
Can you show the vim config?
ruclips.net/video/j6uqOvTRq6I/видео.html
ruclips.net/video/YrLiugDhCuk/видео.html
ruclips.net/video/Xa4aOOB7XZo/видео.html
Do you have mentoring program?
You mean 1 on 1 tutoring? Unfortunately no.
@@MonsterlessonsAcademy thanks for answer
where is the design template?
There is no design template but you can look on implemented real application
demo.realworld.io/#/
Not able to set up, docker-compose. pls share the project.
Here it is github.com/EJIqpEP/koa-knex-realworld-example
Thanks @@MonsterlessonsAcademy
@@MonsterlessonsAcademy Hi, can you pin the link on top? Many thanks.
Is this the same paid course on your website?😮
No. It is just a first part of it. It is not a full course.
Excuse me, sir, have you deleted the previous tutorial on the same topic? 😮
The first part on youtube? No
ruclips.net/video/DyklxnC2XP0/видео.html
On website the whole course is updated with latest changes of Angular like standalone components, createFeature and functional effects
@@MonsterlessonsAcademythank you so much! Both versions are very useful indeed
would you mind sharing me the source code?
The source code of every lesson is available in a full course.
Promo-SM 👇
bracketSpacing: false
aww.....😒
You can change it to true if you want :)
NgRx, Redux, Reducers etc. they will all going to be deprecated and turn into trash...
But why?
Thank you a lot for this very helpful and illustrated explanation, looking forward seeing more of it 🩵
Glad it was helpful!