Angular Tutorial for Beginners: Learn Angular & TypeScript
Vložit
- čas přidán 19. 05. 2024
- Angular tutorial for beginners: Learn Angular & TypeScript from scratch.
🚀 Ready to master Angular?
- Check out my full course: bit.ly/367j4nB
- Subscribe for more awesome content: bit.ly/38ijYjn
✋ Stay connected:
- Twitter: / moshhamedani
- Facebook: / programmingwithmosh
- Instagram: / codewithmosh.official
- LinkedIn: / codewithmosh
TABLE OF CONTENT
00:00 Introduction
02:54 What is Angular?
04:54 Architecture of Angular Apps
08:41 Setting Up the Development Environment
11:25 Your First Angular App
13:50 Structure of Angular Projects
20:43 Webpack
23:57 Angular Version History
27:31 Course Structure
31:55 TypeScript Fundamentals
32:34 What is TypeScript?
34:58 Your First TypeScript Program
37:57 Declaring Variables
42:46 Types
48:29 Type Assertions
51:15 Arrow Functions
52:59 Interfaces
56:54 Classes
01:01:22 Objects
01:05:31 Constructors
01:08:22 Access Modifiers
01:11:18 Access Modifiers in Constructor Parameters
01:12:58 Properties
01:18:15 Modules
01:23:22 Angular Fundamentals
01:23:41 Building Blocks of Angular Apps
01:27:22 Creating Components
01:37:00 Generating Components Using Angular CLI
01:41:40 Templates
01:44:08 Directives
01:47:34 Services
01:52:02 Dependency Injection
01:59:22 Generating Services Using Angular CLI
02:01:32 Exercise
#angular #webdevelopment #programming
Hi Mosh,
I took your angular course in 2020. I have just landed on my first angular developer job as a Junior Developer. I would like to thank you from all my heart. God bless you!
plz can you tell me how did you study?
@@muhammadshahrez2130 congrats buddy! wheres the party at!
hope you get lots of success and hope everyone gets the same!
Congrats dude!
Congrats! I hope the job is still everything you thought it would be!
Thank you Mosh. As a novice programmer and an experienced teacher/instructor I can only appreciate what a great job you are doing and recommend you to everyone I know who might need courses.
Update (25 July 2023)
Use "ng version" instead of "ng --version" (use "ng --help" command to see all the options)
saw your comment too late and this gave me a headache for like an hour lol
@@AyeBro_NotCool. Lol, still might help you in the future maybe debugging this kinda errors
If anyone is getting stuck around 1:39:50 because you don't see the "update" line, this is why:
Current version of angular doesn't seem to do this by default.
You have to first create your project like this:
ng new hello-world --routing true --no-standalone
The --no-standalone is what fixes it. Then when you run:
ng g c course
You will get the "update src/app/app.module.ts" line
What an intro! First 3 mins of project intro was enough to sell this tutorial like hot cake and yet you've decided to place it for free. Thank you so much!
I learned all I need to know! You're a great teacher. Thanks
It's nice to see you also learn everything around angular/typescript. Like getting around every aspect of the code and not only the typescript specific part, really enjoyable even for people like me who already know things.
You struck a perfect balance between providing context and not getting mired in too many details for first time users of this amazing tech stack. Thanks so much!
I really liked the way you presented TypeScript, by taking a plain JS example and progressively enhancing it.
Also you were always showing the immediate results of what you just typed, answering potential questions that a viewer could ask after a code change.
The pace is not too fast and makes it a good experience to learn about these concepts (especially as a non native english speaker).
I love how you're explaining not just how it works but also the concepts behind the tools. Well done. Thanks
Disagree. And your stutpid
@@sirkastic the irony is so strong I can taste it
Context implementation in React
czcams.com/video/g-rBjrVkpZg/video.html
@@sirkastic we got an obvious troll over here! 🤣
@@devanwoodruff7289 how so ?
You are an A+ instructor. I really appreciate that you showed the long way which I could understand from programming in other languages before you shortened the code example. Seriously loved this tutorial!
This is an extremely good video for anybody trying to get into software development. I have 5 years of experience and I'm currently searching for a new job, I have barely any JavaScript or Angular experience but this video is super helpful. Having a background in XAML and C#, the same concepts apply and transfer almost seamlessly. Thank you for putting this together!
Hey guys quick heads-up, to follow along with this course now you need to make sure to specify --no-standalone when creating the project through the angular cli as it by default does not include to module file.
Is the tutorial still relevant today?...I want to know before i watch
@@developedbymighty yes tutorial is relevant. just specify the above command and you are good to go.
@@curiousnerd2253thanks man
Note that there is a very useful Table of Contents under "SHOW MORE" in the description of this CZcams video. The TOC includes the time offset of each section and a link to jump the video to that course section. There is also a Course Structure section that gives an overview and suggested order for viewing if you are in a hurry.
Of all the angular tutorials I myself have seen as well as recommended this tutorial for sure shows how much effort have you put in this 2 hours tutorial. Huge respects to you. For anyone who's new to any stack your videos are the best ones. I genuinely want to appreciate what you are doing here and wish you the very best.
is this course still updated for this time?
Warning to angular students, this video uses an ancient version of Angular and a lot of what he says has changed. Also, the nice project he describes in the beginning is not part of the course, which I found misleading. But the instructor is good and the explanations are clear.
super misleading
Any link for new version tutorials? Thanks in advance!:)
Absolutely amazing video tutorial!
Mosh Hamedani, your explanations of every single thing - are awesome !
still watching it and am impressed by how u explain everything
Mosh, this is just what I needed, even if it's 5 years old, but you are such a great tutor! Learned a bunch of things that were a bit blurry before , and you make it so clear !Thank you!!
I am not used to write on these comments but I had to after watching your video. Your explanation is simply amazing.... never seen anything like it in my programing life (15y). You can compile so many informtion in such a short way and explain why something is used in a certain way. This is just brilliant. Thank you! Thank you again (you deserve 2 thanks )
Great!! First time in life I have seen tutorial with this type of clear cut explanation..Many thanks :)
Welcome to the Mosh world!
Great job Mosh, keep up doing great job, First time in life I have seen tutorial with this type of clear cut explanation..Many many thanks :)
This course helped me to keep up with my new project, because previously I didn`t have any production experience with Angular)
TY very much!
Hey em jobless nd uneducated.. I want to learn any language. So em enable to earn.. Please tell which language I have to learn first java c++ html python.. Plz help me with
@@gaslly62Really it depends what you are trying to do. I personally would recommend learning C# as your primary language as it is useful in many types of projects. Simultaneously I would learn HTML/CSS/JavaScript. This will give you a solid foundation for front end development. Once you have worked with this for a while you can look into other options like Typescript and Angular. You can also look into node.js to utilize javascript outside of the browser which enables you to create web API’s with it. But again, I personally would start with C#, HTML, CSS, and JavaScript (with jquery).
great course, Love the way you bring in design pattern concepts. These kind of lectures can hardly be found
Dear Mr. Mosh, I love the way you explain things. Thank you so much for creating this course.
Wonderful, Wonderful course, thank you so much, pacing, explanation, speed, difficulty, all of them 10/10. Presentation was top notch, everything was given an explanation, and I love the shirt.
i just started but already like how Mosh delivers the content. Voice, tone and speed really makes a lot of difference to the experience!
you're the best teacher around here! I've just started to learn angular and despite your video is quite old, you give the best clearer explanations! you're a guarantee! thanks for sharing your knowledge with us. :)
Really good lesson. Impressed by typing speed and the talk going so smoothly and perfectly. Other lessons waste a lot of time typing the code
Well done
I love the way u speak and ur voice. It makes me optimistic regarding the hard way of programmers
I gree
I love the way you structured this course . I first watched the tutorial on CZcams then I couldn't help buying the full course. Thanks Mosh for the quality you have offered in this valuable tutorial.
Great tutorial. No background with Angular but able to understand everything by just watching this. Thank you so much.
this is a complete guide for dummies , brilliantly explained and Dependency Injection made so simple. Thanks Mosh. Also, very relatable real world analogies!
Hey Mosh, Thanks for this amazing tutorial. You have very well explined the concepts so this is a highly recomended course for developers gettting started with Angular.
Love your tutorials...makes coding look easy when we know in reality it's not, but at least it gives the start for some of us that never quit when we have started... thanks
One of the Best Instructor I have found . Thank you Mosh. I have learnt many many essential courses which were required for my role from you and all of them have been really easy to understand and helpful.
This may well could be the best ever youtube tutorial of all time. Amazing, thanks so much.
Mosh definitely has a talent in explaining technical stuff!
you have in depth knowledge of what you teach. I searched various tutorials for angular but yours is best.
Amazing. Just bought the complete course.
The price completely worth the time i would spend jumping from video to video in CZcams. Well done, man.
This is the best Angular lesson I ever had, better than my College ! how much like to provide full content haha
Can you please update your tutorial, Angular has updated a lot since you made the video. It would be very helpful
I was looking to understand Angular and found your video. I must say this was THE most simplest way to explain. now when I see an angular component I am able to visualize the ts class and how the entire thing would stitch together on the run!! Thanks Mosh!! :)
I come from your 1 hour long video in javascript and i personally love how you teach keep the good job you are making a favour to the world
I was confused what the difference is between 2 and 4 and you cleared it. The answer angular 2 is not much different than angular 4. Thanks You Mosh !
I stumbled upon this course and know it is very old but still very useful even today. Excellent tutorial but as a long time full stack developer in many languages: Java, C++, Python, PHP, JavaScript Angular etc. the only thing that I take away from TypeScript is it's usage of access modifiers. By access modifiers ability to create the actual fields itself can confuse inexperienced developers of seeing a clearer implementation of the script unless they know of this feature. I would rather define the fields manually even if it is more code just for clarity and let access modifiers behave like they do in Java.
The way you explain everything, it’s become easier for me to understand. Thanks for making this video 🙌🏻
Thank you Mosh. I've enjoyed this breakdown of how Angular works. You rock!
Hi Mosh, am one of your biggest fans. I discovered your tutorials a few months ago when I decided to learn frontend development, and your tutorials have really helped me understand the essentials, especially of Node JS. Now, am working on my own FinTech project and I couldn't be where I am without the confidence I gained from watching your tutorials.
Hi there, happy to hear of your progress as I am also a huge Mosh' fan. I just finished his javascript and Jquery tutorials about to start Angular. I need your advice according to your intuition on which will get me a steady freelance job. Should I learn Angular or React, and after Angular or React, should I learn Node or something else, I will learn all, I just need the best combo to at least make some money. Looking forward to hearing your advice.
Nice to hear form you, @@michaelakinwunmi6608. IMO, I think in order for you to make a better decision about which framework to study next, you first need to have a crystal clear vision/goal of what you want to do with the skills...like a specific project you've always wanted to do e.g an app you really want to build. Having a goal like "the best combo to at least make some money" is a bit too broad and any framework will enable you to get there (with lots of effort). That being said, I personally chose to first learn Node JS before learning any framework because they are all based on Node JS, and a fairly good understanding of Node will help you understand the frameworks much faster. I chose Angular because it is a more complete JS framework with almost everything you need built-in. React and Vue have for a long time been considered JS libraries and not fdameworks, and that basically means there are several features they don't have built-in, which means you might want to add those features as third-party imports when using those libraries. With Angular, almost all the features you need are provided from the word GO. That being said, React and Vue are very powerful and robust JS frameworks/libraries and can allow you to build literally any kind of app you can imagine. So they're not that limited. A lot of people like and use them a lot. Furthermore, the underlying concepts behind all these frameworks are very similar and understanding how to properly work with any of them makes it very easy for you to learn any of the others when you need to. My final biased verdict is that Angular is a more complete out-of-the-box solution. I would advise you to learn Angular, and once you've really gained a working experience in it, you will find it very easy to use that knowledge to work with React and Vue. It will be like learning CorelDraw after having had a lot of experience in Illustrator. You will find lots of similarities. You will be miles ahead of someone who is just starting to learn React or Vue as their first JS framework. I hope this helps you see it from a fresh perspective.
@@kenkioqqo yes it does so much. Thank you alot ❤️
My pleasure, @@michaelakinwunmi6608. Glad I could help.
This tutorial is unbelievable !! Parallelly trying the concepts as you go. You gave me time and the sequence was so good, I am clear and the concepts are unforgettable
Nice one and also check this Real E-Commerce App using .Net 5 and Angular 13
Thanks
czcams.com/video/-IzpsC-0eBk/video.html
You are wonderful trainer. I love the way you explain the concepts with supporting examples. Keep doing good work !
Well structured, good presentation and explanations, audio quality is nice too ! That's exactly what I was looking for, THX A LOT !
I seriously wish my teachers tought me this way🙏🏼
You're just amazing 🙌🏼
Went through 4 years of university, learnt nothing. Watch this guy for 2 days = 1 semester of university.
@@alanphilpott863 Totally, I agree with you 😂🤣
@@alanphilpott863 Mosh always brilliant, you fell in love immediately while teaching you something, I take many courses from him, he takes you totally from beginner to high quite level.
I recommend anyone want to learn new something, first search about mosh if you found what you want, go ahead and never regret of your time.
if anyone having problems when trying ng serve you can just type : ng serve --port 4200 --host 127.0.0.1
it worked for me.
is there any problems , specially those related with the versions gap( difference )?
This was very helpful! Thank you! I needed to see the different concepts in action to from the terms used in Angular!
This is one of the best tutorial I have found on CZcams. Thanks a ton! you made it so easy.
Thank you Mosh! I'm learning Angular + Node.js and this tutorial is very useful!
Hey Rocco - I too am learning Angular and NodeJS :)
I'm too learning angular + nodejs
Holy Crap!.... you are a real Software Engineer.... Teaching how to right CLEAN CODE as i am learning
If you want to write clean code. Just get the book Clean Code by Robert C Martin.
There is some good stuff in this vid. But don't confuse clean code with less lines of code.
Read the clean code book if you're serious about clean code.
@@TheAthanik thank you
@@thinguyeninh581 That's basically the bible of clean code, reading it is a must in my opinion.
Been in the backend using OOP for 20 years -- decided it's time to take a look at the frontend stuff people have been taking about. Enrolled in your course. I stayed away from the frontend because of JS. The idea of having a solid OOP-like language in the frontend is what brought me around.
i dont know how to thank you Mosh....you are the best programming teacher out there. i have been trying to study programming during quarantine and you have helped me a lot in every aspect of my coding journey! i would recommend his courses to anyone who is beginning to code. :)
I'm definitely enrolling to your course. Your teaching is awesome. My one month college = your one hour video.
Did you enrolled in udemy
@@subbumahadasa6890 No he probably decided to take up knitting and crocheting.
You're awesome dude, make more pluralsight courses, I really enjoy your lessons.
Mosh! You are the best. I love all your courses! You made me believe that mostly everything can be easily learned if you have the basis of software engineering & that is amazing!
beautiful tutorial. Extremely impressive. Its not the first time i studied angular through some tutorial. But this tutorial made everything so easy and sparkling clear. I had to buy the full tutorial. I just couldn’t resist. Thank you. Thank you.
Loved this video, love the way you teach. The most important thing is that it's not boring, it's engaging, and worth watching every second of it. 10 Stars **********
Do you need handwritten notes of the above lecture?
@@pikacoder5782 yes please
@@pikacoder5782 can you please forward it to me if possible?
@@pikacoder5782 Can you please forward the written noted for me too
Really nice!! For someone who has to start from basics, this is going to be a great help!!
This course is fantastic and the way it has been delivered with is impressive!! The course is so informative and has been explained in a super easy way!! Every single piece of information was explained even briefly (in case it's outside the scope of the course)!! Would recommend this course to anyone who wants to learn Angular and Typescript in an easy, joyful, and interesting way!! Thank you, Mosh!! This is really appreciated!! I'm really impressed!! 🤩
Your teaching technics are amazing. I am glad that I found your channel. You are a legend. God bless you
When it comes to how to begin Angular, Experts say "Watch Mosh's Angular Tutorial for Beginners" video and you're good to start :)
Hi Mosh,
Thanks for this tutorial, it was awesome to see you teaching flawlessly. But I have one question -
Can you please explain how we can use existing HTML theme to develop the angular app? The main concern here is how we can take its custom JS (In my case the custom js uses chosen.min.js, which modifies DOM element in document.ready function of jquery) and allow to modify dom element, as when we do route through one link to other JS will not be reloaded again in browser, which causes not to apply logic which written in ready function. (this is because the page will not refresh in a browser, because of routerlink behavior).
OMG, so beautiful! Thanks a lot. So much clear information in 1 perfectly constracted material!
Wonderful teacher! Very progressive and clear. Thank you!❤️
I develop program base on Windows form It's very so hard for me to do web app after I watched this tutorial it made me have hope again :D So I already get the complete course.
same
I replaced windows with ubuntu. If you are a developer or are planning to be one in the future, switch to linux.
@@ebaadansari6728 no need to. windows does the same, and in some scenarios even better.
Same here! I've been trying to get into Web programming for years, I've been frustrated each time by how difficult it is.
11:20 For those using versions of Angular > 14, the command to confirm Angular/CLI installed and the version is "ng v" (no longer --version)
Thanks man!
@@Libipunk thanks brooo
Thank you!
Thank you
You are my first React teacher and my first Angular teacher. Your explanation skill is A+ class.
You are the best out there. I watched lots of your courses and one thing I love about them is that you explain what the course is all about and why it's useful. I think that's really important to understand what the thing being taught actually is. So keep on doing great work! Love your content, amazing videos!
Excellent ..very helpful for begginers
When checking if you installed angular cli, type "ng version" instead of "ng --version".
Thank you so much
I have been using Angular for about two years and here I learned things I never thought about
Great Tutorial
*mindblown* by TypeScript today . This presentation may grant me my first internship and possibly a job, thank you mr Hamedani for your content.
Very interesting about enums- I didn't realize that they just increment based off of the element that comes immediately before! Example:
enum Color { Red = 0, Green = 1, Yellow = 4, Purple, Blue = 2, Indigo };
let backgroundColor = Color.Purple;
console.log(backgroundColor);
backgroundColor = Color.Indigo;
console.log(backgroundColor);
Outputs:
> 5
> 3
This course needs to be updated since there are some breaking changes on using Angular and Firebase's latest versions. Following the course with the latest version of Angular and Firebase is troublesome at the moment!
Thanks
And then how many updates after? Infinite? This is knowledge for the time it was created. Great teaching.
@@nugzila4170 Jovito didn't say anything about how this course is bad. He's just saying that it should have an update for the current time. Is there really an issue with having knowledge for now? Rather than 'the time it was created'?
this dude is the great and humble one compare to others in youtube. thanks Mosh
Very clear explanations and right speed. I love it!
Initially I was excited that such a nice website I can learn is 2 hours.
But sad 😔
Anyways... I am going to buy this course.
Very well explained.
Helpful for beginners like me.
I know I'm years late to this, and will be supplementing with more modern tutorials, but this video kicks ass. Only thing I'd say is that as someone who takes handwritten notes to learn best, I have SO MANY things crossed out because of the method of introducing a topic only to then say "however, this isn't actually how we're going to want to use this" 🤣
Thank you so much for all the work you put into this.
can you link me modern tutorials brother?
@@Ouba1 czcams.com/video/WaT_yGzm47I/video.html
@@tyrantula767 thank you sir
Im glad this gives both Angular and Typescript, but it’s not updated, but did enjoy the teaching style.
First time studying Angular and this only helped me understand typescript
thanks mosh! really appreciate you putting up this video. it was reallly helpful.
will you do any new courses on angular (7+) with some back-end too?
This is best Angular Tutorial.
One of the best and detailed Angular Tutorial I have ever watched. ty!
Needed to start a new project with 'modern' technology for work. So I picked Angular. Thankyou very much for this introduction its helped greatly!
I'm trying to find another tutorial videos to get a better understanding; Never have I been so wrong...
The best course I've ever heard
Thanks a million
Hello Mosh
This is the best transition a Java programmer can have into Javascript - A journey through the Typescript mountains and forests.
All others approach their Typescript tutorials from a Javascript Developer's perspective. Many many thanks
Hey Mosh, I feel mislead... almost. I loved the tutorial! and learned a lot! I thought we were making an e-commerce site? because in the start you said, "you will build and deploy a real e-commerce application using angular firebase"
Love the tee shirt. Drew me in for gearing up for a 2 hour tutorial. With allowances for coffee and bio breaks :)
That shirt fucking trash. Sorry but is true. Cringe AF.
Best tutorial I found on angular. You have great teaching skills.
What a great video tutorial you just made me love to develop in frontend because am more of a backend developer but this is well explained. Thank you
So here I am a complete newb to any form of programmation.
I wanted to make a website for my wife's business. Friend highly recommend angular. Why not search CZcams for tutorials. Spend a few minutes searching for one with a decent accent. Hey this guy looks interesting.
About 1 hour into the tutorial . Boy I'm digging thru it.seems pretty complex I've spent at least 2 hours following and repeating every step to get accustomed to the program and general concept. In that time I've got everything setup. A web page with my desired name, heading and managed to load 1 component with a template "contact" (if that makes any sense )
I keep watching and now I'm at ~ 1h55. Everything I watched since my previous progress was is basically " you see what we did before. Don't do that. It's not the right way to do it. you can do this instead " then this goes on for ~ 35 minutes. He changes 2 words. Another 15 mins of gibberish explanations.
Then completely confused about what I did with the last 5 hours of my life (yeah cause I kept scrolling back and back to check wtf was going on)
I realized I spend 30 mins listening to him talk about "draw points", constructors, etc only to never use them again (or give any useful information about them. No clue what they are or what they do)
I fast forward to the end of the video. Now in 20 minutes he added 3 lines. "Authors, author 1-2-3"
Now if I had to resume my whole experience with this video.
I spent at least 3-4 hours trying to understand complex informations that had absolutely no further use in the video,i realized that after all this time spent listening and trying to mimic what he did:I made a blank page, with a title and 1 line/word or text. I still don't have a single clue what angular is or How it works. I have no clue about the very basics of it. I have no knowledge of what difference is there between ' '. " ". () {}. {{}} [ ] ` ` :;., or any of the basic commands and bases of angular.
This is absolutely not a tutorial for beginners and you do not "learn from scratch"
I was going to start this tutorial and thanks to your comment. I will choose something else.
It´s a tutorial for beginners of people that actually know computer science, i recommend you to use other services like Wix, GoDaddy or Wordpress for your page.