Learn Angular A-Z: Complete Tutorial for Beginners
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- 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: elements.envato.com/?...
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: github.com/jwmcpeak/Angular-F...
• Angular: angular.io/
• Node.js: nodejs.org/
• Visual Studio Code: code.visualstudio.com/
We have a lot to cover, so let’s get started!
Read free Angular tutorials on Envato Tuts+: code.tutsplus.com/categories/...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?...
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: elements.envato.com/?...
► Subscribe to Envato Tuts+ on TH-cam: / tutsplus
► Follow Envato Tuts+ on Twitter: / envato
► Follow Envato on Facebook: / envato
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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
One of the best Angular tutorials, I really like how you simplify everything
Thanks for the tutorial! Your way of teaching is amazing.
Thank you Jeremy, for this absolutely fantastic video. I just started work in Angular as a junior dev and it feels very overwhelming as I only learned React. I'm just half way through your video and it's helping me so much already! I watched few other tutorials, but this is by far the simplest explanation what you can get while building. And it's actually the newest what you can get as well. Plus it's in native english and your voice is a pleasure to listen to! Thanks again, great work.
Great tutorial....One of the best Angular tutorials I've seen
Very professional it helps me a lot
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.
same, my project is frontend empowered by angular and backend supported by .net, which provide more scalibility.
Give this man 100,000,000,000!!!
THANKS Envato TUTS!
Thanks for a really great work!
hats off, you have a gift for explaining things
thank u, really great work, best tutorial
Thank you Envato!
Thanks for this very detailed tutorial
Job requires angular but the more i watch this the more i love react 🤣
Hard agree. Bi-directional binding of properties between parent and child is going to be a nightmare to debug 😱
Having to deal with html "template" files rather than JSX/TSX is just gross.
I also don't like being forced into writing components in an OOP way with classes. React moving to functional components and hooks was the best thing that could have happened to it. I imagine this new job is going to be HOC hell, like React originally was.
same boat
Agree 👍👍👍💯
thank you, you made it very easy.
Thank youuuu 😊😊
Monster of a tutorial I think it's gonna help me a lot for my internship :)
worth every second!!!!!
Nice, good explanation! 👍
This is the best Angular tutorial! Thank you so much
absolute best bro
thank you so much,good video
Angular 17 changed a few things (no modules by default), so this tutorial needs some minor updates I guess.
"ng new appname --no-standalone" use this command for setting up the environment. now you'll have the setup environment with module.ts file
Great tutorial... What are the chances of getting one (or an update to this one) for Angular 17 and Signals when it comes out? :)
thank you so much
Amazing tutorial, after finishing it , angular doesnt look that annoying anymore
is there a reason to not use ng generate component to add your components?
You sound really nice, reminded me a bit of narrator from Stanley Parable :)
cool video)
Thank you for this great tutorial. I have question, why you use "let" to define all the variables? I think use const will be better in some cases.
thanks
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
I love the animation in the beginning how do y'all did this?!? straight up dragging stuff and setting their time and position? animator where r u
Thanks for a really great work!
Can you share the settings and extensions you use for VS Code?
same question ... if you know then pls reply
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
Thank you sir for this great tutorial.
Do you have or do you plan to create the next level Angular course?
I agree. The next level of Angular course will be awesome.
The best tutorial online.. plz let us know if you have a channel, dont mind even paying for any subscription.
The best thing about this tutorial is that your voice is perfect for listening for hours 😭
Can't believe that I learned Angular in just a week thanks to this video.
Wouldn't it be nice if we all liked this great Tutorial 😊
Subscribed from india...
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.
I like your theme can you tell me which one of is it ?
I just worked through the entire video and didn't have a single issue where my code didn't work outside of my mistakes. Just make sure you're using angular 16 and not whatever is latest (17 right now).
Thanks mate
What color theme is this? anyone knows maybe ? i mean the same effect in *ngIf =" ......."
do i need to know typescript for this course?
whats the version of angular youre using?
let's go first time learning angular
how can i make my classes implements OnInit by default when i generate a components ?
Does the tutorial cover State management ngrx?
i'm having some trouble to generate app.module.ts file, what supose to be? help please
Before I start with this video is there any pre-requisite that I need to complete?
is there practice project with this video tutorial
?
I'm at 6:55 it asked me if I want to enable server-side rendering and static site generation, should I have said yes? I said no
Awesome tutorial! Thank you
this video made me realize , how bad angular is ... ain't no way you have to write all that boilerplate and overcomplicate everything ; react and frameworks associated with it do everything done here so much easier and you gain insane amount of time
ty for the tutorial , i wanted to understand how angular works and i got a good idea but no way i'm using this on my small projects ; think using angular is only worth it if ur being paid to work on a huge project
Hello,
Can you please explain how to got bootstrap link in index.html at 23:55 in the vedio.
Hello sir, thank you very much for this tutorial. I have question. For implementation of ouput directive, why you used parentheses for (addWish) and (filter) but you used brackets for [wishes] ??? Excuses my english, I'm french speaker. Thank you.
One type of parentheses is for output and the other one for input
What is the Angular version used in this tutorial???
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.
28:12 how did you do that paste with all of the stuffs?
First comment. Worth a trophy
..it might be helpful to mention SOMEWHERE the angular version you're using - so that I could setup the right project number - cause as of this writing - 10 minutes into the video and Angular 17 doesnt have the app.module file. so now im stuck. Also the CLI asked me about server side rendering and I didnt know whether to choose yes or no.
This is 16.2, reinstall Angular for this tutorial
Type the command for installing angular the add @16.0.0 at end then you will good to go.
So the version 17 has really changed a lot, hasn’t it?
I had the same issues, also I had to remake the folder of the project to be able to add a module file 1 hour into the tutorial and now there's new problems
@Aeris-Xu it has and I cant find ant tutorials for it. This is frustrating.
3:56:58
route table
router link
I encountered NG0100: ExpressionChangedAfterItHasBeenChecked in 4.1 Using Observables. How to fix this?
You truly deserve the $100,000,000. Thank you.
Sorry, I meant - $100, 000, 000,000.
What's the vscode theme?
28:09 how did you paste that markup???
what version is this 16 ?
At 3:00:43 when i export the WishService module like you do in the video my app crashes and ı get 'WishService does not appear to be an ngModule error. However if I don't export it everything works fine. Why is that the case? I am confused.
In WishModule, WishService needs to be listed in the 'providers' array:
@NgModule({
declarations: [
WishListComponent,
AddWishFormComponent,
WishFilterComponent,
WishListItemComponent
],
imports: [
CommonModule,
FormsModule,
HttpClientModule,
],
exports: [
WishListComponent,
AddWishFormComponent,
WishFilterComponent,
WishListItemComponent,
],
providers: [
WishService
]
})
export class WishModule { }
What version of angular is being used in this tutorial?
16
Some one pls tell me, how he is doing this: 28:12?
is this Angular 16?
bro needs oscar
👌
It's just a holiday!
- - no-standalon
28:35
25:40
In the latest version of Angular v17, built-in for loop is updated. Below is the syntax ,
@for (item of items; track $index) {
{{item.wishText}}
}
thanks
no ng command (not recognized) reinstalled node js but still no ng
you probably installed currently newest version of node that doesnt support angular. Try installing the version he did.
@@MirageDreamer550 Thanks, reinstalled node.js with chocolately and now not only ng is not recognized but npm is also an unknown command
i di have a working environment some years ago with a basic pagewith angular in the browser
@@MirageDreamer550 Thanks again, found it after several reinstall attempts, linking etc. You HAVE to install with admin privs (elevated) as well and ng will work. Looks like i had a %PATH% issue. Also ran ino the problem that the node version has to be an even number, fnm didnt help but i was able to install using chocolatey
3:07:12 the what now
Is it just me or is there something about the way he says $100,000,000,000?
I am stuck at 1:57:15 . I get this error when trying to use the ngClass directive : NG8002: Can't bind to 'ngClass' since it isn't a known property of 'label'.
SOLUTION:
In Angular 17 it seems like using ngClass directive in a label causes this unexpected behavior. Anyway , the solution I found requires you to use the class binding directly in labels If you only need to apply a single CSS class conditionally:
Anyway, I still push on, Angular looks interesting!
For someone, who is starting this when the @angular/cli is 17 or more, downgrade the @angular/cli version to 16. You can do this by the following command:
npm i @angular/cli@16.1.0
@Envato Tuts+ - could you help what could be the issue with version 17. The components.module.ts is not available when we create a new angular project. Thanks :)
next roadblock at 17:56 I don't have an app.module.ts file :/ I'll keep going tho, just pretend this didn't happen lol
You are using Angular 17...downgrade to 16
@@sameeryadav40 can you specifies which angular extension he is using
please do this npm i @angular/cli@16.1.0
Why downgrade? Just use "ng new test --standalone false"
@@js-fullstack-dev or maybe ng new --no-standalone