Angular Tutorial for Beginners: Learn Angular & TypeScript

Angular tutorial for beginners: Learn Angular & TypeScript from scratch.

🚀 Ready to master Angular?

✋ Stay connected:

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

[muhammadshahrez]

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!

[gronavet]

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.

[friize]

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.

[sloxpsh]

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.

[AkhilKumar]

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!

[goddardpk]

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!

[angelicadimude]

I love how you're explaining not just how it works but also the concepts behind the tools. Well done. Thanks

[etis]

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).

[laurabartel]

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!

[xWavess]

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!

[daviddeasy]

Note that there is a very useful Table of Contents under "SHOW MORE" in the description of this YouTube 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.

[tjjuxmv]

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

[trueredexe]

I learned all I need to know! You're a great teacher. Thanks

[yoiejff]

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.

[veebxl]

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!!

[Putin___Huilo]

Absolutely amazing video tutorial!
Mosh Hamedani, your explanations of every single thing - are awesome !

[exiledvegetable]

still watching it and am impressed by how u explain everything <3

[awesomeplay]

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!

[ThiagoSouza-zfrr]

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 )

[shreeharifood]

Great!! First time in life I have seen tutorial with this type of clear cut explanation..Many thanks :)