Learn Angular A-Z: Complete Tutorial for Beginners
August 13, 2024 2024-08-13 6:49Learn Angular A-Z: Complete Tutorial for Beginners
It’s not an exaggeration to say Angular changed the way we build web applications. Learn the A to Z of Angular in this comprehensive four-hour video course. ► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_JWhRMyyF7nc&utm_medium=referral&utm_source=youtube.com&utm_content=description
Angular is a larger framework than React or Vue, providing more features and built-in capabilities out of the box. But that makes it a bit more difficult to get started.
In this course, you’ll learn everything you need to get started writing applications with Angular. We’ll start at the very beginning: you’ll install the Angular command-line tools, and we’ll create a new project together.
You’ll learn how to display data with Angular’s directives and templating syntax, as well as binding data to properties, attributes, and handling events. We’ll then dive into components, and you’ll learn how to create components that accept input and provide output. You’ll also learn how to set up two-way binding and manipulate styles within your components.
Later, we’ll look at some of the services and concepts that Angular uses, such as dependency injection, modules, and observables. You’ll learn how to create and use modules to organize your application, handle and validate form input with reactive forms, and build single-page applications with Angular’s router. Here’s the course structure:
1. Introduction
00:00:00 1.1 Introduction
2. Getting Started
00:01:52 2.1 Installing and Using the Angular CLI
00:15:22 2.2 Creating a Data Model
00:22:46 2.3 Iterating Arrays
00:30:13 2.4 Making Decisions
00:41:46 2.5 Binding Data to Properties and Attributes
00:47:54 2.6 Binding Events
00:54:58 2.7 Using ngModel to Bind Values to Form Controls
01:05:02 2.8 Listening for Changes to ngModel Values
01:12:43 2.9 Using Getters to Filter and Provide Data
3. Creating Custom Components
01:18:14 3.1 Creating a Component With Input
01:27:24 3.2 Outputing Information From a Component
01:33:17 3.3 Initializing Component Functionality
01:41:02 3.4 Setting Up Two-Way Binding
01:48:33 3.5 Practicing Two-Way Binding
01:55:30 3.6 Styling Components
4. Using Angular’s Services
02:01:29 4.1 Using Observables to Create an Event Bus
02:15:30 4.2 Refactoring the WishListItem Component
02:19:24 4.3 Injecting Dependencies
02:26:17 4.4 Issuing HTTP Requests
02:36:05 4.5 Providing Options for HTTP Requests
02:43:30 4.6 Handling Errors for HTTP Requests
5. Using Modules
02:51:42 5.1 Creating Modules
03:01:19 5.2 Exporting Single Components
6. Working With Reactive Forms
03:06:02 6.1 Introducing Reactive Forms
03:14:39 6.2 Creating Control Groups
03:20:02 6.3 Validating Reactive Forms
03:33:05 6.4 Writing Custom Validators
7. Using Angular’s Router
03:42:31 7.1 Defining Routes
03:50:49 7.2 Handling “Not Found” Pages
03:56:19 7.3 Navigating to Routes
04:03:28 7.4 Providing Data to Routes
04:10:17 7.5 Using Route Parameters
8. Conclusion
04:20:05 8.1 Conclusion
Useful Links:
• Course Source Files: https://github.com/jwmcpeak/Angular-Fundamentals
• Angular: https://angular.io/
• Node.js: https://nodejs.org/
• Visual Studio Code: https://code.visualstudio.com/
We have a lot to cover, so let’s get started!
Read free Angular tutorials on Envato Tuts+: https://code.tutsplus.com/categories/angular?utm_campaign=yt_tutsplus_JWhRMyyF7nc&utm_medium=referral&utm_source=youtube.com&utm_content=description
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_JWhRMyyF7nc&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_JWhRMyyF7nc&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/envato
► Follow Envato on Facebook: https://www.facebook.com/envato
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
source
Comments (41)
@gamekyuc
https://youtu.be/JWhRMyyF7nc?t=5191, at this I wonder why the styles of wish-list {} from the app.component.css does not get applied to the wish-list component, and the host have to transform it to the wishList.component.css itself?. Any one help me understand why? Thank you !
@dev-j8q
best
@yulinxp
For people curious about the Angular version, readme file in source: This project was generated with [Angular CLI] version 14.1.3.
@rayenmerghmi5664
01:53:43
@legend225dev
Excellent course about AngularJs. I have worked with reactjs, but for separation of concern and build-in feature provide by angularJs. I have decided to choose angularJs to build a web application for a customer.
@apoorvalandge2687
Does the tutorial cover State management ngrx?
@Lyra35319
thank you so much,good video
@sauravsingh471
Thanks, I completed the whole video, and I was coding along side you, To anyone who is thinking of watching this , you should definitely watch it, although a few things have changed but the remaining 85% of the things is still the same
@shortscut7614
28:35
@CristinadeKlerk
In order to run this project in angular 17+, just initialize your project without standalone using
ng new wishlist –no-standalone
instead of ng new wishlist
@DrTatra
thank you so much <3
@TrueDetectivePikachu
44:22 you can also do checked={{item.isComplete}}
@SaiDanushTV
Before I start with this video is there any pre-requisite that I need to complete?
@Razes9ooo474lO4
Subscribed from india…
@Kestrel1971
Fantastic video. I've spent the last 20 years working on server-side code with desktop front-ends (WinForms and WPF). I recently switched projects, working with ASP.NET Core and an Angular front-end. This is, by far, the best introduction to Angular I've watched.
@BR50Kab
for Angular 17 and higher dont use ngFor but @for.. It needs a tracking id so you need to extend your class with an id and make sure the constructor adds it to your item : number and give your items ids in the constructor
<div class="container">
<ul>
@for (item of items; track item.id) {
<li>{{item.id}} – {{item.wishText}}</li>
}
</ul>
</div>
@BR50Kab
some issues with not finding the module due to not having a baseUrl set, after setting this to ./src and removing src from the import location this worked. Probably also coul have used .src/etc in the import
@erzascarlet2145
Is it just me or is there something about the way he says $100,000,000,000?
@kxhakol
hats off, you have a gift for explaining things
@BR50Kab
no ng command (not recognized) reinstalled node js but still no ng
@independentthinker4881
Great tutorial but badly needs to be updated to the a latest versions of node and angular as they have some pretty big changes that break this tutorial.
@soukainaj
Thanks for the tutorial! Your way of teaching is amazing.
@larryking1153
Great tutorial….One of the best Angular tutorials I've seen
@SamoPlaysMinecraft
Give this man 100,000,000,000!!!
@SRIVENKATESHR-qn1lp
25:40
In the latest version of Angular v17, built-in for loop is updated. Below is the syntax ,
<div class="container">
<div >
@for (item of items; track $index) {
{{item.wishText}}
<div> 
</div>
}
</div>
</div>
@omarwasfi
thanks
@JenniferThomas-wz2qu
Thanks for this very detailed tutorial
@mrtn5882
Is there a full-blown course by Jeremy that goes beyond these initial four hours? I'd happily pay to get access to that, in case it exists.
@kevin-howard
What's the vscode theme?
@kekiir
Some one pls tell me, how he is doing this: 28:12?
@kekiir
28:12 how did you do that paste with all of the stuffs?
@kekiir
28:09 how did you paste that markup???
@riclaq4437
Monster of a tutorial I think it's gonna help me a lot for my internship 🙂
@riclaq4437
3:07:12 the what now
@atherghuftar1578
thank you, you made it very easy.
@abdelrahmanmahmoud4995
One of the best Angular tutorials, I really like how you simplify everything
@nareshkumar894
What is the Angular version used in this tutorial???
@user-lm5tr3zz9x
I encountered NG0100: ExpressionChangedAfterItHasBeenChecked in 4.1 Using Observables. How to fix this?
@user-qd5ho4jj4t
thank u, really great work, best tutorial
@js-fullstack-dev
For Angular@17 use cli command: 'ng new projectName –standalone false'
or 'ng new projectName –no-standalone'
@denindenial
Awesome tutorial! Thank you