Angular Crash Course 2024 (for Beginners)

Поделиться
HTML-код
  • Опубликовано: 22 окт 2024

Комментарии • 236

  • @Yoremh
    @Yoremh 8 месяцев назад +58

    28 minutes of video and I know I've finally found a quality tutorial. Thanks dude!

    • @thingsiwishiknew8592
      @thingsiwishiknew8592 3 месяца назад

      Tell me about it

    • @Yoremh
      @Yoremh 3 месяца назад

      @@thingsiwishiknew8592 "IT," based on Stephen King's novel, is a horror film that revolves around a group of children in the town of Derry, Maine. They are terrorized by an evil entity that often takes the form of Pennywise the Dancing Clown. The story alternates between their childhood experiences and their adult lives, 27 years later, when they must confront their fears and the monstrous entity once again. The film explores themes of friendship, trauma, and the power of unity in the face of unimaginable evil.

  • @ArslanZafarr
    @ArslanZafarr 5 месяцев назад +60

    I highly recommend all of you who want to learn Angular with the latest release. I found this quality tutorial after searching through RUclips for three days. Thanks, dude!

    • @אהלןסהלן
      @אהלןסהלן 5 месяцев назад +2

      Got any more recomemdations?😊

    • @DesignThinkerer
      @DesignThinkerer 4 месяца назад

      ​@@אהלןסהלן the book "Become a ninja with Angular" is kept up to date, I think it's quite good but I'm not an expert

    • @DesignThinkerer
      @DesignThinkerer 4 месяца назад

      @@אהלןסהלן the book "Become a ninja with Angular" is pretty good

    • @AliHassan-wc6nb
      @AliHassan-wc6nb 2 месяца назад

      Shukriya!

  • @craftyplaysgames9642
    @craftyplaysgames9642 3 месяца назад +17

    For anyone having issues with the images, if you're using Angular 18 (like me), then all images load from the public folder by default. So your logo would be images/oc-logo.svg assuming you add an images folder to public.

    • @_JaySharps
      @_JaySharps 3 месяца назад +2

      I can't imagine how much time you just saved me, thank you so much!

    • @chaudharypraveen98
      @chaudharypraveen98 3 месяца назад

      Thanks for the help

  • @coolblackguy99
    @coolblackguy99 3 месяца назад +16

    For those who are stuck setting up a logo, you might be using Angular 18 or above. Note that Images will now go into the public folder so your structure should look like "public/images" folder instead of "assets/images". With that, your code should now look something like this:
    Hope this helps!

    • @JVC-Byte
      @JVC-Byte 28 дней назад +1

      Thanks man

    • @sanjeevtripurari56
      @sanjeevtripurari56 26 дней назад

      I dont find images folder, nor assets
      ``` Angular CLI: 18.2.6
      Node: 20.16.0
      Package Manager: npm 10.8.3
      ```

  • @Isaac-d1m
    @Isaac-d1m Месяц назад +2

    For anyone struggling with serving the product images , update item image path in the db.json, on the server. As images are now served from the public folder path by default
    {
    "items": [
    {
    "id": 1,
    "image": "images/products/image1.jpg"
    ....
    basically just remove "assets/" from every item.
    Also, you need to match your file structure, move the entire "images" folder from "assets" to "public"

  • @prog_demos
    @prog_demos 3 месяца назад +4

    This is a truly amazing tutorial, simple and goes directly to the point. Exactly what I was looking for, kudos!
    However, I have 2 comments:
    1) You shouldn't have put any focus on Node.JS nor explain how it internally works. This just takes time. E.g., your "find max id" implementation for `post` is a mock implementation anyway, not at all related to the topic of the video. All viewers such as myself care about is how to invoke `post` with Angular's HttpClient, let me worry about my own backend code.
    2) I would've really preferred if you left the Copilot out (unless you were sponsored or something like that). I'm a fast writer and can follow everything at 1.5x speed with no issues, but the moment you start to autocomplete is the moment I lose my flow and have to double check generated variables'/parameters' names/types.
    All in all, amazing work and thank you so much! You're a great lecturer and I'm glad I got to learn Angular from you.

  • @shoutotodoroki5736
    @shoutotodoroki5736 8 месяцев назад +10

    Finally, I'm glad that somebody made this tutorial, bless you. As a completely beginner I dont understand how to install previous versions of angular and learn it, because I have installed 17 version and tutorials in 16 and less

    • @gaborhuszka289
      @gaborhuszka289 6 месяцев назад

      Hi, i dont know if this is still relevant, however you can download an older version of Angular CLI, and if you create a new project with that it should generate the according Angular version. However if you want to use v.17 u can also create project with "ng new --no-standalone project-name"

  • @FelipeJunges-SL-BR
    @FelipeJunges-SL-BR 7 месяцев назад +9

    4 hours? Man... Thank you very much! Starting it now. Will be very important for me! Again, thanks a lot!!

  • @NimanthaNadeeraka
    @NimanthaNadeeraka 7 месяцев назад +6

    Thank you so much for this tutorial! The step-by-step explanation was incredibly clear and easy to follow. I appreciate the time and effort you put into making this video. It really helped me understand angular better. Looking forward to more tutorials from you!

  • @Benivere1
    @Benivere1 7 месяцев назад +4

    Excellent tutorial. I learned quite a bit from this. The only issue I found was that if I followed the video religiously, there were some changes made in the video that apparently relied on code changes that weren't shown. Referencing the github repo filled in those gaps.
    Thank you for being detailed and taking the time to explain many of the automatic bindings of Angular. I "think" I understand Angular now..... (ahem)

    • @codedeck
      @codedeck  7 месяцев назад

      Thank you for the feedback! Indeed at some point I skipped a few UI changes to keep the videl shorter because it was already going to be 4+ hours. I will try not to skip anything in the future!

  • @OlexiyMyronchenko
    @OlexiyMyronchenko 6 месяцев назад +10

    Really good work! 👍
    The only step I was stumbled on is the confirmation popup with the Delete button. I guess you added the "ConfirmPopupModule" and "ToastModule" in the background without the explicitly mentioning them. At 3:02:40 they are in the .ts file but at 2:59:55 they were not yet.
    Anyway, the video was very useful for me as an Angular newbie! Thanks a lot!

    • @martinlapihuska2524
      @martinlapihuska2524 4 месяца назад +4

      And dont forget to mention changing function name in HTML button parameter from deleteProduct to ConfirmDelete

    • @DuckDuckGo99
      @DuckDuckGo99 3 месяца назад

      this thread is useful, thanks guys :)

    • @AuraAqua12
      @AuraAqua12 2 месяца назад

      Yeees!!
      I was stuck for almost an hour because of that ToT

    • @joetrocken5957
      @joetrocken5957 Месяц назад

      Thank you so much!

  • @seifmostafa58
    @seifmostafa58 6 месяцев назад +1

    hands down the best Angular crash course out there.

  • @holyfreakinguacamole
    @holyfreakinguacamole 2 месяца назад

    THANK YOU. I’ve been studying web dev for a couple of years and I’ve created a lot of apps, but this drives home the ROOT of it all. Absolutely fundamental. Thank you. (Speaking to the first 20 min)

  • @DREBO-z8c
    @DREBO-z8c 17 дней назад

    Bro you're legitimately a really good teacher

  • @starX7995
    @starX7995 2 месяца назад +6

    coming from react ecosystem i needed to learn angular as i applied for a job and recieved an assignment in it Not going to lie bro angular is testing my patience

    • @danielhen
      @danielhen Месяц назад +1

      I’m in the same position as you. Could you recommend a better video that actually explains Angular?

    • @codewithreen5768
      @codewithreen5768 Месяц назад +1

      @@danielhenlook up Procademy. They have the best Angular playlist

    • @ahmedmaher9985
      @ahmedmaher9985 11 дней назад

      @@danielhen iam in the sam position as you ,this is the best one i found so far .

    • @danielhen
      @danielhen 10 дней назад

      @@ahmedmaher9985I found my self buying course from udemy..

  • @LA_RAMOS
    @LA_RAMOS 4 месяца назад +1

    Just to clarify in the latest version of angular, it already comes with a server with the archives called main.server.ts inside src and app.config.server.ts.
    Also the way to run the project would just be ng serve

  • @wolfsupernova-fv4jd
    @wolfsupernova-fv4jd 3 месяца назад +1

    I'm two hours in and so far it has been great, but with Angular 18 I had to change the angular.json to load the images from the src/assets route

  • @Haider00754
    @Haider00754 8 месяцев назад +13

    good job u explain well but i didn't understand fully i will read documentations after finishing this video and i think you are the only one youtuber who teaching angular 17 great step.

    • @codedeck
      @codedeck  8 месяцев назад +3

      Thank you for the feedback! I tried to keep the course under 5 hours long, so I don't go into too much detail on everything. I am really grad you found it helpful!

  • @maximood-tired
    @maximood-tired 6 месяцев назад +2

    INSANELY good video. The best Angular Course on whole youtube, and I tried a lot of them

  • @stathisioan7799
    @stathisioan7799 15 дней назад

    For anyone struggling with images not showing up properly, try editing your angular.json file for "architect"-"build"-"assets" to :
    "assets": ["src/favicon.ico", "src/assets"]

  • @graydhd8688
    @graydhd8688 6 месяцев назад +1

    I've been trying to learn angular for a bit and feeling exceptionally overwhelmed but this vid is really helping everything I've learned so far sink in, amazing tutorial!

  • @WillServices
    @WillServices 7 месяцев назад +2

    Getting stuck on Options interface creation... Your autocompletion plugin is sometimes too fast.
    It is a great tutorial! Thank you very much

    • @WillServices
      @WillServices 6 месяцев назад

      @@TUMSonY 🤣🤣🤣🤣 LMAO

  • @DonPaps
    @DonPaps 3 месяца назад

    This is some quality tutorial. Straight to the point, without missing the important points! Thanks a lot for this!!

  • @mseriesco
    @mseriesco 8 месяцев назад +2

    Explained each aspect beautifully. Very Thank full for this master piece.

  • @Szabal16
    @Szabal16 Месяц назад

    Mate, that crash course is amazing. Keep up the good work!

  • @ujangaripin7630
    @ujangaripin7630 7 месяцев назад +2

    Thank you for this extraordinary tutorial. I beg you to continue working on RUclips. Can you for the next video make an Angular Login (authentication) tutorial with multi role admin and user?

  • @MyRandomness987
    @MyRandomness987 6 месяцев назад +1

    I love the video, it is helping me learn angular. I love learning by doing! There has been a couple of times I have gotten stuck, you would do something automatically that I did not know about but I ended up finding the solution. Thank you for the comprehensive overview of angular!

  • @Snbd26th
    @Snbd26th Месяц назад

    Man I just found your channel and I felt like I stumbled upon a gold mine! Thank you very much, subscribed!

  • @iraklyoda4213
    @iraklyoda4213 3 месяца назад

    Made sense of Angular in less than 2h30m. Great work man, thanks

  • @randisa3600
    @randisa3600 4 месяца назад

    Yeah im done, im trying error and finally im done, The new syntax gave me errors but i finally solved it... Thanks...

  • @arlmdev
    @arlmdev 3 месяца назад

    The crash course is made in a detailed manner. It was easy to follow and truly a beginner-friendly tutorial. Thank you!

  • @patrykorowski4141
    @patrykorowski4141 5 месяцев назад +2

    I'm coming from the React world, and I won't lie. Angular looks pretty cool :D
    Great tutorial! Subscribed. ;)

  • @jonathanperez2603
    @jonathanperez2603 10 дней назад

    Amazing course!

  • @rezurrrexion38
    @rezurrrexion38 2 месяца назад

    HUGE educational value!!!
    Thank you so much for making this crash course
    👏👏👏

  • @kenhan168
    @kenhan168 6 месяцев назад +1

    This is a really wonderful video, every minute is worth to watch and listen. Thank you so much!!!

  • @BloodyJanio
    @BloodyJanio 7 месяцев назад

    Great tutorial, I found one small issue there: Missing record in the database with ID: 14 (had to add it manually), otherwise I had no issues with anything. Thank you for the excellent Angular tutorial, which is up-to-date.

  • @mihaichildesco8276
    @mihaichildesco8276 4 месяца назад

    you deserve a subscribe and like for this content. What difference you from others is that you go more depth and you have patience, your speak is perfect for programming tutorials, not to slow not to fast. And also glad to meet Angular tutorial in a world full of React. I would like to hear from you concepts of programming explained in js like callbacks, closures async, dom manipulation, event loop and so on. You are very good at explaining things. Very good work! 💪💪💪

  • @thingsiwishiknew8592
    @thingsiwishiknew8592 3 месяца назад

    Great content , easy to follow, and has filled in a lot of gaps the other videos did not, really appreciate it , i am curious though , if you had a actual DB would you hook it up the same way with regards to the server, and how would you go about adding authentication?
    Thanks

  • @troyschwartz7438
    @troyschwartz7438 2 месяца назад

    This was a great video. Covered a ton of topics and you did an excellent job of walking us through all of them. thank you.

  • @kereloskaram1312
    @kereloskaram1312 2 месяца назад

    Highly Recommended, really useful Thanks man!

  • @justw71
    @justw71 2 месяца назад

    Awesome tutorial! This was my first experience with Angular and your crash course was super helpful 😊

  • @Saimelodies2512
    @Saimelodies2512 5 месяцев назад +1

    Extremely wonderful and excellent video ! I have never seen anyone explaining step by step like spoon feeding to a baby!!! Again excellent work 👍.

  • @arjunsemwal02
    @arjunsemwal02 Месяц назад

    One of the best tutorials i've seen♥, thanks brother for sharing such a great and in-depth tutorial❤

  • @mahendranath2504
    @mahendranath2504 6 месяцев назад +1

    Wow, nice thank you so much for sharing the knowledge

  • @ДаниелДианов
    @ДаниелДианов 5 месяцев назад +1

    What exactly did you win when wrapped httpClient into this ApiService? You still import 1 service and pass the same amount of args. I think this wrapper service was not needed at all. It just made the video longer. :D

  • @reirvk
    @reirvk 6 месяцев назад +1

    Thank you

  • @VipulNilesh
    @VipulNilesh 5 месяцев назад +2

    Amazing Content

  • @muhammedkhalil-x8p
    @muhammedkhalil-x8p Месяц назад

    love your way and thanks for your efforts. but from " NodeJs Server" i get lost and confused. did we need NodeJs Server, can we build same project without " NodeJs Server"?
    is there's other course that only focus on "angular" without using " NodeJs Server"?

  • @antoniofcable
    @antoniofcable 3 месяца назад

    Very nice tutorial. I really recommend. I could review many things that I've already known and learn o lot of new ones. The explanation is very clear and the example is perfect. Thanks a lot.

  • @gianni499
    @gianni499 7 месяцев назад +2

    Thank you so much for the video! One question though, i want to use angular with spring. Is it ok to still watch this? Which parts can i skip? I asked bc youre using react. Anyway big thanks!!

    • @codedeck
      @codedeck  7 месяцев назад +1

      I presume by spring you mean the framework. You can basically skip anything that has to do with the nodejs server as it is simply used to illustrate the intergation with an existing backend. Since you are using spring, you can simply use your own endpoints.

    • @gianni499
      @gianni499 7 месяцев назад +1

      @@codedeck thank you, now I can follow your reasoning. And yes I meant springboot (java). Sorry didn't specify it.
      I watched some minutes of the video, and it's really great! You should def do more videos, and consider putting more advanced videos on Udemy. Long angular+spring courses, for example, are pretty rare on Udemy. Many people have made tons of money from Udemy
      Anyway, keep up the good work thank!!

  • @sidman1505
    @sidman1505 4 месяца назад

    ধন্যবাদ দাদা। আপনার দ্বারা খুব ভাল ব্যাখ্যা

  • @peteroganwu951
    @peteroganwu951 3 месяца назад +1

    The p-rating component is showing stars and radio buttons. Is there a reason for this? The documentations says that rating component internally uses radio buttons that are only visible to screen readers, but I am seeing the buttons.

  • @FrancoisKABORE-or3su
    @FrancoisKABORE-or3su 2 месяца назад

    Realy nice tutorial to learn Angular

  • @clim9742
    @clim9742 3 месяца назад

    This was a great crash tutorial. Thank you, Alex!

  • @fearmenot
    @fearmenot 8 месяцев назад +4

    Bro. Thank you very much. By the end of the year this video will get million views for sure since this is the most updated Angular tutorial that really is for beginner. You must be a smart person because you are explaining it very well. Keep up the good work, I'm still grinding tho to be able to land a job. Thanks again

  • @KunalKumar-kw8yg
    @KunalKumar-kw8yg 6 месяцев назад

    This was wonderful. Helped me a lot ❤❤❤

  • @kaleempansota7917
    @kaleempansota7917 8 дней назад

    Really loved it❤

  • @vishnuprasad6202
    @vishnuprasad6202 Месяц назад

    Great Tutorial!!!!

  • @mihaioprea9398
    @mihaioprea9398 3 месяца назад

    Great crash course! Very helpful!

  • @lilimartins9446
    @lilimartins9446 8 месяцев назад +1

    Heey thank u so much for the video! I have a question, what is the extension that complete or assume what you are gonna write?

    • @codedeck
      @codedeck  8 месяцев назад +3

      It's GitHub copilot! Incredibly useful extension, I think I mention it in the beginning of the video as well.

  • @gopikrishnag41
    @gopikrishnag41 3 месяца назад

    So excellent tutorial & thx a lot 💪🙏

  • @azimeraw24
    @azimeraw24 2 месяца назад

    Nice, thank you and could you also do video about ngrx?

  • @hidden_kat9919
    @hidden_kat9919 4 месяца назад

    This video is extremely well explained and very beginner friendly. I like that you take us through each step and explain each thing we do in simple terms. Thank you for putting your time into this, it has been very helpful
    🖤

  • @webdevyaros
    @webdevyaros 8 месяцев назад

    Thank you so much! It was amazing crash course. I hope you will continue the Angular topic, I really like the work you did!

  • @Bongytech
    @Bongytech 6 месяцев назад +1

    Great video 👌🏾

  • @magassakardigue4188
    @magassakardigue4188 6 месяцев назад +1

    thank you very much

  • @-freethought-Librepensee-xf6sn
    @-freethought-Librepensee-xf6sn 5 месяцев назад

    Thank you very much , 4 hours and wooow everything is clair

  • @sergiofaheina7796
    @sergiofaheina7796 8 месяцев назад +2

    That's gold.

    • @codedeck
      @codedeck  8 месяцев назад

      Thank you so much!

  • @alimeme4197
    @alimeme4197 5 месяцев назад

    the best course ever!! thank you so much

  • @kavindugunasekara448
    @kavindugunasekara448 8 месяцев назад

    which architecture you use for this project ,MVC or SOA?

  • @harish_314t
    @harish_314t 3 месяца назад

    Do a video with file type input when put method especially when we edit the product

  • @BStrick75
    @BStrick75 6 месяцев назад +1

    Great job so far. I'm an hour in. :)

  • @pruthvi7798
    @pruthvi7798 6 месяцев назад

    True gem for beginners

  • @joncharles5817
    @joncharles5817 2 месяца назад

    nicely done bro!!!

  • @ΘεόφιλοςΚαρσανίδης
    @ΘεόφιλοςΚαρσανίδης 20 часов назад

    For some reason when I use space-between it doesn't work. Dunno why but the names are not spread to get all the width...

  • @myrddin2011
    @myrddin2011 6 месяцев назад

    Very very interesting
    I would like to know the library you used to have this proposal below when you type for example "@Output productOutput" :
    @Output() productOutput: EventEmitter = new EventEmitter();

  • @lucky2unlucky
    @lucky2unlucky Месяц назад

    What is that gray text thing that shows up after you text something, and how do I get it?

  • @Taher_M
    @Taher_M 4 месяца назад

    Thank you sir

  • @kartikey0208
    @kartikey0208 3 месяца назад

    You should really make the backend series for java fullstack, also the react JS frontend. I am loving your tutorial can you help me become a Java full stack developer.

  • @russellseangonzalve4566
    @russellseangonzalve4566 2 месяца назад

    Genuine question, how do you get so good at this? do you read all the documentations?

    • @codedeck
      @codedeck  2 месяца назад

      Thank you! No it's just a lot of practice, I've done a lot of work for multiple clients

  • @Nani-cf3sw
    @Nani-cf3sw 4 месяца назад

    Even the length of video increases but it keeps clarity for users. So don't think about length of video. Anyway good video.

  • @Greyshadow
    @Greyshadow 6 месяцев назад

    Thanks for the tutorial, I have been working with React framework for years. I was required to learn Angular for a particular job and I am really hating it, so less intuitive, but this tutorial is helping me a lot.

    • @codedeck
      @codedeck  6 месяцев назад +1

      Honestly I went through the same thing! Now I absolutely love angular.

  • @jonas-by5uc
    @jonas-by5uc 4 месяца назад

    I'm following your tutorial and it's by far the best i've found !
    But when i configure the promise i get an error in the firefox console : "Error: Promised response from onMessage listener went out of scope"
    It's not critical because i can keep progressing in the tutorial but i was just wondering what might be the reason for it.
    Thanks again for the amazing tutorial you are litteraly saving my life !

    • @codedeck
      @codedeck  4 месяца назад

      Thank you! I suggest using a different browser. It seems like some extension is causing the issue or blocking localhost requets but I cannot be sure without looking at the browser/code.

  • @babukicoding
    @babukicoding 7 месяцев назад

    Thanks for this amazing tutorial brother💗

  • @daljeetsingh5127
    @daljeetsingh5127 7 месяцев назад

    great video can you please create a full course for angular
    if possible
    if you have already created one can please share the link
    thanks for the wonderful course

    • @codedeck
      @codedeck  7 месяцев назад +1

      Unfortunately I don't have a more extensive course at the moment but I am making videos on Angular regularly. You can check out my videos on translations and application deployment. in the future I will release more videos on various topics!

  • @moudjahidinesalissou9011
    @moudjahidinesalissou9011 6 месяцев назад

    Very grateful

  • @camiloagudelo6951
    @camiloagudelo6951 3 месяца назад

    hi beacuse , I generate a component and not have by defaul standalone:true and imports=[], angunar outpout error if import a componnet of prieng? thank your only the buttons not have style of prieng , display sqaured, while the other components just display with style correct

  • @wolfisraging
    @wolfisraging 5 месяцев назад

    Oh man, just perfeccttttt! Thanks for the efforts!

  • @ol1175
    @ol1175 4 месяца назад

    Thanks !!!

  • @adrian333dev
    @adrian333dev 8 месяцев назад +1

    Awesome content!

  • @tezzy9486
    @tezzy9486 4 месяца назад

    bro your are incredible

  • @manikandand2541
    @manikandand2541 8 месяцев назад +1

    Amazing job my friend

  • @ukaszgzella4022
    @ukaszgzella4022 6 месяцев назад

    Excellent work bro!

  • @cyberhifi2629
    @cyberhifi2629 3 месяца назад

    please make a course for javascript too :)

  • @jayakumar2927
    @jayakumar2927 8 месяцев назад +1

    Good one . post more

  • @Ruhgtfo
    @Ruhgtfo 7 месяцев назад +1

    Best🎉

  • @sachcha500
    @sachcha500 7 месяцев назад

    Better tutorial ever😃

  • @muhammadidrees6650
    @muhammadidrees6650 3 месяца назад

    really good

  • @jeromesnail
    @jeromesnail 7 месяцев назад

    I have a question, as I've had a similar issue with other tutorial as well.
    At 48:37 you insert "app-home" component in the app-component without any error.
    When I do the same, I have an error telling me that I need to import app-home in app-component.
    Then later at 1:33:46 when you create the header and footer component, you get the same error as me...
    Why didn't you get this error for app-home component??? It was NOT in your imports

    • @codedeck
      @codedeck  7 месяцев назад

      The Home Component is loaded through the router while the other components are directly inserted into the page. In each case you are importing the component somewhere.

    • @jeromesnail
      @jeromesnail 7 месяцев назад

      ​@@codedeck Nah I mean before you put it in the router, when it's directly in the app-root template, it doesn't error (no red line), compared to footer and header.

    • @LaLucarneCybernétique
      @LaLucarneCybernétique 7 месяцев назад +1

      @jeromesnail I had the same error. Look on top of your script, this is where you import your component:
      import { HomeComponent } from './home/home.component';
      This line appears automatically when you use the suggestion from VSCode. When you start typing the name of your component, instead of writing it all manually, just use the down arrow to select what VSCode is suggesting you. When you press enter, it is going to automatically add the import line on top of the script.

  • @kcfrank8927
    @kcfrank8927 5 месяцев назад

    Please wish extension do you use for the css snippet