Angular Tutorial For Beginners | 3 Hours Course
Vložit
- čas přidán 20. 06. 2024
- 🔥 Secure your spot now and embark on your journey to becoming a Spring Boot master!🔥
aliboucoding.com/p/spring-boo...
🎁 🚀 COUPON Code: EARLY_BIRD_30
Source Code: github.com/ali-bouali/angular...
🎓 Are you eager to step into the world of web development and create powerful, dynamic web applications? Look no further! Welcome to our comprehensive Angular Crash Course for Beginners. 🚀
🎁 Spring Data JPA course: aliboucoding.com/p/the-full-g...
🎁 🚀 COUPON Code: EARLYBIRD20
🎟 Join this channel to get access to perks: / @boualiali
Recommended Courses:
🎬 Spring Boot security & JWT token: • Spring boot 3.0 - Secu...
🎬 Spring security - Roles and permissions: • Spring boot 3 & Spring...
🎬 Spring Boot - Microservices architecture: • Microservices tutorial...
🎬 DevOps - Github Actions CI/CD: • GitHub Actions CI/CD p...
🎬 Spring Security - KeyCloak integration: • Spring boot 3 Keycloak...
🎬 DevOps - Docker for Beginners: • Docker tutorial for be...
🎬 DevOps - AWS EC2 deployment: • 🚀 Deploy Spring boot a...
🎬 Angular - Full course from scratch: • Angular Tutorial For B...
🎬 Websocket - Chat application one to one: • WebSocket Tutorial wit...
🎬 Spring Security - Two Factors Authentication 2FA (TFA): • Two Factor Authenticat...
🎬 Spring Boot - Swagger UI & OpenApi Decomentation : • Spring boot 3 - OpenAp...
🎬 Spring Boot - Reactive programming & WebFlux: • Reactive Programming w...
🎬 Spring Data JPA & Hibernate: • Spring Data JPA - The ...
🎬 Apache Kafka: • Apache Kafka Tutorial ...
CONNECT WITH ME:
👨💻. Website: aliboucoding.com
👨🏫 Facebook: / 589612651142975
📸 Instagram: / alibou_coding
🎮 GitHub: github.com/ali-bouali
🏘️ Discord: / discord
📚 In this hands-on course, we'll take you from the basics to proficiency in Angular, the popular open-source framework for building modern web applications. Whether you're a seasoned developer seeking to expand your skills or an absolute beginner ready to dive into the world of coding, this course is tailored just for you!
🧱 What You'll Learn:
- Master Angular fundamentals and architecture
- Create interactive user interfaces with components
- Handle data efficiently using services and dependency injection
- Perform HTTP requests and handle errors like a pro
- Configure routing and navigation for seamless user experiences
- Apply best practices and optimize your Angular apps for peak performance
- Avoid common pitfalls and write clean, maintainable code
💼 Who Is This Course For?
- Aspiring web developers seeking to learn Angular from scratch
- Programmers looking to enhance their web development skills with Angular
- Anyone interested in building real-world Angular projects
#AngularCrashCourse #WebDevelopment #AngularTutorial #LearnAngular #WebDev #Coding #Programming #BeginnersGuide #AngularFramework #frontenddevelopment
Table of Content
-----------------------------------------------------------------------------
00:00 Introduction
01:26 Introduction to the Angular Framework?
10:01 Setting up the development environment
22:16 Understanding the project
53:09 Angular components
57:49 Angular components in action
01:50:38 Angular services and dependency injection
01:53:35 Angular services and dependency injection in action
02:11:44 Angular routing
02:15:00 Angular routing in action
02:33:23 Angular HttpClient
03:03:01 Implement a full example
03:15:00 Outro
📜 Course Highlights:
- Comprehensive step-by-step learning approach
- Hands-on exercises and projects to reinforce your knowledge
- Expert guidance from experienced instructors
- Valuable tips, tricks, and best practices
- Real-world examples and practical applications
🏅 Certification:
Upon completion, receive a certificate of achievement to showcase your newly acquired Angular skills and boost your web development career.
🎯 Don't miss this opportunity to become an Angular expert! Enroll now and embark on an exhilarating journey into the world of web development. Let's unlock the full potential of Angular together! 🎉
📌 Enroll Today: [www.example-course-website.com]
🎬 Stay tuned for more exciting web development tutorials and courses. Hit the 'Like' button, 'Subscribe,' and turn on the notification bell to never miss an update!
🙌 Thank you for choosing our Angular Crash Course for Beginners. We can't wait to see you in the course! Happy coding! 😊
#AngularCrashCourse #WebDevelopment #AngularTutorial #LearnAngular #WebDev #Coding #Programming #BeginnersGuide #AngularFramework #FrontEndDevelopment
Join the Micro Services course waiting list and get and get an exclusive EARLY-BIRD discount
aliboucoding.ck.page/d0f9317e13
Quick note folks- the angular 17 automatically creates a standalone project and won't have a app.module.ts file. If you want the app.module.ts file then create the project with the following command:
ng new "app-name" --no-standalone
That will generate the module based project.
thank you so much
Hi, thank you, sir. But, what is the difference between standalone and no-standalone? O.o
@@lelandaure angular are going to remove module. Standalone is default setting when u gen a component because it's simple
41:35 -----> 1:33:23 -----> 1:43:32 -----> 1:50:39 ----> 2:11:44 -----> 2:24:09 -----> 2:47:25 -----> 3:03:01
He is a legend, he covered alot of concepts in a crash course. This quality of informat is what is needed. I look forward for more advanced angular courses
Happy you liked it!
As a new in Angular I want to say you a BIG THANK YOU!
I would like to learn RxJS and NgRx from you because you explain things very very well. Thank you for this course
Sure, will do that
Waiting for your High quality videos
thank you very much about this amazing course
One of the best tutorials for beginners! Everything is explained in a very simple way and it's easy to follow and understand.
Happy you liked it!
This is amazing course that covers all basic topics. Huge Respect ❤
This straight 3 hours plus with you was amazing, clear and full of knowledge. Thanks a lot sir!!!
Glad you liked it!
Excellent Intro. All my "but why?" questions were answered where I would ask them. Team Angular should take note. This is how a good tutorial about Angular should look like.
Glad you liked it!
I just started a new project 2 weeks ago on springboot and was thinking about implementing angular for the front end and this is just amazing. Thank you so much
Sounds great!
Happy you liked it!
Thanks for the tutorial, nicely done! Now it's easier for me to understand the documentation and do my own project.
Glad it helped!
I've just come across this video and I found it very useful. Thank you!
You're very welcome!
my first Angular project. thanks, appreciate your effort.
Glad you think so!
Amazing tutorial, so much thanks!
You're very welcome!
Wow, that Angular Tutorial for Beginners is amazing! 🤩 I just completed the 3-hour course, and it's hands down one of the best learning experiences I've had. The explanations are clear, the examples are practical, and I feel confident in my newfound Angular skills. Highly recommended for anyone starting with Angular! 👍
Glad it was helpful!
Thank you for this tutorial!
You are so welcome!
This is amazing tutorial for the any one starting with Angular, worth spending 3 hours, no waffling true knowledge transfer every minute. Thanks
Glad it was helpful!
Easy to follow along! Thank you!👏🏽
You’re welcome 😊
new subscriber and good job Alibou! Thanks
You're most welcome!
i am already at min 30 of the video and i can say you are doing a great tutorial, i watched several tutorials and all wanted to just give a result, so the learner becomes happy, you giving a lot of essential explanations. thanks for the tutorial
Great to hear!
Thank you!
Very good beginner friendly tutorial
Glad it was helpful!
I appreciate your work, very good Angular course!
Glad to hear that!
Highly recommended for everyone, really amazing explanation with in less time and in simpler way
Happy you liked it!
Such a helpful tutorial
Summarized and all of the core concepts were covered.
Great video. Thanks a lot.
Glad it was helpful!
Thank you man for your work. I enjoyed the video a lot. Just two corrections: 1) sometimes you mix the words "array" and "table", also 2) a js object is not JSON as sometimes you use it incorrectly. Otherwise great work. :)
This has put a smile on my face. Thank you so much.
I'm so glad!
I really dont comment much. But this tutorial is truly valuable and beginner friendly. there is cut to cut explanation with example. and most of the basic building blocks are covered here. I will really love to watch advance concept too in your future videos or maybe a projrct in angular. Conclusion: This tutorial is way better than most of the angular tuts on utube. I do recommend to take notes about whatever sir is explaining it will help a lot for revision and for interview point of view too. Thanks for this tutorial. As i said before would love to watch such content in future from u.
I really appreciate your feedback.
check the book social network playlist for a complete angular application
Man I was just making an app with java and angular thank you sooo much timing couldn’t have been any better
That means i m on the right path. If i m not the only one
@@andilesimelane4771 yup my previous workplace also had their app using spring mvc and angular.
But I'm working on a spring boot angular personal project separately
Happy you liked it!
Your course and tutorial are crisp and clear...
Happy you liked it!
Your tutorial helped me a lot, thank you!
Glad it helped!
I appreciate your hard work ❤
Happy you liked it!
Great content as usual!
Happy you liked it!
Awsome crash course. Highly recommended ❤
Happy you liked it
Great course as usual . Allah yberiklik :)
I'm glad you like it
Finally an angular video with an accent I can get easily
Happy you liked it!
thank you very much ,your brother from Algeria
You are welcome brother
good job bro.
Although Google tried to somewhat sabotage you. I see app module doesn't exist from Angular 17 anymore, but still a very solid video
Thank you man, it is so informative! Pleas make a full stack project with nestJs/mangoDB if it is feasible!
Why not
THANK YOU SIR!
You're welcome!
Nice tutorial!
Thank you! Cheers!
good job alibou 😍
Happy you liked it!
Really good job. We are waiting for Mern stack tuto as ecommerce project hope that it can be soon 😊
Very soon!
Salute
Just an update if anyone create new project with ng new project , then no app.module.ts and routing module file will be created, instead config.ts will be generated which is considered as a standalone project. kindly use below command to create new project which would have routing and module file
ng new my-app --no-standalone --routing --ssr=false
Thanks for the update and sharing
@@BoualiAli kindly update angular playlist with more videos and concepts as your way of teaching and explaining is commendable. :)
Thank you Sir such a lovely tutorial , can u please make a Project on Angular + Spring boot + Spring security JWT
Coming soon
really nice tutorial.
Thank you! Cheers!
Lovely tutorial sir. Please do a project or a clone on this so we can learn a lot more real world examples
Sure, great suggestion
Merci 👍🏾
Happy you liked it!
Mashaallah Allahuma Barek
Happy you liked it!
Does anyone know where the source code is so we don't need to manually write the HTML/CSS? Great tutorial btw
thanks, @Bouali , which all plugin you have installed in intellij.
The new ui theme from the latest version of intellij
very interesting video!
Happy you liked it!
explained well i finished this video in 1 day, can u please make video on html,css,javascript,typescript
good suggestion
thx, plz create more angular videos and create a full spa using angular where you teach us how to upload file / image video / gallery using api in admin panel and assign category --> child parent relation
Coming in the next weeks
thx i am waiting@@BoualiAli
Good Job ❤
Thanks 🔥
good job
I'm glad you like it
gj and thank u❤
Any time
Mr.Alibouali thank you so much and as you promise me you will make Aws session soon
Yes Soon
Would you recommend this video if I don't have any knowledge in TypeScript? (I have a strong understanding of Java, so I know programming fundamentals)
yes
Muchas gracias Mister Ali por el gran curso....
Happy you liked it!
Great video , I also made similar video recently
Oh cool
Big fan ❤
Happy to have you here
please what is the backend you use ?
I already mentioned that it is a fake backend that you can find online
Super
Thanks
hi, i have question there are no app.module.ts in today version. is that normal
you are using angular 17
I am getting stuck on the json format section.:And my Table is hidden, where exactly is the sorce code, where can we copy it
the link is in the description
can you tell us what plugin you use
no plugin, I use the ultimate version
Please create video for Java design patterns
soon
i do not have .module file on my project is it cause i picked Y for server side rendering
you don't have .module because you are using newer version of angular that came out sometimes in november
it'll be more easier to follow along if you dropped the github repo, now i am just strting and you said you created a form and styled it, how did you create it i do not know, assuming there was a github sebi i for don go copy and paste am. now i will have to do it on my own
The link is in the description
Thank you for the great course, but how can I find the course material ?
in my GitHub repo.
link in the description
@@BoualiAli Thank you
Hello Sir Hopefully you are doing good. Sir Please start Spring Boot Website Development project complete Series. Please I am waiting
Sure
what is the name of the extension you used, that adds the type automatically
Intellij Ultimate version
thank you for the explanation. where can i find the source code of this app ?
In the description
I keep getting an error "'git' is not recognized as an internal or external command, operable program or batch file." on command when trying to create the angular project, does anyone know how to fix this?
Install git
never mind i fegort out
Brother plz creat full angular course
What are you missing in this?
great tutorial, where can i find the source code of this app ?
Thank you
Check the video description
.form-container {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f7f7f7;
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: center;
}
label {
display: block;
font-weight: bold;
}
input[type="text"],
input[type="email"]
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button[type="submit"]{
display: block;
margin: auto;
padding: 10px 20px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
I had to replay this, 30 times, to capture it. I think that I got it
thanks! next Angular for advanced ?
That's the plan!
Is it the same tutorial on udemy ?
Yes
Hi,
In my project, i don't see the app.module.ts file. Any idea why?
same
@@mohamedalisaidi2303 after downgrading from 17 to 16 it worked mate
user this command ng new my-app --no-standalone --routing --ssr=false
whats the meaning of third party and the source code please!
In the video description
where is the source code.
github.com/ali-bouali/angular-crash-course
or i have error
in world of tailwindcss who uses scss 😢
the main goal of the video is not learning html and css as the title explains :)
Enjoy learning Angular
please can you link me with the source code i cant delete the details component at 1:50:00
In the description
@@BoualiAli cant find the link for the source code
English is better than Frensh
true :D
I'm sorry to say this but you are not giving any actual and interesting value in this course to the community of learners, since there are plenty of this basic tutorials in youtube that teach you fundamentals.
I hope you will direct your efforts towards more advanced and unique content.
Thank you.
If you are not a beginner, this course is not for you. The title is clear (for beginners)
Wait until I provide something advanced.
You’re welcome
💋 Promo>SM
I have to say that I couldn't go beyond the first hour in this tutorial! Too much talk and less action and boredom got me. And even when the guy does implement something, he does it in a very trivial way (mostly modifying the original empty project) without having a project that motivates me to use concepts around it...Not recommended
You stopped at the point where the real action start.
I would like to learn RxJS and NgRx from you because you explain things very very well. Thank you for this course
Sure, will do that
Good Job ❤
Thanks 🔥