Angular Crash Course (2019)
HTML-код
- Опубликовано: 9 ноя 2024
- UPDATED 2021 VERSION:
• Angular Crash Course
In this video we will talk about what Angular is and then jump in and build a small app With Angular 7, looking at most of the fundamental concepts like components, services, modules, etc
Sponsor:
www.netlify.com
Code:
github.com/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia 
Наука
Events = 42:37
Create Service = 45:19
Implement HTTP Module: 48:40
Adding Header: 1:08:10
not all heroes wear capes
I followed the tutorial and put the code on Github with timestamps: github.com/PalmTreeBlvd/angular-crash-todolist
Go to the commit history to see the codebase at different points throughout the video. Including all of the CSS.
I backed up @45:08, @49:00, @56:18, @1:01, @1:04:22, @1:08:11, @1:09:35, @1:17:01, @1:19:34, and at the end of the video.
It is also heavily commented so if you don't understand something, you can try reading it from my (still learning) perspective.
And I re-named some of the todo variables to make it less confusing.
@@tvguideondemand i love you
@@redox2596 🙏
note to self: ng g s services is the command for service, ng g c components is for components
Hey Brad, in the middle of watching this video - great as always. Just wanted to let you know that I scored a top web developer job in San Francisco last year. I spent three months beforehand watching your videos and filling in a few technology gaps. Even though I have 15 years experience I needed to get up to speed with some of the tech job requirements (node, gulp, es6, etc). Luckily I was able to do that by watching your tutorials. Got the job (after seven interviews) and was able to hit the ground running. Very grateful. I have an Angular project to build at work and this video has got me started. Thanks for your help. Keep up the good work.
I am senior backend developer and just started Angular few months ago. I have to say it was great and informative.
Extremely clear. I really appreciate that you explained where certain things are coming from and didn't just say "This is what you type when..."
Next updated crash course....Slides end around 11:20..
Would it be possible to do an updated version of the MEAN app? Basically expanding on this concept from this app and add the server connected to MongoDB.
Please do a PostgreSQL crash course! Love to hear from you! ❤️❤️
Its lovely to see your acme web design on vs code editor even when other youtubers open the editor...u said its flattering in one of your videos..that video has 1.5 million hits..you are simply awesome..wish u good luck for all ur future endevours and ur son lots f love..
From India
DO YOU MAKE A VIDEO OF ANGULAR INTEGRATED WITH SPRING BOOT?
Hi, Thanks for the detailed angular course. Very much appreciated. But facing one prob though in adding a ToDo into UI. I consoled everywhere, ToDo is passing till ToDoservice but post request to server returning undefined. It creates a new Item in UI but with no title.
thanks for this tutorial. I would recommend explaining how certain things work and why we need certain things like a "service" when you can easily acomplish the same thing without a service. Many people who are watching this dont know what MVC is, they just want to build their tool or app. So we need to understand at least a little bit on the value of MVC and why we need services to promote single responsibility, code-reuse and scalability. I know thats a whole another topic but a mention of it when making certain decisions is important. Also your naming conventions are very confusing and makes it hard to understand the flow of data. But overall this is still one of the most useful tutorials, quick and to the point.
Your voice is like drug to me. Actually I can’t explain..I just love to listen and listen .. that’s why I see your videos two times. First time I just listen and second time I code.. u r so polite.. Love and respect.. Some words can’t explain my love and respect for u . I wish I can meet with u someday so that I can explain and want to say that Thank You and how much u helped me..
sycophant
Richard Dale Yep but not yours
Thanks friend. Thats very flattering. I appreciate that. Thank you for watching my videos 😊
@@techtipsuk Get out you noob
And I thought I was the only one, Reallly!!!!!!!!!!!!!!!!!!
I appreciate that you did not cut the error occurring parts. That taught me even more.
Brad, words can't express how grateful we all are for your knowledge, thanks!
put a comma after 'Brad'
Amazing crash course. It's exactly what I was looking for.
Watching a crash course is much more productive, I think. You can get a very good idea of how the platform works, rather then wasting your time splitting hairs about every single thing you could possible do with it.
Thanks Brad! Amazing as always!
2 small fixes:
1. Adding new Todos all get generated with an id of '201' which means they all get deleted at once.
Solution: Add 1 line to the addTodo function in todos.component.ts
addTodo(todo: Todo) {
this.todoService.addTodo(todo).subscribe(todo => {
// Overwrite ID to be unique
todo.id = Date.now();
this.todos.push(todo);
});
}
2. The Checkbox on a todo doesn't check to see if a todo is completed on init.
Solution: Add 1 line on the checkbox input
/
I've just wanted to recall my knowledge of Angular. And you shot this video several hours ago. This is amazing. Thank you, Brad!
same, this is the best crash course out there.
Once I watched an Angular course, that was doing tests in a project, then make class in another project, and we stopped at every turn. Never finished it. This crash course on the other hand, was amazing. All the sources were available, and everything went smoothly and well explained. I really like how you explain, and in a few times it was funny. Great course! Thanks! =)
Dude...this made Observables and EventEmitters/Output so so SO easy to understand. I feel like I can write a decent app just knowing how to navigate the HttpClientModule the way you demonstrated in this video. I've taken Angular courses and I'm brushing up to make a new website for my singing work. THIS was the jump-start I needed. Thank you so so much!
For those of you who are wondering where he got the css from...if you click the "code" link in the description and go to his github page, click the src folder and go to "styles.css". It's in there like swimwear.
This is a good video. But if I could make a suggestion I'd say that next time try not to use "Todo" as a name for everything you create because it makes it difficult to follow what is what. In these circumstances it's probably better to be a bit more verbose and explicitly say things such as todoItem, deleteTodoEvent, etc. I'm a software engineer with a backend background but - even for me - it was hard sometimes not to get lost because it seems the same name was being used everywhere, for everything. Anyway, it's a good tutorial for beginners! Congrats
I agree. The tutorial is great but the naming conventions are difficult, not just for people learning, but also generally for anyone else who would be working on such a project. Even outside of teaching todoItem and deleteToDoEvent are sensible names and would be preferable than just 'todo' all over the place
Yeah, I had to change the name to something else to figure out which todo is being used. Nonetheless, a masterpiece video.
I fully agree. It's a very good video, well explained many thanks and congrats to the teacher...but the subject is hard and the naming made it harder sometimes
his tutorials are very helpful but he lacks on how to write production ready code this is sloppy,
In his defense he makes a lot of tutorial videos really fast, and yet he does get the point across. If he wanted to make them even better, basic naming conventions for production ready code would boost quality tremendously
The most decent tutorial I've faced, thanks a lot! That's just a fantastic feeling when you've never coded in typescript and have no experience in Angular and just typing code in after you and it works! And then, just closer to the end of the video you're realizing that you can actually do your own little things now with Angular! Just the best possible format of teaching, well, at least for me, so just BRILLIANT!
Thank You for this video, Angular is much simpler than I first imagined.
What was overwhelming from the start was the amount of files it creates, but it actually makes a lot of sense.
Very good tutorial, easy to follow, 10/10 would code up another project with you Brad! :D
Work put me on a job that is still in AngularJS client side, so it is still around as well. I've been working in node server side but I don't have much experience in Angular. Once again, Brad to the rescue!
I agree with everyone else, your voice is great and you definitely know what you're doing because of the speed that you operate at. There were so many files and folders to go through and that was probably the trickiest part- knowing which file to switch over to. But overall a great video to start learning Angular on!
At around 34:00 you create a for loop in the ul instead of the li, that means you create a separate ul with one li inside for each iteration.
Beautiful thanks!
Folks, anything that Brad demos, either here or on Udemy - just works! I've tried Udemy for lots of technologies, Brad's courses included. Always some issue requiring Q&A intervention, except for Brad Traversy's videos - everything looks beautiful, everything just works
Big Agree
Hey Brad, just wanted to let you know that your videos have helped me more than my lecturers have in all of the semesters I took. Thanks man. Cheers!
This course makes it possible to read Google’s documentation and passionately compose the picture of the Angular in all it’s complexity. Priceless indeed, though still in video, at the end you just must make this promise as you feel like something is going on, bu5 it’s so fast you just can’t grasp the idea. You should honestly warn people that it’s ok, you will open the world of Angular in its integrity - just read the docs. This course is like a glimps into production - demo
*Wants to build ionic social language learning app*
"Brad had a sweet Angular crash course....HE UPDATED IT YESTERDAY?!"
You're the man Brad.
What can I say; The Best tutorial I have seen so far; Keep up the good work Brad!!
In addition I like Haytham Ghandour
's suggestion regarding getClasses;
And also to be consistent;
I would also bind the 'checked' property of the checkBox to the completed boolean as follows;
{{ todo.title }}
X
needed a good starting point for angular (coming from react).. I knew all I had to do was type in Traversy Media Angular and I would find something awesome right away. 🔥🔥🔥
haha love code gobblin
~great name. me too.
Great course! I just wanted to mention that the delete todo method in your place holder service definitely should be done the other way. This way if the delete request fails it will still be removed from the UI on the front end, telling the user the todo was deleted when it was not. The front end should almost always reflect the backend data. You should always wait to update the UI untill you recieve a good status from the backend. Unless you chose to catch a bad response from the backend and then update the UI to inform the user.
When you put the *ngfor on the element, doesn't that generate a new for every item?
Exactly, like in vue v-for. That was a little mistake from Brad. -Edit: oops I'm a bit late to the party
second css code:
.del{
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
float: right;
}
.todo{
background: #f4f4f4;
padding: 10px;
border-bottom: 1px #ccc dotted;
}
.is-complete{
text-decoration: line-through;
}
Thanks =D
I followed the tutorial and put the code on Github with timestamps: github.com/PalmTreeBlvd/angular-crash-todolist
Go to the commit history to see the codebase at different points throughout the video. Including all of the CSS.
I backed up @45:08, @49:00, @56:18, @1:01, @1:04:22, @1:08:11, @1:09:35, @1:17:01, @1:19:34, and at the end of the video.
It is also heavily commented so if you don't understand something, you can try reading it from my (still learning) perspective.
And I re-named some of the todo variables to make it less confusing.
Thanks man, super useful. By the way when I add multiple todos and click on the delete box, all of them (the newly added ones) just get deleted. Are you having the same problem and if yes, do you know how to fix it?
@@VarisTheHacker yeah it seems like his code is broken. Other people were getting the same problem with their code. Unfortunately I don't know how to fix it
Alright. Anyway thanks for the variable renames, will study your code tomorrow and hopefully have a better understanding. Cheers :)
From my understanding @Injectable is only required in a service if another service will be injected into it. Therefore it is not technically needed in this app but Angular adds it by default because it is best practice.
Correct me if I'm wrong anyone, haven't been doing Angular for too long.
Great tutorial. it took me 5 hours to code along with it, as i had to figure that when you use like: id:number; i had errors and found that i had to write it as id!:number; it happened a few other places around the program but the "!" did the job.
I had issues with script policies as well but i made it work. thanks a lot for this awesome tutorial! :)
Are you for real? We are using angular for my software engineering class and it started YESTERDAY! What a timing
You never cease to amaze! Thank you Brad!!! This has kickstarted me into the world of Angular and I'm loving it!
Well, yes, being a crash course it’s supposed to construct a structure, conceptual approach of Angular. And though practical part was implemented, it’s lack of theory. Practice is this Todo app building. But would be so great to get also schematic structure in theory. I mean how this paradigm of component building links to classes. Subconsciously you feel the logic behind it, but is really necessary to make it obvious, to define. Or personally I feel it’s constructing itself and it requires a huge amount of questions to be answered. And you don’t know where to start
hope, this might help you understand angular better. ruclips.net/channel/UC-FyE8pmbzUw7sb293FOdlA?view_as=subscriber
Coming from Angular.js (yes the old one), I really enjoyed this crash course. It gave me just enough to start with the basics in about, one well spent hour. Thank you! You've got a new subscriber :-)
I keep coming back to this after staring at the angular.io website for hours and getting nowhere.
Super helpful.
This literally gave the idea of flow and implementation of Angular, thanks man thanks a lot....
something about your voice that just makes learning so much easier.. ahhh.
Brad, thank you so much. Your tutorials have increased my knowledge about web-development by an exponential amount. Hope to see more patreons to support your hard work in the coming future!
It's good to see the errors and that you explain them in real time, this si super valuable as this is exactly where beginners (like me) get stuck!
Such an excellent tutorial! High quality, well explained and no nonsense. I'm gonna have to watch this one again due to the sheer density of the material, but I can already see the power and potential of using this framework.
the only place you SHOULD put sudo prior to npm is post it online and warning other node.js programmers to avoid running npm with sudo.
I don't dare writing that so my keyboard's autocorrect won't learn this mistake.
Also, good video, thanks for your time
Actually,
React's package.json is 40 lines (With react-router and an extra line at the end).
Vue's package.json is 45 lines (With vue-router and an extra line at the end).
Angular's package.json is 46 lines (With angular-router and an extra line at the end).
[35:00 seen] Migrating around the "x-hr angular course for beginners" videos- this one is the best I've seen so far. Thanks for this! Subscribed.
Brad, thanks dude. I was just starting out with Angular and I found this course to be very informative. Keep it up, I would love to see something like full angular course on any platform you like, full project based where you go from basic to more advanced stuff.
Amazing video! Thank you very much.
I am a seasoned (to not say old) analyst and developer, this video gave me the overview I needed to decide whether Angular was right for my project.
I know how much work goes into making these videos, so Congratulations!
Hope so see more. And I will chip in ;-)
This is a very good crash course and my sincere thanks go to Mister B Traversy. I had been thinking I would go full stack (as I'm a BE developer already), because, well, money, but now after seeing this I am thinking that I would probably get bored doing FE work. I will continue to learn FE for the purpose of being able to put a FE on my own BE projects, but there's just not much of a challenge here that I can see.
Absolutely astonishing, what I wanted to do with it is a diagram represented a 3d image of the built model and some sort of repeating exercises so to perceive it from different points of view. Little tasks concentrated on concepts like Input, Output, Emmiting and especially syntax and also important those functions which are preset like ng in the end. Intuitively you imagine what is there but not sure
We can use
insted of
This works well too. I think the point that Brad wanted to drive here is how to bind to multiple classes and not just one. 🤔
You just did a CRUD operation without all the hype or noise. Kudos!!
This is a very good man, and still holding strong for latest Angular version on nov 2020. Thanks
Hi, I want to learn Angular from this video. Can I still follow this video even if with the latest Angular version? Sorry I'm newbie
@@frncscbñz I did and everything worked
Faster console.log('') in Intellij do the following:
Settings->LiveTemplates->Javascript->Click +
type cl instead of
add custom description
as template text use: console.log('$PARAM$');$END$
click define below (in blue) and select javascript
DONE
This is a very good crash course! I haven’t touched angular in a while, and this helped me remember how this framework works. Thank you! :)
I love Vue, it's way simpler and i have roughly 2 months experience with it.
But there are no Vue jobs in my city, now i'm applying for a job that wants Angular. OMG it's super confusing.
Thank you for this crash course. ! It came at the perfect time!
vue is super easy and powerful. why companies still using angular its a mistery
I have an urgent need for knowing how to use Angular for my Project. Your video is awesome! Thank you so much for doing this!
Thank you for this awesome tutorial! I learned a ton about the language! My only recommendation would be to add breaks in between coding snippets or something. The flipping between files and coding was difficult to keep up with. I tried it at .75 speed, but it was to grainy sounding.
Thanks a lot for this crush course. I have React background and now I understand why developers love Angular even though it has so much configurations.
Man, I just love your videos. You should do a Laravel + Angular course. Thanks for the good work
I am using this video as a review from what I learned on udemy, and the first thing that caught my attention is when you mentioned index.html, which I thought was the home page, but you only changed the title there. And then you went to app.component.html and that is where you changed the body.
Traversy Media to the rescue AGAIN when I need to learn something quickly!
Wow, i think you remind my mind at times, i was thinking of starting and angular and BOOM you drop a crash course on it! Man i love you and your content brad. I also got your bootstrap and angular courses on Udemy today, GREAT CONTENT ! Keep it up !
The Greatest of All Times TEACHER!!! Salute!
Im using and loving Vue.js but the way Angular is handling some things just blew my mind.
I would add at todo-item.component.html -> "[checked]=todo.completed" inside the so that when a task loads and is already done to load also the checkmark. Great Course TY!
Thank you for the great courses as always. I love all the different series on your channel. I encourage all your subscribers to review all your content. Excellent work
Pls upload more angular related videos with making more projects
Thanks for this video
Fully agreed, moar videos, moar angular, moar projects (ie angular with firebase or node.js)
Mean stack project plzz authentication and authorization
Yes, please.. Actual MEAN Stack with authentication, email, authorization, stripe projects, as in multiple projects, please. It's one thing to get a taste of something, but to own the material is another matter altogether. Using AJAX in the projects would be excellent, as well. No one seems to put it all together and that is frustrating.
Click out my videos ruclips.net/channel/UCQyNrle3Byw8cs7zoX7jJxQplaylists?view_as=subscriber
here i am making the best content on angular 9 latest features with cool examples, you can probably check my channel.
ruclips.net/channel/UC-FyE8pmbzUw7sb293FOdlA?view_as=subscriber
I would actually just create an interface for models that do not have functions, no need for a class if the class doesn’t do any computation. Nice video though, definitely covers some core principles people new to Angular should learn. I started professionally with Angular and learned a bit of React from your crash course, thanks!
This really is a great video. For me. I would have left the deleteTodo in the item, and set a prop on the passed in todo called deleted. And hidden the todo based on that prop so as to keep all of the verbs in the same file. Right or wrong it makes my brain hurt less. On next data load it would not have been in the dom any longer. The example of how to essentially use the scope {} directive linking from angular 1 is priceless. I haven't seen this example anywhere.
Great Work! Keep it up! Every time i want to learn a new technology the first thing i search is Traversy Media Channel.
Thank you Brad, its really an awesome explaination, very much easy to understand, and anyone can follow along, thanks for clean stuff.
I was searching such video since couple of days.
I loved it, Thank you once again
Here's the CSS needed in 37:40 :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
}
a {
color: #333;
text-decoration: none;
}
.container {
padding: 0 1rem;
}
.btn {
display: inline-block;
border: none;
background: #555;
color: #fff;
padding: 7px 20px;
cursor: pointer;
}
.btn:hover {
background: #666;
}
Came looking for this, thanks =D
Thanks a lot for publishing this amazing tutorial. It covers a lot of information on a short time, which was exactly what I was looking for. Keep up the great work!
This Video is so helpful to get brush up my basics after a long break.
Thank you so much for this video, it was great for getting acquainted with Angular! I'm new to front end development, and the flow of this video was just right.
Not too hard so I couldn't follow, and not too easy. Keep it up man!
Great course! Got everything I needed! A little advice, for next courses try naming your components differently, a good name would have been "task", "list". Keep it up!
Thanks man.. Always had a leaning towards angular, if you get past the learning curve. This crash course makes stuff look easy...
Really enjoyable video covering the fundamentals of Angular in less than 90 minutes. I loved it!
love watching your videos..however i think most beginners into coding would like to know the intricacies behind building a project...like what is really required the structure of the project, database design without using firestore (maybe postgresql,or mysql) and the necessary steps like authentication, tokens, validation, how information will be stored to the database, slugs and the reasons for using slugs and all other intricacies .... ill love for you to do a course that dive into that be it udemy or here...of if there is anybody that can direct me to a video like that......Anyways keep up the good work....love your videos
update me pls if u get an answer
I have no word to express my feeling. Simply, you are awesome. Thank you very much. Long live!!!
thank you for the detailed explanation. the thing is - we can not really learn to write it by ourselves. it's like we see and understand, but this language is not very methodical
100% Recommended if you are revising concepts.
Not recommended if you are totally new to Angular
That's another GREAT tutorial of you Brad! Thank you so much for your non-stop work!!
Thanks a lot for this course! It helped me out to understand the Angular and how to run it on a local machine.
I watched your React crash course with the same Todo List app. Angular seems much more complicated and overkill for me, but unfortunately I must work with it... I'd choose React if I could!
Angular is _"Extremely powerful and full featured"_
I totally agree if what you really mean is Angular is *bloated,* *convoluted,* and *pain inducing.*
everything named todo get me confused, naming is very very important
Hahaha lol
I think you should never just watch, always code along to fit your own mental model and try your naming conventions in this case.
Best tutorial on Angular I've seen yet. Great job!
Really nice video! To be honest, Angular has been the only big framework that "clicked" with me. I tried both your React and Vue crash courses and just stopped halfway through, I didn't like those frameworks and I personally found them difficult. I was always hesitated about trying out Angular because everyone says that it has a "steep" learning curve and that both React and Vue were more recommendable.
But for some reason I found Angular to be the most comfortable for me. Maybe because I have a background of game development? Services remind me a lot of Unity ScriptableObjects; components as well. I also find MVC very comfortable, and I love to have everything already built in, instead of having to install dependencies.
so true, reactjs has like 10 ways of doing the same thing , angular is so much more comfortable than react
A lot to learn. I followed most of it but too many files to remember first time through.
Hey Brad... two things I noticed on the app that can be helpful:
When you initialize the app, you can see the 4th Todo isn't checked but is crossed with the line. That is because initially the completed status is true, therefore the checkbox should be checked. This can be solved adding:
[checked]="todo.completed"
in the input:checkbox that it's on the todo-item.component.html.
Also it'd be great to have the todo.title inside a label. What I did was having the input with an id of the todo.id and label for the todo.id as well.
Anyways, just two small things to make this little app better.
Great Crash Course man!
Was a little off practice..great refreshment for angular..perfect time Brad..love your videos and many thanks..
On that note, I just wonder if you ever do some tutorial on MEAN Stack? You do have the MERN here. I know the only difference is Angular in MEAN and React in MERN but everything else the same. Just curious if they are pretty much the same. I am in IT(Network Administration and such) but have always love Web Development. As always, thank you for your awesome tutorials. The world needs more people like you sir. You are an inspiration.
Really great tutorial!! Even for a short period there is a lot of information to build the basics on Angular. Thanks for sharing that!!! Keep up!!!
Awesome v tutorial I loved it. Really you are unique. I have followed all your TodoList series in these three different framework. All are very good but this one is the best. I love Angular and I feel great coding with it. but I live in Miami where React is the most. It is hard to find a job that have Angular as framework... OK Brad. great job. I love u man. You are my genius angel... God bless continue blessing u...
Thank you so much for your videos. I just decided to learn Angular and this is definitely going to help me a lot. You're the best!
NG and don't look back!
Thanx Brad you're life saver 😭🌷 this exactly what I needed 💋
Hi @tana, hope you're doing well, may I know if you're doing any freelancing work related to web development?
Thank you for the tutorial, I enjoyed it a lot!
It is indeed easy to follow and covered most of the features of Angular for us beginners.
Maaan, this was the hardest one so far. Angular is madness.