Learn Angular 7 in 50 Minutes - A Free Beginner's Crash Course

Поделиться
HTML-код
  • Опубликовано: 20 окт 2024
  • WRITTEN Version: goo.gl/a6kqBv
    Today's Question: Which do you prefer? React, Angular or Vue?
    skl.sh/designc... - First 500 people to sign up will get their first 2 months free!
    -- Angular 7 just released and as always, I'm putting out a rather robust angular 7 tutorial (or small crash course!) that will introduce beginner's to this awesome frontend framework. You're going to learn about the basics behind Angular 7 while building out a simple project.
    Here's what you will learn:
    Installation & the Angular CLI
    Templating
    Styling
    Components
    Event binding
    Property binding
    Services
    HTTP Client
    Forms
    ..and more
    The skills necessary to follow this course:
    HTML & CSS Understanding
    Basic JavaScript knowledge
    Github repo for the project in this tutorial:
    github.com/des...
    - - - - - - - - - - - - - - - - - - - - -
    Subscribe for NEW VIDEOS!
    My site: designcourse.com
    My personal FB account: logodesi...
    Coursetro FB: coursetro
    Coursetro's Twitter: / designcoursecom
    Join my Discord! / discord
    ^-Chat with me and others
    - - - - - - - - - - - - - - - - - - - - -
    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
    Now, I focus all of my time and energy on this channel and my website Coursetro.com.
    Come to my discord server or add me on social media and say Hi!

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

  • @DesignCourse
    @DesignCourse  6 лет назад +61

    Enjoy this and want more? Subscribe! -- My answer for today's question: Lately, I've been loving Vue / Nuxt.js. Look for more tutorials shortly on Nuxt.js! You?

    • @artede1
      @artede1 6 лет назад +2

      thank's sir. :) for tomorrows question: what backend do you prefer for vue/nuxt.js?

    • @dsuryas
      @dsuryas 6 лет назад

      hey, have you heard about elm programming language?

    • @DineshkumarPuli
      @DineshkumarPuli 6 лет назад

      Angular

    • @kidstoysvideosofficial
      @kidstoysvideosofficial 6 лет назад

      Yeah Enjoyed....!!!! Your are Aweseom Trainer..!!!! God bless you.

    • @murtazaaydogdu798
      @murtazaaydogdu798 6 лет назад

      @@artede1 Node.js

  • @EoLienFive
    @EoLienFive 6 лет назад +313

    9:40 Generate Component
    18:30 Routes
    22:25 Events
    29:15 Service
    38:53 Forms

  • @dannieo5195
    @dannieo5195 5 лет назад +2

    I used to work with Angular. But now is a React developer. Somehow I still like Angular.
    I found Angular is used for more enterprise web app as it is a framework with structures and its own way.
    React is library and quite flexible. Good for startup.

  • @shubhammishra6215
    @shubhammishra6215 4 года назад +4

    Hey Gary, To be frank, I really didn’t had any idea how to start with and other stuffs which are explained in the video.
    I just loved it and it was really easy to understand.
    Thanks for making this video.

  • @elathiaskade7311
    @elathiaskade7311 5 лет назад +4

    I'm so glad that Hawkeye can explain code so clearly.

  • @priyamganguly
    @priyamganguly Год назад

    I personally prefer the Angular frontend framework. I was looking to learn about model-driven or reactive forms in Angular, when I came across this tutorial, and it is shown in such an easy-to-understand way that my concept on the topic is absolutely clear now. Thanks Gary.

  • @POPOEVER
    @POPOEVER 6 лет назад

    Started from AngularJS and done several enterprise level project, def. love it, and move on to Vue, then revisit Angular on v6, still love it. Angular fits my thinking model perfectly.

  • @faresgeek-dz5692
    @faresgeek-dz5692 4 года назад

    Angular for a bunch of reasons.
    It comes with everything I need
    Routing ...etc
    Great cli
    Awesome project structure
    And so more ....

    • @ericjohnson4200
      @ericjohnson4200 4 года назад

      Hey I've started a Discord server for a study group focused on C#, the .NET framework, and Angular. Looking for fellow students and especially experienced developers to provide some mentoring. I've gotten four requests to join so far. Anyone interested let me know.

  • @dylanhughes5944
    @dylanhughes5944 5 лет назад +3

    Excellent tutorial, I love how you will type something and then explain what it does.

  • @tanmayvij7191
    @tanmayvij7191 5 лет назад +1

    Tried out so many tutorials, this one is the best so far. Easy to understand, concise and everything needed to get started :)

  • @rameshbabuj3885
    @rameshbabuj3885 6 лет назад +8

    Hey Gary Simon,
    Your Angular Course is Superb and Excellent for the begineer

  • @HaakonHestness
    @HaakonHestness 6 лет назад

    I prefer Angular because it is what my clients want and what I've been using for 6+ years. React and Vue are also great JS packages, I've just focused on and had a lot of work with Angular. Thanks for this crash course, it is a great refresher and intro to some new ways to do things.

  • @rfaikbal
    @rfaikbal 6 лет назад

    Your new biggest fan! I stumbled upon your Angular 6 tutuorial few days ago and watched the whole thing. Last night I found this video. Went through it and found it to be one of the best tutorial. Keep up the good work! Cheers!

  • @rangabharath4253
    @rangabharath4253 5 лет назад +2

    Hi, Awesome tutorial. While production command, I am facing an issue "ERROR in src/app/home/home.component.html(4,9):: Property 'data' does not exist on type 'Object'". Please tell me the solution. Thank u

  • @TerenceKearns
    @TerenceKearns 6 лет назад

    I haven't tried any frameworks yet, but I enjoyed this tutorial. It raises a lot of questions which is a great way to jump into learning.

  • @natalyshulzhenko8237
    @natalyshulzhenko8237 4 года назад

    I am glad that I found this video in a lot of other videos. It is clear and direct

  • @IsaacAsante17
    @IsaacAsante17 5 лет назад

    I watched the whole video. I'm new to Angular but you've totally simplified it for me. Thanks!

  • @simonkalu
    @simonkalu 5 лет назад

    Angular is superb especially for enterprise app development. And your tutorial made it simple and straight. Thanks Simon my name sake

  • @JustLookA7
    @JustLookA7 6 лет назад

    Hey Gary, I just finished watching your video and it helped me a lot.
    I started working as a developer for about 6 months now, but the company I'm working for happens to use AngularJS (yeah...)
    Finally they're moving to something new and this crash course helped me a lot in getting some fresh knowledge on the most interesting and useful concepts of Angular.
    Thanks a lot! I also learned a bunch of tools from you that help me with my everyday productivity.

  • @p.g.u.d
    @p.g.u.d 5 лет назад +1

    Yes, greetings -
    Thanks very much for your tutorial .... this is my introduction to A7.
    I followed what you did , largely, and reproduced it.

  • @skyline_741
    @skyline_741 5 лет назад +3

    It was the best tutorial I've seen about Angular, now I really learned a lot with this video, Thanks!

  • @ambitiousdreamer1249
    @ambitiousdreamer1249 5 лет назад +2

    I've just started learning Angular and this course is amazing 😍😍
    Thank you

  • @Age_of_Apocalypse
    @Age_of_Apocalypse 6 лет назад +1

    I don't like React, but I really like Angular and Vue. Maybe a little preference for Angular, but very little. I used Angular 6 with RxJS to build a Website and the experience was really pleasant.

  • @caiohenriquenardes
    @caiohenriquenardes 5 лет назад +4

    Nice !
    I watched in 1.5x speed and understood your english, thank you !

  • @shymultimedia
    @shymultimedia 5 лет назад +4

    EXCELLENT video and the corresponding written version is GREAT to follow along with. As a mid-level developer, I can say that this is a wonderful quick start for intermediate programmers to start making Angular programs quickly. Thank you!!!

  • @joshuam6013
    @joshuam6013 5 лет назад +1

    vue > react > angular. Here cause my work uses angular.
    UPDATE: I might like angular more than react now. Services are real cool and can help a front-end developer understand back-end code, in the event they would need to, because of this practice.

    • @perrym8048
      @perrym8048 5 лет назад +1

      Joseph Shua Jo to me Vue is the best by FAR. This stuff just isn’t JavaScript. I use AngularJS but have to teach someone Angular for a lesson tomorrow and they just made everything less intuitive

    • @joshuam6013
      @joshuam6013 5 лет назад +1

      thisisnotperry I still enjoy Vue the most! Depending on how well you understand front end frameworks, and the different ways to manipulate data, then basing your lesson tomorrow off of Vue and comparing it to Angular should be helpful!

    • @perrym8048
      @perrym8048 5 лет назад

      @@joshuam6013 Thanks for the advice! I use AngularJS for work, so the template -> component relationship seems to not have changed that much. Should be helpful

  • @zvucnjak
    @zvucnjak 6 лет назад +1

    Great tutorial!
    As a total beginner, I would like to see more tutorials expanding on this - like working with APIs by sending requests based on user input (like search), working with elements built from data retrieved from those requests, etc...

  • @omostan
    @omostan 6 лет назад

    Excellent tutorial... I love it! I love working with angular because it's a rock-solid framework. Endless features and fun to work with. Updating older versions is seemingly easy to do without breaking your code. Well, you just have to adhere to the right procedure.

  • @yontenjamtsho1539
    @yontenjamtsho1539 4 года назад +20

    If you encounter "Property 'data' does not exist on type 'Object'" error, change Object to any:
    users: any;
    Thanks

    • @KamalYadav-hh2mo
      @KamalYadav-hh2mo 4 года назад +2

      You saved my day :), Thanks a lot!!

    • @ty_hans
      @ty_hans 4 года назад

      thank you!!

    • @amirsaleem4935
      @amirsaleem4935 4 года назад

      Cool I was going crazy with the error. So the change would be in home.Component.ts.

  • @technologyhub1503
    @technologyhub1503 5 лет назад +1

    Excellent , I really like the content he kept on the video and the way he was explaining the Angular features.

  • @manray6396
    @manray6396 4 года назад

    Awesome! I'm primarily an Asp.Net developer, and so these front-end concepts are a bit foreign. Love your style and speed of the course! Look forward to others. Cheers,

  • @marcochavez6742
    @marcochavez6742 5 лет назад +2

    In the project setup he says you can use either CSS or SASS but uses SASS in the project. If you do not know SASS I would recommend learning it before watching this video so you can learn to rewrite his SASS into CSS.

  • @clyderozario5109
    @clyderozario5109 4 года назад

    Thanks! One of the shortest and to the point video tutorials!

  • @josephmaina4888
    @josephmaina4888 3 года назад

    💪💪I am starting a new life with Angular right from this video

  • @avuifasol
    @avuifasol 5 лет назад +78

    On 26:10 remember to delete the last "," from "home.component.html" because it's not gonna work.
    Home

    • @nu11pointerexception
      @nu11pointerexception 5 лет назад +1

      Thank you

    • @Mshagy02
      @Mshagy02 5 лет назад +1

      thankyou!

    • @Schiliman
      @Schiliman 5 лет назад +2

      Thought it was weird to just cut the video just there. he could have mentioned it in the video. So thanks for pointing it out.

    • @bhartigodwani
      @bhartigodwani 5 лет назад +1

      thanks a lot :)

    • @ChesterMikeJoe
      @ChesterMikeJoe 5 лет назад

      THX

  • @bobbby_john
    @bobbby_john 5 лет назад

    I dont usually comment, but I have say it: great stuff! Unlike many others you don't lose yourself on unnecessary javascript code. Keep up the great work

  • @amirfawzy1147
    @amirfawzy1147 6 лет назад

    I love angular i see it is the most completed JS framework you can use it without need to any third part libraries ... and i can build any project with it big or small without over thinking if the framework you use gonna serve the project objectives or not

  • @MrAdamwilson1234
    @MrAdamwilson1234 5 лет назад

    creating components, services etc with cli commands is so quick. I enjoy React but seeing how messy things can get in a big app, I like that Angular enforces specific ways to do things.

  • @crocodilecrox3758
    @crocodilecrox3758 6 лет назад

    I love angular. I love how everything has its place and how standardized the code is. And lets not forget its a full solution to SPAs there is little need to include 3rd party libs.

  • @lococodermm4318
    @lococodermm4318 5 лет назад

    your tutorial is very nice, simple and easy to understand. i am new in angular and we have learn a lot of new things from here.

  • @jerriberries5710
    @jerriberries5710 5 лет назад

    I am totally new to angular and i must say you do an amazing job. Thanks so much

  • @linjianru
    @linjianru 5 лет назад

    I like this video because it's helpful. I don't know why 29 people dislike this. Why?

  • @jasonhoi85
    @jasonhoi85 5 лет назад

    Great tutorial for newbie on Angular JS!
    Especially for someone who want a complete feel on "Angular way of making apps", I enjoy it so much, Thanks!!

  • @TerenceKearns
    @TerenceKearns 6 лет назад +1

    For any other n00bs like me, I just discovered the Augury debug extension which adds a tab in the browser's DEVELOPER TOOLS (ctrl-shift-I). There is an addon for both Firefox and Chrome.
    Your app needs to be running in DEBUG MODE.

  • @bejoyp
    @bejoyp 5 лет назад +1

    Wow!! It was so simply explained , now I feel at ease with angular!! Thank you!!

  • @mayanksrivastava4452
    @mayanksrivastava4452 3 года назад

    Amazing tutorial, loved it, easy to understand Angular. Thanks a lot man !

  • @BrisLS1
    @BrisLS1 5 лет назад

    Very good lesson! I only had trouble running it in Internet Explorer, an older browser version, but that's just fine, because those problems can be styled correct, by just using more standard Bootstrap in the code. It worked great in Chrome and everything rendered exactly as shown. Also, firing up the app from within VSCode would be useful for productivity. On the second day, I just had to fire back up a Command window and run NGSERVE -O to get the service back up and running with an open browser.

  • @hablatv778
    @hablatv778 4 года назад +1

    I really love React . It's just wonderfull .

  • @JustStef018
    @JustStef018 6 лет назад

    You are a great person to learn from! Thank you for making great education videos, you've done wonders from most of us so far!

  • @alexli2521
    @alexli2521 4 года назад

    This is one of the best lectures i've heard. Thanks

  • @InderpreetSinghJolly
    @InderpreetSinghJolly 6 лет назад +57

    just started learning Ng6 now Ng7 is here 😋😊😁

    • @DesignCourse
      @DesignCourse  6 лет назад +16

      There aren't many new features, most of the updates are under the hood.

    • @TheDashang007
      @TheDashang007 6 лет назад +2

      i havent learnt ng2

    • @reidyoung298
      @reidyoung298 6 лет назад +2

      Get used to it :) But yeah, it's all moving in a better direction, just like JavaScript. The core and important parts of the language will always help with the framework and the ability to use other parts of other languages with things like TypeScript are always a welcome addition. Plug away and each change becomes part of the day to day :)

    • @VikasPoonia
      @VikasPoonia 6 лет назад +1

      Have you followed any material for Angular?

    • @nerosonic
      @nerosonic 6 лет назад +3

      it feels like i learn AngularX and then there's AngularX+1 just a week later... o_o

  • @divinecho5678
    @divinecho5678 5 лет назад +1

    Thanks. This is a great scratch course. Understood many things even though i am new to angular

  • @misteralfie
    @misteralfie 5 лет назад +5

    Thanks for the video, learning this was lots of fun!

  • @vj60
    @vj60 4 года назад

    Thank you so much, I just started Angular, it really helped me to begin

  • @chrischoir3594
    @chrischoir3594 5 лет назад

    It is evident that the developers of Angular knew every little about frameworks and fundamental Software Architecture

  • @RahulJain-bb1kl
    @RahulJain-bb1kl 4 года назад

    this is simplest way to learn angular, brilliantly explained thaks

  • @suraj.ankola
    @suraj.ankola 6 лет назад

    Vue is best for a quick start and easy to learn. Angular is good for big applications! For Vue, JS is enough but Angular JS and TS both needed.

  • @shobhitsharma8323
    @shobhitsharma8323 6 лет назад

    I have worked on ReactJS and Angular both and I recommend to use Angular

  • @oroudev8230
    @oroudev8230 5 лет назад +2

    thx a lot for this awesome tutorial works just fine - Newbie to angular I understand the basics now :D

  • @mhafeez
    @mhafeez 5 лет назад +1

    A true crash course. Thanks a lot.!

  • @pirategaming2615
    @pirategaming2615 5 лет назад

    Also, If you want to skip creating test files for your project, You can add --skip-tests to the end.
    For example: ng new ng7 --skip-tests

  • @renaldolouis5255
    @renaldolouis5255 3 года назад

    great tutorial and to the point, help me so much ,thanks dude

  • @mohammedhussain7069
    @mohammedhussain7069 5 лет назад

    Very nice to the point and easy to follow new to Angular this was really helpful.

  • @eldoncar23
    @eldoncar23 4 года назад

    Thanks a bunch for this tutorial. Awesome stuff!

  • @mountain__oak
    @mountain__oak 6 лет назад

    Game changer! love your tutorials

  • @СергейПустовит-в4ъ

    with that video i'm finally understood what happens. great job

  • @klassykat2681
    @klassykat2681 6 лет назад

    Love your videos and I found this tutorial way more comprehensive than the angular 6 one.

  • @ahmadyarkhan9140
    @ahmadyarkhan9140 5 лет назад

    Personally typescript is a lot cleaner to code in so Angular in my opinion is an excellent choice for large scalable projects. React on the other hand being a library is extremely powerful and JSX is wonderful. I do find react code vulnerable to mismanagement but ofcourse there are best practices to counter that. Vue is an excellent choice as well since in my opinion it has a number of features from both react and angular while a number of its own. I think the ultimate framework/library to choose depends on the scope of the project and specifically the use-case!

  • @muhammadm9498
    @muhammadm9498 6 лет назад

    Angular is my frontend framework of choice.
    BTW, thank you for the superbly awesome tutorials! You rock! :)

  • @jarrod8461
    @jarrod8461 6 лет назад

    Wow. Learnt a lot even though I have minimal understanding of AngularJS and versions 2 to 6.
    Thanks for the video and please release more on Angular 7.

  • @vemanamar
    @vemanamar 5 лет назад

    Its very short and concise tutorial covering key elements of Angular. Thanks and great job

  • @nomtijorti
    @nomtijorti 6 лет назад +1

    definitely angular cos it's more robust, but sometimes i like vue cos Vuex is so easy to setup and use, compared to ngrx

  • @AguiaPC
    @AguiaPC 6 лет назад

    Os seus tutoriais são os melhores, aqui no Brasil não tem igual!!
    Your tutorials are the best, here in Brazil has no equal !!
    👍🏻

  • @sharankumar2520
    @sharankumar2520 5 лет назад

    Thank you so much , You are one of the best ... Concepts are clear , highly recommended for a beginner

  • @sonogyn
    @sonogyn 5 лет назад

    Great introduction to Angular. Very pleasant explanation style. Thank you!

  • @dasabaja
    @dasabaja 3 года назад +1

    Hi. I followed your tutorial down to a tee, but I'm getting this: Property 'data' does not exist on type 'Object'. I can't display avatar and username on my home page. Something probably changed in the past three years...but what?

    • @jussivuoti7176
      @jussivuoti7176 3 года назад +2

      There was an answer to this issue in his github project:
      "workaround, change
      users: Object to users: any;
      in file home.component.ts"

  • @pramodashta
    @pramodashta 5 лет назад

    Thank you. Nicely explained, especially the Angular 7 setup.

  • @RishuGupta
    @RishuGupta 4 года назад

    It is very common you shared when u have the title angular 7 make sure you share new features of angular 7.
    Thanks for sharing

  • @piyushbaid7711
    @piyushbaid7711 5 лет назад

    awesome stuff! quick and comprehensive.

  • @rishwanthkm
    @rishwanthkm 5 лет назад

    Thank you so much for this video...helped a lot in understanding the basic stuff..

  • @Marky00
    @Marky00 4 года назад

    Best crash course on yt

  • @igorjakaric9583
    @igorjakaric9583 5 лет назад

    Awesome video! Mind Blowing. Thank you!

  • @FahadShah822
    @FahadShah822 6 лет назад +2

    I don't feel comfortable upgrading to a new ng version until I watch one of your videos on it.

  • @xinhho3022
    @xinhho3022 4 года назад

    Thanks for the video, learning this was lots of fun

  • @iancarr3923
    @iancarr3923 5 лет назад

    Very helpful video and up to Gary's usual standards. One tiny criticism from someone new to angular: it would help if "Open Editors" was not used - it replicates what is already visible in the main code area. But great video.

  • @rodrigoflorex
    @rodrigoflorex 5 лет назад

    Great tutorial man!! Clear and simple!!

  • @tasnimali9312
    @tasnimali9312 5 лет назад

    I frickin love these tutorials. Keep up the good work!!!

  • @bossbhai4650
    @bossbhai4650 5 лет назад

    Thanks for this awesome course & your awesome Electron course, we love you. React is the framework of Choice because its easy and then we can use React Native for Mobile Development.

  • @mlouk4797
    @mlouk4797 5 лет назад

    I love your courses. Thank you and keep up ,I support you

  • @janwartoday
    @janwartoday 5 лет назад

    Thanks a bunch. This was very helpful to get me started.

  • @nothingtosee4197
    @nothingtosee4197 4 года назад +1

    ERROR in src/app/home/home.component.html(4,7): Property 'data' does not exist on type 'Object’. im getting this error while building

  • @prasadnewase1835
    @prasadnewase1835 4 года назад

    Great tutorial for getting started with angular 7👍

  • @AlexAegisOfficial
    @AlexAegisOfficial 6 лет назад

    You can open your integrated terminal in VS code by dragging the blue status bar's top edge up.

  • @bdhaliwal24
    @bdhaliwal24 5 лет назад

    Great job. Maybe a quick conceptual diagram of how the various pieces relate to each other might be helpful. There are a lot of files and it can be easy to get lost when you start out.

  • @aaryalingareddy3604
    @aaryalingareddy3604 5 лет назад

    this 50 minutes video very much worthful. Thanks Gary.

  • @russelldriver6394
    @russelldriver6394 5 лет назад

    Don't you have to add tag to the main app.component.html file in order to see it? I thought all html tags need to be inserted into the main app html page or am I missing something crucial ?

  • @chiranjeevisaride
    @chiranjeevisaride 6 лет назад +15

    Angular I worked with both react & Angular. Angular is best

  • @KNavaneethakrishnanBabu
    @KNavaneethakrishnanBabu 5 лет назад

    Hey Gary,
    This is very Superb & Excellent. would be perfectly useful for all the watchers. Great Teach & Video from you. Thanks a lot man.

  • @MrKafsal
    @MrKafsal 5 лет назад

    Thanks for explaining in a simple way, great work...

  • @kevinadolfsson3441
    @kevinadolfsson3441 5 лет назад +1

    Very good tutorial!! Thank you very much!