WP Tutorials

Learn Angular A-Z: Complete Tutorial for Beginners

Learn Angular A-Z: Complete Tutorial for Beginners

Learn Angular A-Z: Complete Tutorial for Beginners



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: https://elements.envato.com/?utm_campaign=yt_tutsplus_JWhRMyyF7nc&utm_medium=referral&utm_source=youtube.com&utm_content=description

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: https://github.com/jwmcpeak/Angular-Fundamentals
• Angular: https://angular.io/
• Node.js: https://nodejs.org/
• Visual Studio Code: https://code.visualstudio.com/

We have a lot to cover, so let’s get started!

Read free Angular tutorials on Envato Tuts+: https://code.tutsplus.com/categories/angular?utm_campaign=yt_tutsplus_JWhRMyyF7nc&utm_medium=referral&utm_source=youtube.com&utm_content=description

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_JWhRMyyF7nc&utm_medium=referral&utm_source=youtube.com&utm_content=description

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: https://elements.envato.com/?utm_campaign=yt_tutsplus_JWhRMyyF7nc&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/envato
► Follow Envato on Facebook: https://www.facebook.com/envato
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

source

Comments (41)

  1. https://youtu.be/JWhRMyyF7nc?t=5191, at this I wonder why the styles of wish-list {} from the app.component.css does not get applied to the wish-list component, and the host have to transform it to the wishList.component.css itself?. Any one help me understand why? Thank you !

  2. best

  3. For people curious about the Angular version, readme file in source: This project was generated with [Angular CLI] version 14.1.3.

  4. Excellent course about AngularJs. I have worked with reactjs, but for separation of concern and build-in feature provide by angularJs. I have decided to choose angularJs to build a web application for a customer.

  5. Does the tutorial cover State management ngrx?

  6. thank you so much,good video

  7. Thanks, I completed the whole video, and I was coding along side you, To anyone who is thinking of watching this , you should definitely watch it, although a few things have changed but the remaining 85% of the things is still the same

  8. 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

  9. thank you so much <3

  10. 44:22 you can also do checked={{item.isComplete}}

  11. Before I start with this video is there any pre-requisite that I need to complete?

  12. Subscribed from india…

  13. 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.

  14. for Angular 17 and higher dont use ngFor but @for.. It needs a tracking id so you need to extend your class with an id and make sure the constructor adds it to your item : number and give your items ids in the constructor
    <div class="container">
    <ul>
    @for (item of items; track item.id) {
    <li>{{item.id}} – {{item.wishText}}</li>
    }
    </ul>
    </div>

  15. 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

  16. Is it just me or is there something about the way he says $100,000,000,000?

  17. hats off, you have a gift for explaining things

  18. no ng command (not recognized) reinstalled node js but still no ng

  19. 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.

  20. Thanks for the tutorial! Your way of teaching is amazing.

  21. Great tutorial….One of the best Angular tutorials I've seen

  22. Give this man 100,000,000,000!!!

  23. 25:40
    In the latest version of Angular v17, built-in for loop is updated. Below is the syntax ,

    <div class="container">

    <div >

    @for (item of items; track $index) {

    {{item.wishText}}

    <div> &NewLine;</div>

    }

    </div>

    </div>

  24. thanks

  25. Thanks for this very detailed tutorial

  26. 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.

  27. What's the vscode theme?

  28. Some one pls tell me, how he is doing this: 28:12?

  29. 28:12 how did you do that paste with all of the stuffs?

  30. 28:09 how did you paste that markup???

  31. Monster of a tutorial I think it's gonna help me a lot for my internship 🙂

  32. 3:07:12 the what now

  33. thank you, you made it very easy.

  34. One of the best Angular tutorials, I really like how you simplify everything

  35. What is the Angular version used in this tutorial???

  36. I encountered NG0100: ExpressionChangedAfterItHasBeenChecked in 4.1 Using Observables. How to fix this?

  37. thank u, really great work, best tutorial

  38. For Angular@17 use cli command: 'ng new projectName –standalone false'
    or 'ng new projectName –no-standalone'

  39. Awesome tutorial! Thank you

Leave your thought here

Your email address will not be published. Required fields are marked *

Enable Notifications OK No thanks