Angular for Beginners Course [Full Front End Tutorial with TypeScript]
HTML-код
- Опубликовано: 8 сен 2024
- Learn Angular in this complete course for beginners. First you will learn the basics of Typescript and then you will learn about important Angular concepts such as binding, dependency injection, forms, routing, and more.
✏️ Santosh Yadav created this course. Check out his channel: / techtalkswithsantosh
🔗 / santoshyadavdev
🔗 github.com/spo...
💻 API Code: github.com/san...
⭐️ Course Contents ⭐️
Introduction
⌨️ (0:00:00) Introduction to Angular
⌨️ (0:09:56) Introduction to Typescript
⌨️ (0:28:57) SPA and Local Setup
Typescript
⌨️ (0:42:09) Typescript Data Types and Functions
⌨️ (1:25:56) Classes and Interface
⌨️ (2:11:10) Typescript decorators and tsconfig file
Angular Installation and Basics
⌨️ (2:20:24) Angular Installation and Binding Syntax
⌨️ (3:25:04) Built-in Directives
⌨️ (4:07:36) Built-in Pipes
⌨️ (4:30:10) Adding Bootstrap CSS to App
Lifecycle Hook and Component Communication
⌨️ (4:44:53) ngOnInt and Component Communication using Input and Output
⌨️ (5:09:32) Change Detection and ngOnChanges
⌨️ (5:36:51) ngDoCheck
⌨️ (5:42:01) ViewChild, ViewChildren and AfterViewInit
⌨️ (6:22:41) Content Projection, AfterContentInit and OnDestroy
Dependency Injection
⌨️ (6:44:55) Introduction
⌨️ (7:09:34) Resolution Modifiers
⌨️ (7:24:06) Value Providers
HttpClient and RxJs
⌨️ (7:41:04) Setting Up HttpClientModule
⌨️ (7:44:07) HttpService , RxJs observables and http get
⌨️ (8:01:28) RxJs Observable and Observer
⌨️ (8:11:59) Http Put and Delete
⌨️ (8:27:10) Http Request
⌨️ (8:40:55) ShareReplay RxJs Operators
⌨️ (8:47:17) Async Pipe
⌨️ (8:57:15) catchError operator
⌨️ (9:05:29) map operator
⌨️ (9:09:06) Http Interceptor
⌨️ (9:29:11) APP_INITIALIZER
Routing Basics
⌨️ (9:35:06) Angular Router and default Route
⌨️ (9:51:01) Adding Angular material and navigation
⌨️ (10:00:35) Wild card, dynamic route and ActivatedRoute service
⌨️ (10:23:19) ParamMap and Activate Route Service
Template Driven Forms
⌨️ (10:25:45) Introduction
⌨️ (10:50:20) Validation
⌨️ (11:09:26) Pristine, Dirty State and Reset Form
⌨️ (11:19:08) Custom Directives and Custom Validation
Advanced Routing
⌨️ (11:49:33) Navigation using Router Service
⌨️ (11:52:34) Feature and Routing Module
⌨️ (12:10:57) Nested and Child Route
⌨️ (12:19:41) Lazy Loading
⌨️ (12:35:49) Configure Lazy Loading using CLI
⌨️ (12:42:46) Using ProvidedIn Any
⌨️ (12:59:15) Router Events
⌨️ (13:06:00) Listening to Router Events
Route Guards
⌨️ (13:08:49) CanActivate
⌨️ (13:21:24) CanActivateChild
⌨️ (13:26:53) CanLoad
Reactive Forms
⌨️ (13:30:44) Introduction
⌨️ (13:41:33) Using Material Controls
⌨️ (13:59:54) Nested Form Controls
⌨️ (14:17:38) Dynamic Forms
⌨️ (14:45:09) Built-in Validators
⌨️ (14:51:50) Reset Form
⌨️ (14:55:15) Control Level Validation
⌨️ (15:05:22) SetValue and PatchValue
⌨️ (15:09:23) ValueChanges and UpdateOn
⌨️ (15:17:40) map operator with Form
⌨️ (15:29:55) Custom Validator
CanDeactivate Guard
⌨️ (15:57:10) CanDeactivate Guard and Form
Custom Pipe
⌨️ (16:15:04) Custom Pipe
Resolve Guard
⌨️ (16:25:39) Resolve Guard
Global Error Handling
⌨️ (16:45:46) Error Handling
Testing Basics
⌨️ (16:50:08) Introduction
⌨️ (16:56:59) First test
⌨️ (17:01:43) Testing Component and Service
Deployment and CI/CD
⌨️ (17:15:44) Using Netlify for Deployment
⌨️ (17:28:06) GitHub Actions to Automate Tasks
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodeca...
Read hundreds of articles on programming: freecodecamp.o...
TImecodes for the first 11 hours
00:00 Introduction to this course
0:35 What is Angular? Angular.js / Angular
3:20 What is component?
4:33 Framework vs Libraries
4:36 Framework
6:00 Libraries
7:12 Features of Angular
8:26 Angular features in action
9:20 What is PWA?
10:00 What is TypeScript?
13:25 Why TypeScript?
16:50 Type Safety
19:25 Installing and Creating First Typescript Program
24:55 Configuration of tsconfig.json
26:15 First file
29:00 Single Page Application
32:20 How Angular helps to build SPA
33:53 Software Installation
42:12 Data Types
1:13:30 Functions
1:26:03 Generic Funciton
1:30:15 Classes
1:51:00 Interfaces
2:11:20 Decorators
2:14:08 ESModules
2:20:32 Setup and Installation of Angular
2:21:26 Installing Angular CLI
2:23:51 Creating Angular workspace
2:25:45 Creating Angular Application inside Workspace
2:30:22 Creating Angular Application
2:31:28 Wokrspace Walkthrough
2:48:34 Introduction to mono-repo
2:54:16 Running application locally
3:07:13 Template Syntax
3:15:25 Binding Syntax
3:20:59 Banana syntax & Box syntax
3:25:16 Directives
3:26:42 Types of Directives
3:27:16 Built-in Directives
3:32:22 *ngIf
3:48:40 *ngFor
4:03:19 [ngClass]
4:05:04 [ngStyle]
4:08:04 Pipes
4:09:45 Built-in Pipes
4:11:15 Pipe Docs References
4:36:02 Adding ng-bootstrap to the Application
4:45:10 Lifecycle Hooks
4:46:54 ngOnInit
4:51:50 Quick Introduction to Component Communication
4:56:17 @Input
5:00:18 Smart and Dumb Components
5:02:46 @Output & EventEmitter
5:16:43 ChangeDetectionStrategy
5:29:18 ngOnChanges
5:36:56 ngDoCheck
5:47:35 ViewChild
5:50:33 ngAfterViewInit
5:57:25 ngAfterViewChecked
6:02:05 ng-template
6:03:03 Dynamic loading of component
6:09:28 Accessing an HTML element using ref
6:16:00 ViewChildren & QueryList
6:23:26 ngAfterContentInit
6:23:44 Content Projection
6:25:23 ng-content
6:30:32 select property of ng-content
6:33:41 ngAfterContentInit
6:35:20 ContentChild
6:38:06 ngOnDestroy
6:43:20 Dependency Injection
6:47:01 Dependency Injection providers
6:50:35 Create a service via CLI
6:53:39 Using dependency injection
6:54:56 why it's important to make services private
6:56:41 Component Interaction Using Services
6:57:35 Dependency Resolution & providedIn: 'root'
6:59:44 A service has only one single instance
7:03:12 Multiple instances of a service (global/local)
7:05:53 Start of a service resolution
7:07:33 The consequence of missing providedIn
7:09:32 Resolution Modifiers
7:10:25 Self decorator
7:14:49 The consequence of missing providers in a component while using @Self
7:16:00 SkipSelf decorator
7:17:33 Optional decorator
7:21:08 Host decorator
7:24:38 Value providers
7:28:26 Creating a value provider
7:32:21 useValue property
7:33:12 Inject value provider
7:37:09 Using localStorage service as a value provider
7:37:38 InjectionToken
7:41:35 Angular Http and Observables
7:43:13 Setting up HttpClient
7:45:03 Mocked backend API
7:45:56 proxy.conf.json
7:48:10 ng serve --proxy-config
7:49:52 Using HttpClient
7:50:47 Getting data from the backend
7:53:24 Observables & RxJS
7:56:25 Push vs Pull architecture
7:58:35 Subscribing to an observable
7:59:50 Getting data from the server
8:00:25 Network tab in Chrome DevTools
8:02:39 Creating a new observable
8:05:23 Subscribing to the created observable
8:12:36 Post operation
8:17:07 Update operation
8:24:30 Delete operation
8:27:41 HttpRequest
8:36:03 Subscription to the multiple events coming from the HttpRequest
8:41:28 RxJS Operators
8:43:10 ShareReplay operator
8:45:58 Modifying stream data by using .pipe() method
8:51:00 saving a subscription for unsubscribing
8:53:55 Back to pipes - AsyncPipe
8:56:39 CatchError operator
9:01:09 Subject
9:06:03 Map operator
9:09:41 Modifying Http Request Headers
9:15:58 Http interceptors
9:18:15 Creating an interceptor
9:26:16 Cloning and modifying the original request
9:29:48 APP_INITIALIZER
9:31:46 Creating initializer service
9:35:44 Angular Routing
9:37:12 What is routes?
9:39:41 Setup router
9:41:37 Router configuration
9:44:21 router-outlet
9:47:15 do not use href
9:48:30 routerLink property
9:51:40 adding Angular Material
9:53:40 Angular Material options
9:56:36 Angular Material Navigation
10:02:17 404 route / wildcard route
10:07:27 Dynamic routes
10:15:07 ActivatedRoute service
10:20:38 ActivatedRoute snapshot
10:21:51 ActivatedRoute params
10:24:36 ActivatedRoute paramMap
10:27:16 Template Driven Forms
10:27:44 Setting up Template Driven Forms
10:31:17 Writing a form
10:42:43 Connecting model with the form
10:43:18 ngModel directive
10:45:20 Form submission
10:51:47 Validating Forms
10:53:51 accessing to the instance of the form
11:01:57 Accessing to the form control
11:10:07 Pristine and Dirty states
thank you sir for doing the needful
blessings upon you
thank you
thank you very much
Thank you. U saved me so much time
Introduction
⌨ (0:00:00) Introduction to Angular
⌨ (0:09:56) Introduction to Typescript
⌨ (0:28:57) SPA and Local Setup
Typescript
⌨ (0:42:09) Typescript Data Types and Functions
⌨ (1:25:56) Classes and Interface
⌨ (2:11:10) Typescript decorators and tsconfig file
Angular Installation and Basics
⌨ (2:20:24) Angular Installation and Binding Syntax
⌨ (3:25:04) Built-in Directives
⌨ (4:07:36) Built-in Pipes
⌨ (4:30:10) Adding Bootstrap CSS to App
Lifecycle Hook and Component Communication
⌨ (4:44:53) ngOnInt and Component Communication using Input and Output
⌨ (5:09:32) Change Detection and ngOnChanges
⌨ (5:36:51) ngDoCheck
⌨ (5:42:01) ViewChild, ViewChildren and AfterViewInit
⌨ (6:22:41) Content Projection, AfterContentInit and OnDestroy
Dependency Injection
⌨ (6:44:55) Introduction
⌨ (7:09:34) Resolution Modifiers
⌨ (7:24:06) Value Providers
HttpClient and RxJs
⌨ (7:41:04) Setting Up HttpClientModule
⌨ (7:44:07) HttpService , RxJs observables and http get
⌨ (8:01:28) RxJs Observable and Observer
⌨ (8:11:59) Http Put and Delete
⌨ (8:27:10) Http Request
⌨ (8:40:55) ShareReplay RxJs Operators
⌨ (8:47:17) Async Pipe
⌨ (8:57:15) catchError operator
⌨ (9:05:29) map operator
⌨ (9:09:06) Http Interceptor
⌨ (9:29:11) APP_INITIALIZER
Routing Basics
⌨ (9:35:06) Angular Router and default Route
⌨ (9:51:01) Adding Angular material and navigation
⌨ (10:00:35) Wild card, dynamic route and ActivatedRoute service
⌨ (10:23:19) ParamMap and Activate Route Service
Template Driven Forms
⌨ (10:25:45) Introduction
⌨ (10:50:20) Validation
⌨ (11:09:26) Pristine, Dirty State and Reset Form
⌨ (11:19:08) Custom Directives and Custom Validation
Advanced Routing
⌨ (11:49:33) Navigation using Router Service
⌨ (11:52:34) Feature and Routing Module
⌨ (12:10:57) Nested and Child Route
⌨ (12:19:41) Lazy Loading
⌨ (12:35:49) Configure Lazy Loading using CLI
⌨ (12:42:46) Using ProvidedIn Any
⌨ (12:59:15) Router Events
⌨ (13:06:00) Listening to Router Events
Route Guards
⌨ (13:08:49) CanActivate
⌨ (13:21:24) CanActivateChild
⌨ (13:26:53) CanLoad
Reactive Forms
⌨ (13:30:44) Introduction
⌨ (13:41:33) Using Material Controls
⌨ (13:59:54) Nested Form Controls
⌨ (14:17:38) Dynamic Forms
⌨ (14:45:09) Built-in Validators
⌨ (14:51:50) Reset Form
⌨ (14:55:15) Control Level Validation
⌨ (15:05:22) SetValue and PatchValue
⌨ (15:09:23) ValueChanges and UpdateOn
⌨ (15:17:40) map operator with Form
⌨ (15:29:55) Custom Validator
CanDeactivate Guard
⌨ (15:57:10) CanDeactivate Guard and Form
Custom Pipe
⌨ (16:15:04) Custom Pipe
Resolve Guard
⌨ (16:25:39) Resolve Guard
Global Error Handling
⌨ (16:45:46) Error Handling
Testing Basics
⌨ (16:50:08) Introduction
⌨ (16:56:59) First test
⌨ (17:01:43) Testing Component and Service
Deployment and CI/CD
⌨ (17:15:44) Using Netlify for Deployment
⌨ (17:28:06) GitHub Actions to Automate Tasks
The hero we needed
Great ya super
thank u
can I know the version of Angular being used? TY
You are a life saver
A few days before my first day as a programmer intern, I've taken the challenge to change from a language I was more comfortable with (Node + React) and trade it for a path with Java, TypeScript and Angular. Java I already had a minimum experience, so I'm building on top of that. However, the curious thing is, this video was released the day before my first day at the on-boarding in my new job (DBServer, based here in Brazil). I have to say, when I saw the notification that morning, I took that as a sign that I made the right choice. Thank all of you for taking the time and effort to share that quality of a knowledge with us for free. Love from Brazil. ♥
Java is definitely the better choice than Node. Also give Blazor Server a try. It's pretty amazing!
Hi mate! Im in the same situation, I was using MERN and now for the internship I will go for Angular. How did you manage to migrate from React to Angular? Can you tell about your experience such as, which topics were hard to understand compared with React? I am familiar with AngularJS btw.
@@dilantaskn928 Hey! Well what do you know, it's happening to me as well! :D Im a React developer who just got into an internship where I will be using Angular. I have zero experience with Angular. Any advice would be greatly appreciated. Thank you!
I’m coming to Brazil 😂😂
I hope it did work out for you my man! Have a good one mate!
Awesome course, digging in those little (sometimes annoying) details that every developer needs to know to properly master the language. My humble respects for the time invested in sharing this course.
my thoughts, exactly. thanks, Fernando, for articulating for all of us : )
Thank you 💙💙
@@stephanieezat-panah7750 Thank you 💙💙
I am getting an error after executing tsc --init. What to do The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path is correct and try again.
@@AlokKumar-ot9sx add the path of tsc in environment variables
17 hours of true coding learning and experience. It's long, but worth it, you can't learn angular in just 2-3 hours.
But can you do that in 17?
@@ScrotoloOttavoNano You can learn enough to improve on your own, it's like driving a car, you learn enough to be able to improve without a tutor
@@ScrotoloOttavoNano Enough for basic stuff, suggest to watch at least 2 times then read the docs to see what's new in the latest angular for improvements.
How long have you token to finish?
Do i need to learn JavaScript in order to learn this course
@tarasj192
1 month ago
The rest of the timecodes:
11:14:50 Submit and reset Forms
11:19:51 Custom Directive with Forms
11:42:31 Custom Validation
11:50:15 Router Service
11:53:17 Feature Module and Routing
12:11:41 Nested Routes and Child Route
12:20:25 Lazy Loading
12:43:42 Provider type any
13:00:04 Route Guards
13:10:15 CanActivate guard
13:22:15 CanActivateChild guard
13:28:06 CanLoad guard
13:31:32 Reactive Forms
13:37:38 Creating Forms
14:02:45 Submit Forms
14:09:05 Nesting Forms
14:18:32 Adding Controls Dynamically
14:46:02 Built-in Validation
14:52:43 Reset Forms
14:55:42 Validation messages
15:06:16 patchValue vs setValue
15:10:20 Listening to Form value changes
15:18:35 Using RxJs Map operators
15:34:46 Writing Custom Validation
15:58:07 CanDeactivate guard
16:16:05 FormControl with a custom pipe
16:26:39 Resolve guard
16:46:47 Global Error Handling
16:51:09 Testing
17:02:48 Test a service
17:16:47 Application Deploymen
after 11:00:00
I didn't know that a youtube course can be this great ! Thank you so much. Done all the 17 hours
Thank you 💙 please do share with your friends and if possible, share a word on Twitter you can tag me as well.
@@TechTalksWithSantosh thank you for the awesome video. Pls I am currently stuck at the point where api proxying was used. After I added the proxy.config file... I couldn't move further. I noticed you destructured your main.ts away from the default template provided by Angular. I am not using nextJs and don't intend to for this my mock project. Pls how do I configure my project to be able to use the api for the hotelinventoryapp project?
@@a_betatv for API you can choose Anu dummy API if you don't want to use nestjs
@@TechTalksWithSantosh where can I find that API?
Successfully finished 17 hours of course. Excellent
how many days it took??
@@akbarshaik6781 almost a week
How to download API code brother
pls I need help with adding the api to my code
@@suryak4224 in x4
i havent completed full course yet, done with like 20% of it. but i must say the content is really in depth. this is a power pack. Thanks for putting all the efforts.
Completed upto 7:00:00 and I can safely say this is an amazing course. He explains the use case, the reason why certain concepts exist.
Exactly. I'm still at directives, but so far it was an amazing course. Especially becasue I'm a backend dev, so he answered every "but why" question that I had, while explaining concepts or functionalities in the standard way. Plus, he showed some great things like - how to use a debugger in the browseer.
00:00 Learn Angular basics and important concepts
06:15 Libraries can be combined to avoid writing extra code
17:50 Type safety in TypeScript
23:55 Introduction to TypeScript
35:10 Install Node.js and npm
41:15 Learn to install and use Visual Studio Code for TypeScript programming.
52:02 Typescript arrays and filter function
57:57 Different Javascript functions and enums.
1:09:45 Avoid using 'any' in codebase
1:16:12 Different ways to write functions in TypeScript
1:29:01 Generics and Classes in TypeScript
1:34:44 Learn TypeScript Basics
1:46:11 Interfaces are important in programming.
1:51:58 Interfaces in TypeScript provide type safety and flexibility
2:03:26 Learn object destructuring and array destructuring in TypeScript
2:09:42 Use classes instead of interfaces for retaining type information in production builds
2:22:03 Install and create an Angular workspace with default project
2:28:36 Learned how to install Angular CLI and create a workspace with default project
2:41:44 Polyfills and zone.js are important for browser compatibility in Angular.
2:47:05 Angular monorepo allows multiple applications and libraries in a single workspace
00:18 Components in Angular have four files associated with them: ts, spec.ts, css/html, and style sheet.
3:04:04 Learn how to write multi-line HTML and use inline styles with Angular 12.
3:16:09 Angular provides three ways to interact with the front-end: interpolation syntax, property binding, and event binding.
3:21:49 Learn about directives and their two types - structural and attribute based.
3:33:51 Use ngIf and optional chaining in Angular templates
3:40:46 Created a room list interface with properties like room type, amenities, price, photos, check-in and check-out time.
00:07 Structural directives modify DOM elements while attribute directives add attributes or logic to elements.
4:01:08 Learn about Pipes in Angular
4:14:44 Learned about currency and JSON pipe in Angular
4:20:34 Don't use slice for pagination in a real-time application
4:33:14 Bootstrap 5 is not compatible with Angular 13
4:41:37 Add Bootstrap to Angular application
4:53:02 Component communication using input and output
4:59:00 Create a reusable component and split components to smallest level possible
5:11:00 Optimizing change detection strategy in Angular
5:18:04 Use onPush change detection strategy for immutable data updates
5:30:59 Learned about input/output and ng on changes
5:37:20 Learn about ng do check lifecycle hook
5:49:50 View child with static true property provides safe access to child component instance
5:55:36 Use static property properly in component initialization
6:08:41 Accessing HTML elements using template references and native element property
6:15:23 View child allows access to first instance of a component while View children allows access to all instances
6:28:41 Create a reusable container component to load content
6:35:19 Accessing components at runtime using view child and content child
6:47:08 Create a service to move reusable code from component
6:53:12 Use dependency injection to create and access services in Angular
7:05:02 Understand Dependency Injection and its resolution modifiers
7:10:38 Use self decorator to ensure service availability at component level
7:23:05 Value providers can be useful to pass an object as a service
7:28:49 Create a service and value provider to use in app module
7:41:26 Learn how to interact with APIs using Angular HTTP and observables.
7:48:29 Set up proxy and make API call using HTTP client service
8:00:25 Learned how to create an observable using RXJS
8:06:25 Understand observable streams and how to create them manually using Observable class
01:10 Learned about making edit and delete calls to API
8:27:26 Learn about the powerful 'request' API and get more information about HTTP calls.
8:40:02 Use the share replay operator to cache requests and improve application speed
8:45:42 Utilize share replay operator and property get rooms to avoid multiple calls while caching the first request
8:57:32 Handling exceptions using catch error in Angular
9:03:38 Learn to use map operator to modify streams
9:15:34 HTTP interceptors can modify requests and responses.
9:23:17 Add token to all HTTP requests using an interceptor
9:34:38 Learn about Angular Router and its functionalities
9:40:33 Configure routes with a default URL
9:52:36 Installed and configured Angular Material and created a responsive navigation bar using schematics
9:59:42 Add a 404 page to handle invalid URLs
10:12:08 Configured dynamic routing and read parameter values
10:17:51 Access dynamic parameters using activated route service
10:30:15 Creating a form to add room functionality
10:37:29 Create a model and connect it to the form for two-way data binding.
10:52:21 Get form status and disable submit button
00:19 Validators can be used to ensure proper form input
11:11:31 Understand the importance of pristine and dirty states in forms
11:17:28 Learn how to reset and preset forms using template-driven forms in Angular
11:29:27 Access and manipulate HTML elements using Angular and JavaScript
11:37:35 Learn how to create a custom directive to validate components
01:36 Use feature modules to group related features together for easier management and sharing.
11:55:32 Refactor app module by creating feature module for rooms.
12:07:40 Refactored codebase into feature modules with its own routing module for better maintainability
12:12:47 Nested routing achieved using children property
12:25:10 Lazy loading modules should be isolated and focus on reusability
12:31:05 Implementing lazy loading for big modules with low frequency of usage
12:41:59 Lazy loading and dependency injection
12:48:33 Using injection tokens to control the number of instances of a service
13:01:23 Understand how to configure and use router events
13:07:16 Learn about router guards and how to implement them using can activate and can load.
13:18:19 Implement guards in Angular
03:52 Implement canLoad route guard for lazy loaded routes
13:35:37 Create a form using reactive forms.
13:42:04 Create and render a form using Material controls
03:27 Added a date picker and nested form controls
14:03:01 Create a form using Angular Material
14:15:54 Learn how to add and remove controls dynamically in Angular forms
14:22:23 Add a submit button to add guests to a form dynamically
14:35:36 Dynamic form control addition and removal
14:42:00 Learned about form array, dynamic controls, and validation using Angular Reactive Forms.
14:54:44 Control level validation added for guest name
15:01:01 Angular Reactive Forms: Setting and Patching Values
15:14:32 Control value changes can be listened to and controlled using ngModelOptions.
04:22 Using different map operators for booking data
15:35:32 Created custom validator for guest name
15:41:20 Implement custom validators in Angular
15:56:09 Add custom validator to your reactive form
16:02:36 Fixed room ID bug and added booking guard
16:18:12 Apply price filter to rooms list
02:08 Learn how to use Resolve Guard for prefetching data
16:39:51 Prefetching Data for Faster Navigation
16:48:17 Implement global error handling in Angular
17:00:04 Testing and Code Coverage
17:06:41 Fixing errors in Rooms Component
17:19:59 Deploy changes automatically with continuous integration using Netlify
17:26:39 Learn how to use Netlify for CI/CD and automate builds with GitHub Actions
I'm 9 months late, but I have to say, not only is this course the most effective and free one for me, but also I love the fact that Santosh includes the mistakes made throughout the course. It felt way more genuine, comfortable and relatable and, counter-intuitively, also helped me resolve and avoid them.
do you think that this tutorial is useful yet ? i have to learn angular for a posible work and i don't know what course i should take.
@@josestudyingenglish-vk6ie It’s pretty useful for you to form a solid foundation on Angular. However, I do suggest that, instead of just copying line for line everything he does, try to build a completely different app and only use this video for reference. That way, you can actually absorb the knowledge better. For example, instead of coding a to-do list like him, I created an app that allows you to upload posts, with stuff like captions, tags, and images. Although my app is more complicated, it uses the same, fundamental functions as his app: create, edit, and delete entries from a database.
@@josestudyingenglish-vk6ie Yes its still relevant and guy is part of Angular developers so we are lucky these days that stuff like this is here for free. developers 20 years ago were not this lucky.
Now we talking, this is something we all waited for.
How, but how when i rrly need something this amazing channel surprised me so much! I just changed my current company, and the new one use only Angular...Thank you so much!!!
If vs code terminal doesn't work to run Angular project using ng serve, open a powershell terminal and paste it:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
then type Y to answer the question
2:31:00
update in Angular 17 use --no-standalone to create app.module files
ty
Does differ much? I mean if this course Is about new angular Will be the same if i actually Need to learn about old One? Most concepts i bet they are the same but maybe the structure May be different?
or just use the versions of angular and node he is using.not that hard to do and teaches you a little about nvm
You are a GOD
I've completed up to 12:20:00 and I have to say that this is one of the best courses I've taken. Santhosh is pretty great at clearing up why and when a concept is required.
Is it worth it? I'm thinking to start this course
@@Bartwal11 definitely. Make sure to take notes as and when you learn because you will definitely need to revise these topics every now and then
Can I start this course with no prior knowledge of JavaScript?
This a great course of angular beginners. To the people who are criticising the course for not going into the details, First of all it’s a free course on RUclips. If you want a detailed explanation on every single thing go through the documentation else get a paid course where you’d get all the detailed explanation you want. Second, It’s an angular course, you should be good in the basics of OOP and JavaScript before starting angular
Finally, my beloved fcc makes my angular have a spotlight right now. Thank you, fcc.
For anyone who thinks the tutorial is going too slow for your taste, I would like to confess I felt that too. But I can assure you, if you skip this tutorial you are going to miss information that no other tutorial is ever going to touch. When you work on a project with a particular language, ever had that feeling of, 'damn I didn't know this thing can be done with this ' . Yeah this video goes to that depth. So, if you think this tutor is going slow, is keep repeating himself, stuttering every now and then and leave, know that you are missing out getting free experience from an experienced developer.
Change my mind about the audio not bad now for some reason. 4 hours into the video and really love it! So glad its so thorough and comprehensive.
Very interesting ryt?
i'm thrilled to thank the way you tought us Typescript in this video, really i came from zero to hero in typescript.
I'm learning a lot here. 5.5 hours in. On a lighter note, has anyone who's completed the 17 hours, counted how many times the room was mistyped as romm..??
i can tell you that he mistyped room as romm til the end of the course, that's just funny but this is an excellent free course
I am watching this, and Angular 16 is the newest version right now. I have been learning React, but I want to learn Angular for general knowledge. The teacher is great, for sure, but I don't understand it clearly. For those who are watching this course, God bless you. You are actually learning two things at the same time.
which two things
At some moments I thought this guy is learning ts together with us :)
I know. but, you know, it is nice that Santosh also made mistakes and had to figure them out.
such humility. appreciate that : )
00:00 Introduction to this course
0:35 What is Angular? Angular.js / Angular
3:20 What is component?
4:33 Framework vs Libraries
4:36 Framework
6:00 Libraries
7:12 Features of Angular
8:26 Angular features in action
9:20 What is PWA?
10:00 What is TypeScript?
13:25 Why TypeScript?
16:50 Type Safety
19:25 Installing and Creating First Typescript Program
24:55 Configuration of tsconfig.json
26:15 First file
29:00 Single Page Application
32:20 How Angular helps to build SPA
33:53 Software Installation
42:12 Data Types
1:13:30 Functions
1:26:03 Generic Funciton
1:30:15 Classes
1:51:00 Interfaces
2:11:20 Decorators
2:14:08 ESModules
2:20:32 Setup and Installation of Angular
2:21:26 Installing Angular CLI
2:23:51 Creating Angular workspace
2:25:45 Creating Angular Application inside Workspace
2:30:22 Creating Angular Application
2:31:28 Wokrspace Walkthrough
2:48:34 Introduction to mono-repo
2:54:16 Running application locally
3:07:13 Template Syntax
3:15:25 Binding Syntax
3:20:59 Banana syntax & Box syntax
3:25:16 Directives
3:26:42 Types of Directives
3:27:16 Built-in Directives
3:32:22 *ngIf
3:48:40 *ngFor
4:03:19 [ngClass]
4:05:04 [ngStyle]
4:08:04 Pipes
4:09:45 Built-in Pipes
4:11:15 Pipe Docs References
4:36:02 Adding ng-bootstrap to the Application
4:45:10 Lifecycle Hooks
4:46:54 ngOnInit
4:51:50 Quick Introduction to Component Communication
4:56:17 @Input
5:00:18 Smart and Dumb Components
5:02:46 @Output & EventEmitter
5:16:43 ChangeDetectionStrategy
5:29:18 ngOnChanges
5:36:56 ngDoCheck
5:47:35 ViewChild
5:50:33 ngAfterViewInit
5:57:25 ngAfterViewChecked
6:02:05 ng-template
6:03:03 Dynamic loading of component
6:09:28 Accessing an HTML element using ref
6:16:00 ViewChildren & QueryList
6:23:26 ngAfterContentInit
6:23:44 Content Projection
6:25:23 ng-content
6:30:32 select property of ng-content
6:33:41 ngAfterContentInit
6:35:20 ContentChild
6:38:06 ngOnDestroy
6:43:20 Dependency Injection
6:47:01 Dependency Injection providers
6:50:35 Create a service via CLI
6:53:39 Using dependency injection
6:54:56 why it's important to make services private
6:56:41 Component Interaction Using Services
6:57:35 Dependency Resolution & providedIn: 'root'
6:59:44 A service has only one single instance
7:03:12 Multiple instances of a service (global/local)
7:05:53 Start of a service resolution
7:07:33 The consequence of missing providedIn
7:09:32 Resolution Modifiers
7:10:25 Self decorator
7:14:49 The consequence of missing providers in a component while using @Self
7:16:00 SkipSelf decorator
7:17:33 Optional decorator
7:21:08 Host decorator
7:24:38 Value providers
7:28:26 Creating a value provider
7:32:21 useValue property
7:33:12 Inject value provider
7:37:09 Using localStorage service as a value provider
7:37:38 InjectionToken
7:41:35 Angular Http and Observables
7:43:13 Setting up HttpClient
7:45:03 Mocked backend API
7:45:56 proxy.conf.json
7:48:10 ng serve --proxy-config
7:49:52 Using HttpClient
7:50:47 Getting data from the backend
7:53:24 Observables & RxJS
7:56:25 Push vs Pull architecture
7:58:35 Subscribing to an observable
7:59:50 Getting data from the server
8:00:25 Network tab in Chrome DevTools
8:02:39 Creating a new observable
8:05:23 Subscribing to the created observable
8:12:36 Post operation
8:17:07 Update operation
8:24:30 Delete operation
8:27:41 HttpRequest
8:36:03 Subscription to the multiple events coming from the HttpRequest
8:41:28 RxJS Operators
8:43:10 ShareReplay operator
8:45:58 Modifying stream data by using .pipe() method
8:51:00 saving a subscription for unsubscribing
8:53:55 Back to pipes - AsyncPipe
8:56:39 CatchError operator
9:01:09 Subject
9:06:03 Map operator
9:09:41 Modifying Http Request Headers
9:15:58 Http interceptors
9:18:15 Creating an interceptor
9:26:16 Cloning and modifying the original request
9:29:48 APP_INITIALIZER
9:31:46 Creating initializer service
9:35:44 Angular Routing
9:37:12 What is routes?
9:39:41 Setup router
9:41:37 Router configuration
9:44:21 router-outlet
9:47:15 do not use href
9:48:30 routerLink property
9:51:40 adding Angular Material
9:53:40 Angular Material options
9:56:36 Angular Material Navigation
10:02:17 404 route / wildcard route
10:07:27 Dynamic routes
10:15:07 ActivatedRoute service
10:20:38 ActivatedRoute snapshot
10:21:51 ActivatedRoute params
10:24:36 ActivatedRoute paramMap
10:27:16 Template Driven Forms
10:27:44 Setting up Template Driven Forms
10:31:17 Writing a form
10:42:43 Connecting model with the form
10:43:18 ngModel directive
10:45:20 Form submission
10:51:47 Validating Forms
10:53:51 accessing to the instance of the form
11:01:57 Accessing to the form control
11:10:07 Pristine and Dirty states
11:14:50 Submit and reset Forms
11:19:51 Custom Directive with Forms
11:42:31 Custom Validation
11:50:15 Router Service
11:53:17 Feature Module and Routing
12:11:41 Nested Routes and Child Route
12:20:25 Lazy Loading
12:43:42 Provider type any
13:00:04 Route Guards
13:10:15 CanActivate guard
13:22:15 CanActivateChild guard
13:28:06 CanLoad guard
13:31:32 Reactive Forms
13:37:38 Creating Forms
14:02:45 Submit Forms
14:09:05 Nesting Forms
14:18:32 Adding Controls Dynamically
14:46:02 Built-in Validation
14:52:43 Reset Forms
14:55:42 Validation messages
15:06:16 patchValue vs setValue
15:10:20 Listening to Form value changes
15:18:35 Using RxJs Map operators
15:34:46 Writing Custom Validation
15:58:07 CanDeactivate guard
16:16:05 FormControl with a custom pipe
16:26:39 Resolve guard
16:46:47 Global Error Handling
16:51:09 Testing
17:02:48 Test a service
17:16:47 Application Deploymen
Thank you for this, I finished university two weeks ago and got my first job as a java / angular developer. This is so great
Where u learnt angular
@@shantivaranasi231 never learnt it, I’ve worked with react before but this will be my first time working with angular
Same here :) Hope your job start went well!
How to popup a image when we click on that in a tag?
Cara, que curso incrível e de graça... me faz ficar triste por ter gastado dinheiro com esses professores de plataforma que querem dividir todo o conteúdo em vários cursos. muuuito obrigado
Sim, concordo, é uma ótima oportunidade de aprendizado e o preço é justo. Obrigado também
Greatest tutorial on angular. Full of details on all important concepts/topics of Angular. Thank you sir.
Please try asking him on his own channel maybe he might respond.
Started. wed 5th 2024 5.42pm : Length 1 hr 8 mins.
Edit - Friday 7th Jun 2024 1:13pm. Length 4hrs 8 mins.
Bro can we use provideHttpClient() as an alternative for HttpClientModule? As it's deprecated from the latest version of Angular 18 also I'm facing some of the issues in the API part
I really appreciate the course and value the length of the content. Santosh is a very knowledgeable individual with proven industry experience. He has a lot to share in this course. One thing I've struggled with in the past is understanding how things connect and why they would be used in the first place. As a form of feedback for @Tech Talks With Santosh, I'd say to design a project that you'd build along as with content this long it can just seem jarring by the amount of information we need to cover. Rather than coming up with use cases and random examples on the fly, a build along series would really help put all the puzzle pieces together and understand why we should do things in certain ways. I like how you started off with the hotel inventory example, but then it felt like there was so much to cover that they stopped adding to the "finished product." Still a fabulous tutorial!
Since we are getting a lot of info every week, please upload a course on Digital Note-making.
Like Notion or Obsidian.
That will really help to manage all this info.
or separate this video in chapters, to re-view important concepts, please!
@@dexdexdex the video has timestamps to easily keep track of your progress
What is the extension you use that has the smart autocomplete. On your video, when you type something, it's smart enough to figure out what you are gonna type next, so it displays it in a "gray" font-color, and then you can press the Tab button to add it.
What is that extension?
Best Angular Tutorial I've seen, bravo!!!!
github copilot
This session is not just about learning angular, but also learning " the experience" of an angular experienced developer, this is rare to get from tutorials. Glad that i found this tutorial.
Is angular still relevant in 2024 ?
The instructor says he's teaching Angular 12 in this course. How could this have come out a year ago?
@@rahulgaurr09 Great question! I'm not sure, companies still use it though.
This course is really good. Everything is clear and understandable.
Thank you 💙💙
What I really like about the instructor is that he goes into great depth on each topic and gives good examples. The only thing I have to add is that to watch this video you must know how to master the basic concepts of programming and especially JavaScript. Otherwise, everything is excellent. 9 hours and a half for now.
Can I start this course with no prior knowledge of JavaScript?
Bhai badiya course banaya hai. Thank you from my bottom of my heart . 😊
Thank you 💙💙
pls I need a head on on the http and observation segment, would you be willing to help?
Bro where is api?
I can't believe stuff like this are free 🤑
@@Grovelaar most people don't have to watch it in 1 sitting. You can always use it as a reference.
For example, if u ever need video documentation on something like ngIf, you can either google it for the written docs but if you find that confusing, a video like this is an excellent quick starter on the topic.
Hey everyone, a lot of people were looking for API code, now it's added into the description
Can I start this course with no prior knowledge of JavaScript?
@@vedasathvikamadapati4 it covers basics of typescript, you can start from here and make sure to dive deep into typescript later.
finished 17 hours of course
Thank you
Thank you for having this free video tutorial. I am now at Directives ngIf @ 3:34:20 moving to ngFor . I am looking forward to finish this video. :)
Helpline📲📥⬆️
Questions can come in⬆️
2:28:59 it didn't asked for server-side rendering for the instructor, but asked me in terminal, so to get similar results as instructor (i.e. same files) say no to server-side rendering when asked on terminal
Within a week i had to make front end project in Angular.
And boom FCC came up with this video 🔥
I was waiting for Angular
~16:23:32 that error is solved like this:
1. in room-list.component.ts in the line @Input() rooms: Array | null = [ ];
2. remove the ' | null = [ ] '
3. And there you have it. Idk why Santosh doesnt show it, but there is the solution.
filter custom pipe room of rooms
Amazing Course (so helpful and understandable) .. thank you ❤❤
Thank you 💙
Thank you Santosh for amazing course. 5hrs into lecture and will complete whole.
I'm an automation testing Java Developer.
Starting this course to start learning Front End.
Wish me luck!
Good luck friend!
In angular 17 , if want to add module than while creating app just write cmd [ng new (your app name) --no-standalone . ]
There is two hyphens before no (- - no - standalone) but dont give any sapce in between while writing the cmd
As the course says, angular for beginners it needs more explanation than just tutorials - at some points i felt like i get what you are dng but not exactly why and how are you dng it. For eg: like the @Input @viewchild it should been explained like for transferring data from parent -> child its @input and from child-> patent is @viewchild
But here it just felt like open a random file give a variable then open another html file bind it..
then use it into another file using @Input
I just felt understanding angular more difficult. I tried to followup but then went on to another course and it made things easier
This course is not bad either but it should have been explained more as its a beginners course
bro what course did you got, can you please tell me, im on 8hrs here
can you suggest me a more beginner friendly angular course?
Massive respect for Mr Santosh for enlightening us peasants with this spectacular, full-fledged, modern Angular course for ABSOLUTEly free🥳
Khoon meih se Gulami jayegi nhi kabhi tum logo meih see.............
I love ANGULAR. I cant wait to dive into this1
What to love there?
@@aammssaamm Standard packages for common tasks, if you install react you only get maybe state management then you have to decide what else to install, with angular you get:
forms, pwa, testing, web components, animations, i18n and more from just installing the angular package.
For me what I love is that Angular was built from the ground up in typescript, when I use other frameworks the typescript configuration feels like an afterthought.
@@TayambaMwanza And no event flow management. 😂 Let's not talk about codebase size and performance. 😂
~1:25:00 confusion of rest/spread operators, rest will take the "rest" of the arguments, and put them into an array into the "rested" parameter
thank you so much Sir. Your teaching skills are amazing. I found this video getting progressively better. Utilizing so much open source things really making in me urge to give it back to the world in some way or other. And I really want it to continue for long...
If you are again having problem at 4:57:50 then copy this in your roomlist.component.ts file on above
import { CommonModule } from '@angular/common';
And then also replace your @component decorator thing with this
@Component({
selector: 'hinv-rooms-list',
standalone: true,
imports: [CommonModule],
templateUrl: './rooms-list.component.html',
styleUrl: './rooms-list.component.css'
}) Here imports have changes to [CommonModule]
Im good at math too :D great videos Santosh
I'm good at lazy
A amazing video, love the interactivity. love how he doesnt make the content sound too confusing. Thank!
This is what i am looking for thanks a looooot🙂🙂🙂🙂🙏
I just starting the tutorial , just the first 30 minutes. It looks to be very good tutorial as Mr. Santhosh explain the what and the why
Longer than yesterday's version.
But the complete one I believe.
Thank you for the course.. really helpful as you covered almost everything.. loved it
Special Thanks to you. Angular was a Huge step to learn it for me. You maked it very easy to me.
I love the theme you used : can u tell me the name of your vscode Theme.
Thank you.
Thank you 💙💙 its night owl by Sarah Drasner
Thank you so much for creating such wonderful content! Thanks to all the members that are associated with this course🌸
This channel is just wonderful
Thanks for the course, Santosh! Finished it last week and it was amazing. Learned a lot!
I am looking forward for MEAN Full stack on freecodecamp. Please upload MEAN latest video , it will be really helpful.
MEAN or MERN ?
@@LevisRaju A for Angular
Angular - MEAN. , For react there are lot of videos and examples , but for Angular there are very very few which are also years old
@@mozes_ma oh... Thanks bro.
1:54:13 PIN is Postal Index Number (also PIN Code) similar to ZIP code.
Santosh ji is an inspiration for us. ❤️🇮🇳
Even though angular 17 is out now, learning from this video is still resourceful. Obviously you will have to use the angular docs, but learning with that is very helpful, and by reading docs, you will get more acquainted of learning from docs, and this is a great skill for a software developer
Timestamp from 14 hours
14:02:53 How to submit the Form
15:35:35 Custom validators in reactive form
15:54:00 Add the custom-validation error to the control
he gives a lecture for 17 hours without stopping. this man is a fucking machine
Excellent thanks for the course ❤
Mad respect for sharing so much for free.
Thanks for the course! Timestamps would have been helpful though :-)
@m z Haha..sorry for that, I was just looking for the timestamps in the time progress bar in the video! Great thanks! 🙂
0:30 Typescript Starts
2:20:20 Angular Starts
4:10:00
Respect exponentially growing for this amazing teacher ❤❤❤
That's gonna be super useful for the next six months. Thank you freecodecamp!
Really good teacher. Nice and calm. Will follow your channel to learn more from you.
Thank you 💙💙
@@TechTalksWithSantosh Where to find api code?
Thanks for putting 17 hours to make this wonderful tutorial
Thank you for this great video @TechTalkWithSantosh.. Please I need help at the http and observations section of the video... can anyone offer me help. I am not able to access the api after creating the proxy.config file
Thank you very much.I was for something like this.
Thanks for your efforts
Great video which has really helped getting up to speed with Angular. That being said I just wish my company would switch to Blazor already so I would have to use it! It's just overly complicated when you're used to doing everything in C#.
Advance PHP tutorial... ( Design Patterns, MVC and OOP will be useful )... This will really help a lot
That would be amazing
RIP PHP 🪦
Would be possible to get API repo for practicing API calls by own? BTW amazing course!
Thank you 💙💙 can you send me a DM on twitter or LinkedIn as Yutube deletes the link posted.
Great Course for Web Devlopment
Nice bait and switch from clear native English speaker, to near nearly indecipherable Indian guy.
I am a React Dev and to be honest I was amazed about the @Output Decorator. Lifting state up from Child to Parent Component in React is a bit cumbersum by passing down a function from the parent as prop to the child which I then call with the data from the child to make it available in the parent.
in vue it is even easier
Nice course, thanks!
The rest parameter to a function (e.g ...num) is equivalent to params[] in C#. (At 1:27:00)
3:40:30 as for this we could also use
Room List
what are the prerequisites of this course? Do I need to learn Angular js?
No, basics of HTML, CSS, and JavaScript is enough
I met Santosh last year in december at ng-rome!
Awesome speech of him! 😎
can anyone please share the code that is explained in this video from http and observables ?
Check the description
was a awesome course thanks....
I have reached midway into the course. I can say that although the explanation is good, but without the github link to the code, it is pretty useless to complete the tutorial. In the end the user (i.e. you, the beginner) will get confused about all of it. Santosh should have created a separate file for each new topic and shared the complete code link in the description.
why do we require code when we should be doing it paraelly with him
@@aditikhedkar8514 Beacuse of minor errors that cause us frustration. And because we are repeatedly commenting out older code and writing newer code in same file. Ultimately, older code becomes unusable even on uncommenting.
@@rameshshinde1193 oh right ,totally
very well explained thank you so much for such an detailed video
When I made a project of angular using ng new hotelinventoryapp I didn't get the file like enviroment folder, polyfills. Ts and karma. Conf. Js, why I don't know can any one please tell
i also facing same problem..please someone help us
@@ashokrawat3246 Hey guys you are on a newer version of Angular. Angular 15 I believe, where those files have been removed. This course is filmed using Angular 13, but you should still be able to do everything in the course with the newer version of angular. Alternatively you can downgrade your version to 13 to follow along precisely.
One of the best course with realtime use cases, thanks a lot 😊
Please can you make a tutorial on ngrx in Angular for us. More advance Angular concepts
In progress, it should be released around June, do subscribe to my channel
@@TechTalksWithSantosh Alright