Тёмный

Learn Angular A-Z: Complete Tutorial for Beginners 

Envato Tuts+
Подписаться 1,5 млн
Просмотров 139 тыс.
50% 1

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 RU-vid: / tutsplus
► Follow Envato Tuts+ on Twitter: / envato
► Follow Envato on Facebook: / envato
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Опубликовано:

 

5 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 120   
@Kestrel1971
@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.
@abdelrahmanmahmoud4995
@abdelrahmanmahmoud4995 3 месяца назад
One of the best Angular tutorials, I really like how you simplify everything
@patriciebakosova4878
@patriciebakosova4878 8 месяцев назад
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.
@soukainaj
@soukainaj 2 месяца назад
Thanks for the tutorial! Your way of teaching is amazing.
@larryking1153
@larryking1153 2 месяца назад
Great tutorial....One of the best Angular tutorials I've seen
@kxhakol
@kxhakol 2 месяца назад
hats off, you have a gift for explaining things
@gajananfetare4901
@gajananfetare4901 10 месяцев назад
Very professional it helps me a lot
@jackiechen9098
@jackiechen9098 8 месяцев назад
This is the best Angular tutorial! Thank you so much
@Mark-nm9sm
@Mark-nm9sm 8 месяцев назад
Job requires angular but the more i watch this the more i love react 🤣
@MrChrizzilla
@MrChrizzilla 2 месяца назад
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.
@victortarus2814
@victortarus2814 2 месяца назад
same boat
@hassanmostafa4070
@hassanmostafa4070 Месяц назад
Agree 👍👍👍💯
@firsthomebuyer
@firsthomebuyer 10 месяцев назад
Thank you Envato!
@SamoPlaysMinecraft
@SamoPlaysMinecraft 2 месяца назад
Give this man 100,000,000,000!!!
@nouchance
@nouchance 10 месяцев назад
THANKS Envato TUTS!
@riclaq4437
@riclaq4437 3 месяца назад
Monster of a tutorial I think it's gonna help me a lot for my internship :)
@remoonalmaghout9621
@remoonalmaghout9621 7 месяцев назад
Thanks for a really great work!
@user-qd5ho4jj4t
@user-qd5ho4jj4t 4 месяца назад
thank u, really great work, best tutorial
@trungkienle1431
@trungkienle1431 7 месяцев назад
worth every second!!!!!
@JenniferThomas-wz2qu
@JenniferThomas-wz2qu 3 месяца назад
Thanks for this very detailed tutorial
@atherghuftar1578
@atherghuftar1578 3 месяца назад
thank you, you made it very easy.
@DevGeniusHub1
@DevGeniusHub1 4 месяца назад
Nice, good explanation! 👍
@user-mh4lq5ce6u
@user-mh4lq5ce6u 9 месяцев назад
absolute best bro
@Mark-nm9sm
@Mark-nm9sm 8 месяцев назад
Amazing tutorial, after finishing it , angular doesnt look that annoying anymore
@eljana123
@eljana123 10 месяцев назад
Thank youuuu 😊😊
@bemaxng4676
@bemaxng4676 10 месяцев назад
Wouldn't it be nice if we all liked this great Tutorial 😊
@vladimir_dev
@vladimir_dev 8 месяцев назад
Great tutorial... What are the chances of getting one (or an update to this one) for Angular 17 and Signals when it comes out? :)
@smrsgv
@smrsgv 8 месяцев назад
Thanks for a really great work! Can you share the settings and extensions you use for VS Code?
@princechangani5302
@princechangani5302 5 месяцев назад
same question ... if you know then pls reply
@DH-jw4iy
@DH-jw4iy 9 месяцев назад
Thank you sir for this great tutorial. Do you have or do you plan to create the next level Angular course?
@DownShut
@DownShut 9 месяцев назад
I agree. The next level of Angular course will be awesome.
@anzaniradali1706
@anzaniradali1706 8 месяцев назад
The best thing about this tutorial is that your voice is perfect for listening for hours 😭
@DownShut
@DownShut 9 месяцев назад
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.
@zNeoDev
@zNeoDev 7 месяцев назад
Can't believe that I learned Angular in just a week thanks to this video.
@DrTatra
@DrTatra 18 дней назад
thank you so much
@petermeredith8698
@petermeredith8698 5 месяцев назад
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).
@humanity7880
@humanity7880 5 месяцев назад
Thanks mate
@slin3232
@slin3232 7 месяцев назад
Angular 17 changed a few things (no modules by default), so this tutorial needs some minor updates I guess.
@user-ee1hg
@user-ee1hg 2 месяца назад
"ng new appname --no-standalone" use this command for setting up the environment. now you'll have the setup environment with module.ts file
@tonykalajo6634
@tonykalajo6634 4 месяца назад
The best tutorial online.. plz let us know if you have a channel, dont mind even paying for any subscription.
@h.t.8812
@h.t.8812 6 месяцев назад
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
@Snegge202
@Snegge202 9 месяцев назад
is there a reason to not use ng generate component to add your components?
@ShaggyRobot
@ShaggyRobot 8 месяцев назад
You sound really nice, reminded me a bit of narrator from Stanley Parable :)
@MicheleMoodispaugh
@MicheleMoodispaugh 8 месяцев назад
cool video)
@carlogbossou9253
@carlogbossou9253 9 месяцев назад
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.
@norepeato
@norepeato 8 месяцев назад
One type of parentheses is for output and the other one for input
@mrtn5882
@mrtn5882 3 месяца назад
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.
@Razes9ooo474lO4
@Razes9ooo474lO4 Месяц назад
Subscribed from india...
@BR50Kab
@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
@denindenial
@denindenial 4 месяца назад
Awesome tutorial! Thank you
@omarwasfi
@omarwasfi 3 месяца назад
thanks
@codeavecwinner
@codeavecwinner 10 месяцев назад
First comment. Worth a trophy
@ferreiradelima96
@ferreiradelima96 6 месяцев назад
do i need to know typescript for this course?
@NoumanKhan-ck7vx
@NoumanKhan-ck7vx 10 месяцев назад
let's go first time learning angular
@matthewkk5087
@matthewkk5087 5 месяцев назад
I like your theme can you tell me which one of is it ?
@SaiDanushTV
@SaiDanushTV 24 дня назад
Before I start with this video is there any pre-requisite that I need to complete?
@mypreciouz5634
@mypreciouz5634 8 месяцев назад
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.
@blue-jk2qu
@blue-jk2qu 6 месяцев назад
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 { }
@inakaboyz
@inakaboyz 7 месяцев назад
whats the version of angular youre using?
@unknownworld9815
@unknownworld9815 5 месяцев назад
is there practice project with this video tutorial ?
@independentthinker4881
@independentthinker4881 2 месяца назад
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.
@CristinadeKlerk
@CristinadeKlerk 11 дней назад
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
@ismailbakhach8990
@ismailbakhach8990 5 месяцев назад
how can i make my classes implements OnInit by default when i generate a components ?
@kingchrisbreezy
@kingchrisbreezy 6 месяцев назад
i'm having some trouble to generate app.module.ts file, what supose to be? help please
@migueloviedo3625
@migueloviedo3625 7 месяцев назад
You truly deserve the $100,000,000. Thank you.
@migueloviedo3625
@migueloviedo3625 7 месяцев назад
Sorry, I meant - $100, 000, 000,000.
@stermangor
@stermangor 9 месяцев назад
What color theme is this? anyone knows maybe ? i mean the same effect in *ngIf =" ......."
@user-pl4hj1ig2c
@user-pl4hj1ig2c 4 месяца назад
Hello, Can you please explain how to got bootstrap link in index.html at 23:55 in the vedio.
@nareshkumar894
@nareshkumar894 4 месяца назад
What is the Angular version used in this tutorial???
@kekiir
@kekiir 3 месяца назад
28:12 how did you do that paste with all of the stuffs?
@legionsman7476
@legionsman7476 7 месяцев назад
What version of angular is being used in this tutorial?
@nabeelaliibol2064
@nabeelaliibol2064 6 месяцев назад
16
@h.t.8812
@h.t.8812 6 месяцев назад
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
@darkoplax7688
@darkoplax7688 7 месяцев назад
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
@chickachickachicka
@chickachickachicka 8 месяцев назад
..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.
@ciaochrystusa4778
@ciaochrystusa4778 7 месяцев назад
This is 16.2, reinstall Angular for this tutorial
@Empyrean629
@Empyrean629 7 месяцев назад
Type the command for installing angular the add @16.0.0 at end then you will good to go.
@Aeris-Xu
@Aeris-Xu 6 месяцев назад
So the version 17 has really changed a lot, hasn’t it?
@h.t.8812
@h.t.8812 6 месяцев назад
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
@pyjamaprince
@pyjamaprince 5 месяцев назад
​@Aeris-Xu it has and I cant find ant tutorials for it. This is frustrating.
@user-mh4lq5ce6u
@user-mh4lq5ce6u 9 месяцев назад
bro needs oscar
@user-lm5tr3zz9x
@user-lm5tr3zz9x 4 месяца назад
I encountered NG0100: ExpressionChangedAfterItHasBeenChecked in 4.1 Using Observables. How to fix this?
@kekiir
@kekiir 3 месяца назад
28:09 how did you paste that markup???
@doublebeefstew
@doublebeefstew 6 месяцев назад
3:56:58 route table router link
@kevin-howard
@kevin-howard 3 месяца назад
What's the vscode theme?
@ismailbakhach8990
@ismailbakhach8990 5 месяцев назад
what version is this 16 ?
@krasser650
@krasser650 7 месяцев назад
It's just a holiday!
@adimardev1550
@adimardev1550 9 месяцев назад
is this Angular 16?
@KakdeG
@KakdeG 8 месяцев назад
👌
@kekiir
@kekiir 3 месяца назад
Some one pls tell me, how he is doing this: 28:12?
@kingchrisbreezy
@kingchrisbreezy 6 месяцев назад
- - no-standalon
@SRIVENKATESHR-qn1lp
@SRIVENKATESHR-qn1lp 2 месяца назад
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}} 
 }
@afrenchdude5331
@afrenchdude5331 2 месяца назад
thanks
@riclaq4437
@riclaq4437 3 месяца назад
3:07:12 the what now
@BR50Kab
@BR50Kab 2 месяца назад
no ng command (not recognized) reinstalled node js but still no ng
@MirageDreamer550
@MirageDreamer550 2 месяца назад
you probably installed currently newest version of node that doesnt support angular. Try installing the version he did.
@BR50Kab
@BR50Kab Месяц назад
@@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
@BR50Kab
@BR50Kab Месяц назад
@@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
@jaygitonga2026
@jaygitonga2026 4 месяца назад
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!
@erzascarlet2145
@erzascarlet2145 Месяц назад
Is it just me or is there something about the way he says $100,000,000,000?
@kmonish9119
@kmonish9119 5 месяцев назад
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 :)
@h.t.8812
@h.t.8812 6 месяцев назад
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
@sameeryadav40
@sameeryadav40 6 месяцев назад
You are using Angular 17...downgrade to 16
@princechangani5302
@princechangani5302 5 месяцев назад
@@sameeryadav40 can you specifies which angular extension he is using
@kmonish9119
@kmonish9119 5 месяцев назад
please do this npm i @angular/cli@16.1.0
@js-fullstack-dev
@js-fullstack-dev 4 месяца назад
Why downgrade? Just use "ng new test --standalone false"
@quangle9178
@quangle9178 4 месяца назад
@@js-fullstack-dev or maybe ng new --no-standalone
Далее
What’s new in Angular v18
20:08
Просмотров 101 тыс.
Guess The Drawing! ✍️✨🧐 #shortsart
00:14
Просмотров 3 млн
HOW DID SHE WIN??
00:49
Просмотров 15 млн
5 Design Patterns That Are ACTUALLY Used By Developers
9:27
Angular Crash Course for beginners
1:09:19
Просмотров 241 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 916 тыс.
Every React Concept Explained in 12 Minutes
11:53
Просмотров 441 тыс.
Why Donut Media Is Falling Apart: An Explainer
17:07
Просмотров 203 тыс.
Guess The Drawing! ✍️✨🧐 #shortsart
00:14
Просмотров 3 млн