Top 8 Recommended Angular Self-Study Materials! [March 2024]
This page introduces the best in educational materials for beginners who are trying to learn Angular on their own.
Table of Contents:
1. Description of this page
We introduce 8 recommended video courses on various platforms for those who want to learn Angular on their own.
What is Angular?
A front-end web application framework developed by Google. It allows developers to build complex single-page web applications with features such as data binding, dependency injection, and routing.
Our site, "Outlecture," evaluates courses using our proprietary algorithm that balances course rating, freshness of information, number of purchasers and viewers, and recent rate of increase, in order to extract only the most suitable courses for users.
In addition, we will explain the features of each video platform and provide use cases such as "this is better for people in this situation."
We hope this will be a reference for everyone who is going to learn Angular.
2. Top 5 Recommended Udemy Courses
Here are Outlecture's top 5 recommended Udemy courses, carefully selected for you.
Title | Ratings | Subscribers | Subscribers last month (February 2024) | Level | Video Duration | Created | Last updated | Price |
---|---|---|---|---|---|---|---|---|
Complete Angular Course 2023 - Master Angular in only 6 days | 4.6 | 10,974 | 1,367 | all | 8 hours 52 minutes | Aug 22nd, 2022 | Dec 15th, 2023 | $84.99 |
Angular - The Complete Guide (2024 Edition) | 4.61 | 742,826 | 6,508 | all | 36 hours 14 minutes | Feb 8th, 2016 | Jan 22nd, 2024 | $109.99 |
Angular Core Deep Dive - Beginner to Advanced (Angular 17) | 4.54 | 33,103 | 1,377 | all | 12 hours 5 minutes | Aug 30th, 2018 | Feb 1st, 2024 | $74.99 |
Build an app with ASPNET Core and Angular from scratch | 4.65 | 103,395 | 915 | beginner | 34 hours 57 minutes | Dec 1st, 2017 | Nov 29th, 2023 | $124.99 |
ANGULAR and ASP.NET Core REST API - Real World Application | 4.59 | 9,370 | 588 | beginner | 21 hours 23 minutes | Aug 20th, 2021 | Jan 31st, 2024 | $74.99 |
Udemy, Inc. is an education technology company that provides the world's largest online learning and teaching platform.
The features of Udemy include:
- Over 155,000 course
- Instructors who are leading experts in their fields
- Affordable prices range from tens to hundreds of dollars per course, with discounts of up to 70-90% during campaigns
- Courses can be viewed without expiration after purchase, and come with a 30-day money-back guarantee
- Courses can be taken at the student's own pace, with playback speeds of 0.5 to 2 times normal speed, and can be viewed offline on a smartphone with a dedicated app
- Students can ask questions directly to the instructor on the course discussion board, allowing them to resolve any doubts and receive support for self-study
These are some of the benefits of using Udemy.
The management team at Outlecture consists of active software engineers, creators, and web designers. We often catch up on learning new programming languages and products by taking courses on Udemy.
As for our experience, we find that Udemy offers courses of very high quality. The instructors are all leading figures in their fields, and they teach cutting-edge knowledge and practical know-how in a clear and detailed manner. You can acquire the knowledge and skills that are actually used in the field and in practical projects, rather than just knowledge for exams.
We highly recommend Udemy courses, especially for those who want to apply what they learn in practical situations or for those who want to start self-studying. Once you purchase a course, you can take it without a time limit, and there is a 30-day money-back guarantee, so you can start learning with peace of mind.
Recommended for
- Planning to use Angular in actual projects
- Wanting to learn the know-how of professionals who are active in the world's cutting-edge fields
- Hesitant to use a subscription service
- Having basic IT knowledge
The details of each course are as follows:
Develop comprehensive and reactive Angular applications including NgRx, Unit Testing & Angular Material.
- Ratings
- 4.6
- Subscribers
- 10,974
- Subscribers last month
(February 2024) - 1,367
- Level
- all
- Video Duration
- 8 hours 52 minutes
- Created
- Aug 22nd, 2022
- Last updated
- Dec 15th, 2023
- Price
- $84.99
Summing up, this course allows you to learn Angular in depth, from scratch, and in only 6 days. It's the best Angular course choice for every busy developer or individual in general.
Enroll in this course now and learn how to:
Create comprehensive front-end applications using Angular
Use Angular components, modules, and services to create maintainable applications
Use the most important features of the Angular framework to build real-world applications
Communicate with web servers for posting, getting, or deleting data from within your angular application
What's inside this course:
Setting up Development Environment for Angular projects
Typescript Overview
Angular CLI
Components
Modules
Services (Injection and provider scopes)
Validation
Data Binding
Adding Packages
Routing
Template Driven Form Binding (NgModel)
Pipes
Angular Material
Building web apps with user experience (ux) in mind
In addition, you will easily apply and understand more advanced concepts like:
NgRx for building reactive web applications
State management using actions, reducers, store, effects, and selectors
Reactive extensions like observables for asynchronous tasks
Unit Testing using Karma and Jasmine
HTTP RESTful API communication
Setting up Mock servers using Mockoon
Global Error Handling
Directives
Sending Data to Child Components (Input binding)
Sending Data to Parent Components (output binding)
Smart vs Presentational Components
Component and Directive Selectors
30 Day Full Money Back Guarantee
This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, and do the exercises, and if you feel like this course is not for you, ask for a full refund within 30 days. All your money back, no questions asked.
Enroll now, take the fast lane, and master Angular in only 6 days.
- Day 1: Building an Appointment app with components and data-binding
- Defining your Angular goal
- Day 1 Topics
- Angular building blocks
- What you will build
- Source Code: Appointment App
- Building Angular applications in a web browser
- Installing Node.js and Visual Studio Code
- Important: Update Read this BEFORE you create an Angular project
- Installing the Angular CLI
- Angular 17 project creation flag
- Creating and serving an angular application
- Angular under the hood
- Components
- Creating the appointment-list component
- Introduction to typescript
- Using TypeScript in Angular
- One-way data binding with appointment property
- Creating an appointment interface
- Visual Studio Code Angular extension
- Adding two-way data binding
- Adding a button click event listener
- Adding an appointment to the array
- Adding an appointment list using ngFor
- Removing appointments
- Storing appointments in the local storage
- Using ngOnInit to load appointments from local storage
- Adding bootstrap
- Styling the application
- The most commonly used commands in Angular
- Handout Components
- Working with Angular components
- Day 1 Progress Report
- Day 2: Build a Hotel Reservation App with Services, Forms, and Routing
- Day 2 Topics
- Step-By-Step Exercise: Building a book management system
- The hotel reservation app
- Source Code: Hotel App
- Creating the hotel app project
- Project architecture hotel app
- Creating all modules, services and components
- Creating the reservation interface
- Creating routes
- Building a simple navigation
- Creating a form group
- Creating the reservation form
- Validating a form using reactive form validation
- Dynamically toggle html attributes based on form state
- Showing validation messages
- Creating the reservation service
- Injecting the reservation service into the form component
- Using the localStorage in the reservation service
- Showing all reservations in a list
- ngtemplate and local reference
- Using the router navigate method to redirect the user
- Deleting reservations
- Creating unique ids for reservations
- Adding the edit route with parameter
- Editing reservations
- Combining components from different modules
- Styling the home component
- Styling the reservation form component
- Styling the reservation list component using a table
- Modules
- Handout Modules
- Services
- Day 2 Progress Report
- Day 3: Reactive programming with Observables, HTTP and Mock APIs
- Day 3 Topics
- Modern web architecture
- What you will create during this section
- Using Mockoon as a mock backend api
- Preparing the project for the mock backend api
- Calling the mock api using the http client and observables
- Returning reservations from the mock api
- Setting up all mock api endpoints
- Finishing all CRUD operations with observable implementation
- Handout Observables
- Day 3 Progress Report
- Day 4: Building an ecommerce web application with Angular Material and more
- Day 4 Topics
- Project overview
- Important: Project Materials
- Switching to a new angular version
- Creating the product module, service and component
- Creting the product class and clearing the template
- Setting the product route
- Setting up the mockoon api
- Creating environments
- Getting products from our product service
- Product list displaying products
- Serving for environments
- Installing angular material and exploring cards
- Creting mat-cards for products
- Applying the angular material style and product images
- Responsive product grid
- Adding an eye-catching hover effect
- Adding a container css class
- Adding a navbar
- Adding a description
- Creating the cart module, component and service
- Setting up the cart service methods
- Getting all cart items
- Using mat-list for cart items
- Calculating the total cart price
- Adding the clear cart and checkout button
- Exercise: Adding the checkout logic
- Adding products to cart and popup
- Adding the search functionality Part 1
- Adding the search functionality Part 2
- Adding the sort functionality
- Day 4 Progress Report
- Day 5: NgRx - Building reactive web applications with Angular
- Day 5 Topics
- The problem NgRx can solve
- NgRx explained
- Angular 17 update hint
- Creating a project for our reactive application
- Creating the application state
- Creating actions for adding and deleting books
- Creating the book reducer part 1: Creating a reducer
- Creating the book reducer part 2: Change functions
- Creating the store
- Creating a component and methods to dispatch our actions
- Loading books from the store
- Using the AppState interface for type safety
- Creating the UI to see our reactive application in action
- NgRx Basics
- NgRx effects recap
- Creating success and failure actions
- Adjusting the reducer for effects
- Creating the service for the effect
- Creating the effect part 1
- Creating the effect part 2
- Registering the effect and using Angular Dev Tools to test the application
- Day 5 Progress Report
- Day 6: Unit Testing Angular applications with Karma and Jasmine
- Day 6 Topics
- Unit Testing in Angular
- Creating our first unit test
- Running unit tests using Karma
- Creating a service to test
- Unit testing the service
- Creating a component to test
- Component fixture for unit testing
- Handling dependencies for component tests
- Testing a component property that loads from ngOnInit
- Testing a components UI functionality
- Day 6 Progress Report
- Additional Angular Exercises
- Download Exercise Sheet
- Exclusive Angular Skills
Master Angular (formerly "Angular 2") and build awesome, reactive web apps with the successor of Angular.js
- Ratings
- 4.61
- Subscribers
- 742,826
- Subscribers last month
(February 2024) - 6,508
- Level
- all
- Video Duration
- 36 hours 14 minutes
- Created
- Feb 8th, 2016
- Last updated
- Jan 22nd, 2024
- Price
- $109.99
Join the most comprehensive and bestselling Angular course on Udemy and learn all about this amazing framework from the ground up, in great depth!
This course starts from scratch, you neither need to know Angular 1 nor Angular 2!
From Setup to Deployment, this course covers it all! You'll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular App with Modules and Offline Compilation and much more - and in the end: You'll learn how to deploy an application!
But that's not all! This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course!
And if you do get stuck, you benefit from an extremely fast and friendly support - both via direct messaging or discussion. You have my word! ;-)
Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away.
Hear what my students have to say
"Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! - Paul Whitehouse"
"The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he's doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!"
"As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand."
This Course uses TypeScript
TypeScript is the main language used by the official Angular team and the language you'll mostly see in Angular tutorials. It's a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.
TypeScript knowledge is, however, not required - basic JavaScript knowledge is enough.
Why Angular?
Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications.
Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.
Due to the drastic differences between Angular 1 and Angular (= Angular 2+) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular.
Get a very deep understanding of how to create Angular applications
This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.
Specifically you will learn:
Which architecture Angular uses
How to use TypeScript to write Angular applications
All about directives and components, including the creation of custom directives/ components
How databinding works
All about routing and handling navigation
What pipes are and how to use them
How to send HTTP requests (e.g. to REST APIs)
What dependency injection is and how to use it
How to use modules in Angular
How to optimize your (bigger) Angular applications
An introduction to NgRx and complex state management
We will build a major project in this course so that you can practice all concepts
And so much more!
Pay once, benefit a lifetime!
Don’t lose any time, gain an edge and start developing now!
- Getting Started
- Course Introduction
- What is Angular?
- Join our Online Learning Community
- Angular vs Angular 2 vs Latest Angular Version
- CLI Deep Dive & Troubleshooting
- Project Setup and First App
- Editing the First App
- The Course Structure
- How to get the Most out of the Course
- What is TypeScript?
- Optional: TypeScript Quick Introduction
- A Basic Project Setup using Bootstrap for Styling
- About the Course Code / Code Snapshots
- The Basics
- Module Introduction
- How an Angular App gets Loaded and Started
- Components are Important!
- Creating a New Component
- Understanding the Role of AppModule and Component Declaration
- Working with Standalone Components
- Using Custom Components
- Creating Components with the CLI & Nesting Components
- Working with Component Templates
- Working with Component Styles
- Fully Understanding the Component Selector
- Practicing Components
- [OPTIONAL] Assignment Solution
- What is Databinding?
- String Interpolation
- Property Binding
- Property Binding vs String Interpolation
- Event Binding
- Bindable Properties and Events
- Passing and Using Data with Event Binding
- Important: FormsModule is Required for Two-Way-Binding!
- Two-Way-Databinding
- Combining all Forms of Databinding
- Practicing Databinding
- [OPTIONAL] Assignment Solution
- Understanding Directives
- Using ngIf to Output Data Conditionally
- Enhancing ngIf with an Else Condition
- Angular 17: Alternative "if" Syntax
- Styling Elements Dynamically with ngStyle
- Applying CSS Classes Dynamically with ngClass
- Outputting Lists with ngFor
- Angular 17: Alternative "for" Syntax
- Practicing Directives
- [OPTIONAL] Assignment Solution
- Getting the Index when using ngFor
- Course Project - The Basics
- Project Introduction
- Planning the App
- Creating a New App Correctly
- Setting up the Application
- Creating the Components
- Using the Components
- Adding a Navigation Bar
- Alternative Non-Collapsable Navigation Bar
- Creating a "Recipe" Model
- Adding Content to the Recipes Components
- Outputting a List of Recipes with ngFor
- Displaying Recipe Details
- Working on the ShoppingListComponent
- Creating an "Ingredient" Model
- Creating and Outputting the Shopping List
- Adding a Shopping List Edit Section
- Wrap Up & Next Steps
- Debugging
- Understanding Angular Error Messages
- Debugging Code in the Browser Using Sourcemaps
- Components & Databinding Deep Dive
- Module Introduction
- Splitting Apps into Components
- Property & Event Binding Overview
- Binding to Custom Properties
- Assigning an Alias to Custom Properties
- Binding to Custom Events
- Assigning an Alias to Custom Events
- Custom Property and Event Binding Summary
- Understanding View Encapsulation
- More on View Encapsulation
- Using Local References in Templates
- @ViewChild() in Angular 8+
- Getting Access to the Template & DOM with @ViewChild
- Projecting Content into Components with ng-content
- Understanding the Component Lifecycle
- Seeing Lifecycle Hooks in Action
- Lifecycle Hooks and Template Access
- @ContentChild() in Angular 8+
- Getting Access to ng-content with @ContentChild
- Wrap Up
- Practicing Property & Event Binding and View Encapsulation
- [OPTIONAL] Assignment Solution
- Course Project - Components & Databinding
- Introduction
- Adding Navigation with Event Binding and ngIf
- Passing Recipe Data with Property Binding
- Passing Data with Event and Property Binding (Combined)
- Make sure you have FormsModule added!
- Allowing the User to Add Ingredients to the Shopping List
- Directives Deep Dive
- Module Introduction
- ngFor and ngIf Recap
- ngClass and ngStyle Recap
- Creating a Basic Attribute Directive
- Using the Renderer to build a Better Attribute Directive
- More about the Renderer
- Using HostListener to Listen to Host Events
- Using HostBinding to Bind to Host Properties
- Binding to Directive Properties
- What Happens behind the Scenes on Structural Directives
- Building a Structural Directive
- Understanding ngSwitch
- Course Project - Directives
- Building and Using a Dropdown Directive
- Closing the Dropdown From Anywhere
- Using Services & Dependency Injection
- Module Introduction
- Why would you Need Services?
- Creating a Logging Service
- Injecting the Logging Service into Components
- Alternative Injection Syntax
- Creating a Data Service
- Understanding the Hierarchical Injector
- How many Instances of Service Should It Be?
- Injecting Services into Services
- Using Services for Cross-Component Communication
- A Different Way Of Injecting Services
- Practicing Services
- [OPTIONAL] Assignment Solution
- Course Project - Services & Dependency Injection
- Introduction
- Setting up the Services
- Managing Recipes in a Recipe Service
- Using a Service for Cross-Component Communication
- Adding the Shopping List Service
- Using Services for Pushing Data from A to B
- Adding Ingredients to Recipes
- Passing Ingredients from Recipes to the Shopping List (via a Service)
- Changing Pages with Routing
- Module Introduction
- Why do we need a Router?
- Understanding the Example Project
- Setting up and Loading Routes
- Navigating with Router Links
- Understanding Navigation Paths
- Styling Active Router Links
- Navigating Programmatically
- Using Relative Paths in Programmatic Navigation
- Passing Parameters to Routes
- Fetching Route Parameters
- Fetching Route Parameters Reactively
- An Important Note about Route Observables
- Passing Query Parameters and Fragments
- Retrieving Query Parameters and Fragments
- Practicing and some Common Gotchas
- Setting up Child (Nested) Routes
- Using Query Parameters - Practice
- Configuring the Handling of Query Parameters
- Redirecting and Wildcard Routes
- Important: Redirection Path Matching
- Outsourcing the Route Configuration
- An Introduction to Guards
- Protecting Routes with canActivate
- Protecting Child (Nested) Routes with canActivateChild
- Using a Fake Auth Service
- Controlling Navigation with canDeactivate
- Passing Static Data to a Route
- Resolving Dynamic Data with the resolve Guard
- Understanding Location Strategies
- Wrap Up
- Course Project - Routing
- Planning the General Structure
- Setting Up Routes
- Adding Navigation to the App
- Marking Active Routes
- Fixing Page Reload Issues
- Child Routes: Challenge
- Adding Child Routing Together
- Configuring Route Parameters
- Passing Dynamic Parameters to Links
- Styling Active Recipe Items
- Adding Editing Routes
- Retrieving Route Parameters
- Programmatic Navigation to the Edit Page
- One Note about Route Observables
- Project Cleanup
- Understanding Observables
- Module Introduction
- Install RxJS
- Analyzing Angular Observables
- Getting Closer to the Core of Observables
- Building a Custom Observable
- Errors & Completion
- Observables & You!
- Understanding Operators
- Subjects
- Wrap Up
Updated to Angular 17 (Signals, defer, @if @for): Learn all the Advanced Features of the Angular Core and Common modules
- Ratings
- 4.54
- Subscribers
- 33,103
- Subscribers last month
(February 2024) - 1,377
- Level
- all
- Video Duration
- 12 hours 5 minutes
- Created
- Aug 30th, 2018
- Last updated
- Feb 1st, 2024
- Price
- $74.99
This course will give you a solid foundation on the Angular platform by giving you with an in-depth guide tour of all the advanced features available in the Angular Core and Common modules.
These are the baseline modules from which all other modules in the Angular ecosystem are built with, so this is the part of Angular that you want to learn first, and in as much detail as possible.
In this course, you will get an exhaustive guided tour of all the basic and also the advanced functionality available in these two Angular essential modules (including Angular Elements).
This guide will cover everything from the most commonly used features of Angular, up until the most advanced topics of Angular Core, such as the multiple modes of change detection, style isolation, dependency injection, content projection, internationalization, standalone components and more.
The course starts from the beginning, assuming no prior knowledge of Angular. Each concept is introduced based only on previous concepts, so there are no forward references to help with the learning process.
Even though the course starts with the essential concepts of Angular, it will quickly evolve into intermediate to advanced topics. So no matter what your current Angular level is, there is something for everyone in this course!
To help you make the most out of the standalone components feature, you have available a full section on how to migrate an existing application to standalone components, and completely remove NgModules from your application.
Course Overview
This course will start with a quick and practical introduction to the Angular framework. You are going to set up your development environment, and using the Angular CLI you will quickly scaffold a small Angular project from scratch.
Using this initial playground, we are then going to answer some of the most common Angular questions: Why Angular, what are its main advantages and key features? We will answer this by demonstrating how the change detection mechanism works, and introduce some of the Angular template syntax.
We will then cover one by one all the features of the Angular Core and Common modules, which include:
Custom components with @Component
Components @Input and @Output, event Emitters
Control flow syntax: @if, @for, @switch
ngFor
ngIf
ngClass
ngStyle
ngSwitch
@defer - Partial template loading
Observables
Built-In Pipes
Async Pipe
Custom Pipes
@Injectable and Custom Services
Lifecycle Hooks (ngOnInit, ngOnDestroy, etc.)
HTTP Client - GET POST PUT DELETE
@ViewChild and AfterViewInit
@ViewChildren
ng-content and Component Projection
@ContentChild and AfterContentInit
@ContentChildren
ng-template & ng-container
ngTemplateOutlet
AfterContentChecked and AfterViewChecked
ngDoCheck
Normal Change Detection
@Attribute
OnPush Change Detection
Custom Change Detection
View Encapsulation modes
@Directive
@Host
@HostListener
@HostBinding
Structural Directives
@Inject
@Optional
@Self
@SkipSelf
Hierarchical Injector
Custom Pipe
@NgModule
host, host-context, etc.
@NgPlural and other i18n features
Angular Elements
Angular Standalone Components
Angular Signals
What Will You Learn In this Course?
This course will give you advanced practical knowledge of the Angular framework. After taking this course you will feel very comfortable building Angular Applications, as you will have a detailed understanding of everything that is made available by the Angular framework core modules.
- Introduction
- Angular Core Deep Dive - Helicopter View
- IMPORTANT - Recommended Software Versions
- Course Kickoff - Development Environment Setup
- The Typescript Jumpstart Ebook
- Introduction To Angular - Custom HTML Elements, Model vs View
- Why Angular? Learn the Key Features of Angular Core
- Angular Components, Core Directives and Pipes
- New Section - Angular Components and Core Directives
- Building our First Angular Component
- Component Inputs and the @Input Decorator
- Angular Component @Output - Custom Events and Event Emitters
- Angular 17 Control Flow Syntax
- The Angular 17 @for syntax
- Angular @for @empty, $index and other extra options
- Understanding Angular 17 @for tracking functions
- What's Next - The ngFor Directive
- The Angular ngFor Core Directive
- Angular 17 - Comparison between @for and ngFor
- Angular 17 - @if Section Introduction
- The Angular 17 @if else syntax
- What's Next - The ngIf Directive
- Angular ngIf Directive and the Elvis Operator
- Angular 17 - Comparison between @if vs ngIf
- Angular ngClass Core Directive - Learn All Features
- Angular ngStyle Core Directive - When to use it and Why
- Angular 17 @switch Section Introduction
- The Angular 17 @switch syntax in action
- Angular ngSwitch Core Directive In Detail
- Angular ng-container Core Directive - When to use it?
- Angular Built-In Pipes - Complete Catalog
- Angular Local Template Querying In Depth
- Angular View Child Decorator - How Does it Work?
- View Child - Learn the multiple View Query Configuration Options
- The AfterViewInit Lifecycle Hook - How deep can we query with View Child?
- The View Children Decorator and Query List In Detail
- Angular Content Projection In Depth
- Angular Content Projection with ng-content In Detail
- Angular Content Child Decorator - In-Depth Explanation
- Angular Content Children and the AfterContentInit Lyfecycle Hook
- Angular Templates In Depth
- Angular Templates Introduction with ng-template
- Angular Template Instantiation with ngTemplateOutlet
- Angular Templates as Component Inputs
- Angular Directives In Depth
- Introduction to Angular Attribute Directives
- Angular Host Binding in Detail - DOM Properties vs Attributes
- Angular Host Listener - Handling Events in Directives
- Angular Directive Export As syntax - When to Use it and Why
- Angular Structural Directives - Understanding the Star Syntax
- Angular Structural Directives - Step-by-Step Implementation
- Angular View Encapsulation In Depth
- Angular View Encapsulation - Under the Hood
- Angular View Encapsulation - the Host Selector
- Bypassing View Encapsulation with the ng-deep modifier
- The Host Context Selector - Theming Use Case
- Angular View Encapsulation - Default vs Shadow DOM
- Angular Injectable Services In Depth
- Angular Injectable Services - New Section Introduction
- The Angular HTTP Client - GET calls with Request Parameters
- The Async Pipe - a Better way of passing Observable data to the View
- Angular Custom Services - The Injectable Decorator
- Angular Custom Service - Fetching Data
- Angular Custom Service - Data Modification with an HTTP PUT
- Angular Dependency Injection In Depth
- Introduction to the Angular Dependency Injection System
- Angular DI - Understanding Providers and Injection Tokens
- Angular DI - Understanding Simplified Provider Configuration
- Understanding Hierarchical Dependency Injection
- Understanding Angular Tree-Shakeable Providers
- Angular DI - Injection Tokens In Detail
- Angular DI Decorators - Optional, Self, SkipSelf
- Angular DI Host Decorator and Section Conclusion
- Angular Change Detection In Depth
- Angular Default Change Detection - How does it Work?
- Angular OnPush Change Detection - How does it Work?
- OnPush Change Detection and Observables Data Streams
- Angular Attribute Decorator - When to use it?
- Angular Custom Change Detection with ChangeDetectorRef
- Angular Lifecycle Hooks In Depth
- Angular Lifecycle Hooks - OnInit and OnDestroy In Detail
- Angular OnChanges Lifecycle Hook
- Angular AfterContentChecked Lifecycle Hook - Use Cases and Pitfalls
- Angular AfterViewChecked Lifecycle Hook - Use Cases and Pitfalls
- Angular Lifecycle Hooks - Complete Overview
- Angular Modules in Depth
- Introduction to Angular Modules
- Angular Feature Modules In Detail
- Angular Pipes In Depth
- Angular Custom Pipes - Step-by-Step Implementation
- Angular Impure Pipes In Detail
- Angular Internationalization (i18n) In Depth
- Introduction to Angular Internationalization (i18n)
- Understanding Angular i18n Unique Identifiers
- Angular i18n Pluralization Support
- Angular i18n Alternative Expressions Support
- Running a Translated Angular Application using the Angular CLI
- Angular Elements In Depth
- Angular Elements In Detail
- Angular Standalone Components In Depth
- Angular Standalone Components - New Section
- Migrating To Standalone Components Step 1 - Importing Dependencies
- Migrating To Standalone Components Step 2 - Removing Unused Modules
- Migrating To Standalone Components Step 3 - Refactor Application Bootstrapping
- Angular 17 @defer - Partial Template Loading
- Angular 17 @defer Section Introduction
- Angular 17 @defer - How Does It Work?
- Angular 17 @defer with @placeholder
- Angular 17 @defer with @loading
- Angular 17 @defer trigger (idle and immediate triggers)
- Angular 17 @defer timer trigger - Understanding prefetch triggers
- Angular 17 @defer @error block
- Angular 17 @defer - The viewport built-in trigger
- Angular 17 @defer - The built-in interaction trigger
- Angular 17 @defer- the built-in on hover trigger
- Angular 17 @defer Custom Triggers
- Angular 17 Signals In Depth
- Angular 17 Signals - Section Introduction
- Introduction to Angular 17 Signals - Writing our first Signal
- The Angular 17 Signal update() API and Read Only Signals
- Angular Signals with Objects and Arrays - Avoid mutating signal values directly
- Angular 17 derived signals with the compute() API
- Understanding how dependencies between signals are created
- The Angular 17 Signal effect() API
- Angular 17 - Cleaning up Signal Effects manually
- Angular 17 Signal-based Data Services
- Introduction To Angular Input Signals - How Do They Compare With @Input?
- How To Use Signal Inputs To Avoid The OnChanges Lifecycle Hook
- Signal Input Options required, alias, transform functions
- Conclusion & Bonus
- Bonus Lecture
- Angular Core Deep Dive - Course Conclusion and Key Takeaways
A practical example of how to build an application with ASP.NET Core API and Angular from start to finish
- Ratings
- 4.65
- Subscribers
- 103,395
- Subscribers last month
(February 2024) - 915
- Level
- beginner
- Video Duration
- 34 hours 57 minutes
- Created
- Dec 1st, 2017
- Last updated
- Nov 29th, 2023
- Price
- $124.99
This course has been refreshed and completely updated for .Net 7.0 and Angular 14.
Have you learnt the basics of ASP.NET Core and Angular? Not sure where to go next? This course should be able to help with that. In this course we start from nothing and incrementally build up our API and Angular front end until we have a fully functional Web Application that we then publish to IIS and a Linux server.
These are 2 of the hottest frameworks right now for the 'back-end' (Microsoft's ASP.NET Core) and the 'front-end' (Google's Angular) and are well worth spending the time to learn.
In this course we build a complete application from start to finish and every line of code is demonstrated and explained.
This course is right up to date as at November 2022 using .Net 7.0 and Angular v14 and as these frameworks evolve, this course will evolve with it.
Read some of the great reviews of the course:
Jim says "The absolute best course for building an API in .Net core and working with Angular!"
Daniyal says: "This is a complete project based course from start to finish with real world experience using technologies that are currently in demand in the market. People interested in learning latest technologies should consider this course."
Here are some of the things you will learn about in this course:
Setting up the developer environment
Creating the ASP.NET Core WebAPI and the Angular app using the DotNet CLI and the Angular CLI
Adding a Client side login and register function to our Angular application
Adding 3rd party components to add some pizzazz to the app
Adding routing to the Angular application and securing routes.
Using Automapper in ASP.NET Core
Building a great looking UI using Bootstrap
Adding Photo Upload functionality as well as a cool looking gallery in Angular
Angular Template forms and Reactive forms and validation
Paging, Sorting and Filtering
Adding a Private Messaging system to the app
Publishing the application to Heroku free of charge
Using SignalR for real time presence and live messaging between users
Many more things as well
Tools you need for this course
In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor. You can of course use any code editor you like and any Operating system you like... as long as it's Windows, Linux or Mac
Is this course for you?
This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.
On this course we will build an example Dating Application, completely from scratch using the DotNet CLI and the Angular CLI to help us get started. All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using ASP.NET Core and Angular.
- Introduction
- Introduction to the course
- Setting up the developer environment
- Getting help
- Course assets and source code
- Building a walking skeleton Part One - API
- Introduction
- Creating the .Net API Project using the dotnet CLI
- Setting up VS code to work with C#
- VS Code tips and troubleshooting
- Getting to know the API project files
- Creating our first Entity
- Introduction to Entity Framework
- Adding Entity Framework to our project
- Adding a DbContext class
- Creating the Connection string
- Creating the database using Entity Framework Code first migrations
- Adding a new API Controller
- Making our code Asynchronous
- Saving our code into Source control
- Section 2 Summary
- Building a walking skeleton Part Two - Angular
- Introduction
- Creating the Angular application
- Running the angular project and reviewing the bootstrap of the app
- Adding VS Code extensions to work with Angular
- Making HTTP requests in Angular
- Adding CORS support in the API
- Displaying the fetched users in the browser
- Adding bootstrap and font-awesome
- Adding HTTPS to Angular using mkcert
- Saving into source control
- Section 3 summary
- Authentication basics
- Introduction
- Safe storage of passwords
- Updating the user entity
- Creating a base API controller
- Creating an Account Controller with a register endpoint
- Using the debugger
- Using DTOs
- Adding validation
- Adding a login endpoint
- JSON web tokens
- Adding a token service
- Adding the create token logic
- Creating a User DTO and returning the token
- Adding the authentication middleware
- Adding extension methods
- Section 4 summary
- Client login and register
- Introduction
- Creating a nav bar
- Introduction to Angular template forms
- Introduction to Angular services
- Injecting services into components
- Using conditionals to show and remove content
- Using the angular bootstrap components - dropdown
- Introduction to observables
- Persisting the login
- Using the async pipe
- Adding a home page
- Adding a register form
- Parent to child communication
- Child to parent communication
- Hooking up the register method to the service
- Section 5 summary
- Routing in Angular
- Introduction
- Creating some more components
- Adding the nav links
- Routing in code
- Adding a toast service for notifications
- Adding an Angular route guard
- Adding a dummy route
- Adding a new theme
- Tidying up the app module by using a shared module
- Section 6 summary
- Error handling
- Introduction
- Creating an error controller for testing errors
- Handling server errors
- Exception handling middleware
- Testing errors in the client
- Adding an error interceptor
- Validation errors
- Handling not found
- Adding a server error page
- Section 7 summary
- Extending the API
- Introduction
- Extending the user entity
- Adding a DateTime extension to calculate age
- Entity Framework relationships
- Generating seed data
- Seeding data part one
- Seeding data part two
- The repository pattern
- Creating a repository
- Updating the users controller
- Adding a DTO for Members
- Adding AutoMapper
- Using AutoMapper
- Configuring AutoMapper
- Using AutoMapper queryable extensions
- Section 8 summary
- Building the User Interface
- Introduction
- Using TypeScript
- Creating the member interface
- Adding a member service
- Retrieving the list of members
- Creating member cards
- Adding some style to the cards
- Adding animated buttons
- Using an interceptor to send the token
- Routing to the detailed page
- Styling the member detailed page
- Styling the member detailed page part two
- Adding a photo gallery (Angular 16+)
- Section 9 summary
- Updating resources
- Introduction
- Creating a member edit component
- Creating the edit template form
- Adding the update functionality
- Adding a Can Deactivate route guard
- Persisting the changes in the API
- Updating the user in the client app
- Adding loading indicators
- Using the service to store state
- Section 10 summary
- Adding photo upload functionality
- Introduction
- Cloudinary Account
- Configuring cloudinary in the API
- Adding a photo service
- Updating the users controller
- Testing the photo upload
- Using the Created At Route method
- Adding a photo editor component
- Adding a photo uploader
- Adding a photo uploader part two
- Setting the main photo in the API
- Adding the main photo image to the nav bar
- Setting the main photo in the client
- Deleting photos - API
- Deleting photos - Client
- Section 11 summary
- Reactive forms
- Introduction
- Reactive forms introduction
- Client side validation
- Adding custom validators
- Validation feedback
- Creating a reusable text input
- Using the form builder service
- Expanding the register form
- Adding a reusable date input
- Updating the API register method
- Client side registration
- Section 12 summary
- Paging, Sorting and Filtering
- Introduction
- Adding a paged list class
- Adding helper classes for pagination
- Using the pagination classes
- Setting up client pagination
- Using the angular bootstrap pagination component
- Adding filtering to the API
- Adding additional filters
- Cleaning up the member service
- Adding filter buttons to the client
- Adding sorting functionality
- Adding an action filter
- Making the Last Active action filter more optimal
- Sorting on the client
- Formatting dates
- Restoring the caching for members
- Restoring caching for member detailed
- Remembering the filters for a user in the service
- Section 13 summary
- Adding the Like User feature
- Introduction
- Adding a likes entity
- Adding a likes repository
- Implementing the likes repository
- Controller methods for the likes feature
- Setting up the likes functions in the Angular app
- Adding the likes component
- Adding pagination for the likes
- Paginating the likes on the client
- Section 14 summary
- Adding the messaging feature
- Introduction
- Setting up the entities for messaging
- Setting up the message repository
- Setting up the automapper profiles
- Adding a message controller
- Getting the messages from the Repo
Create Full Stack Web Applications with Angular, ASP.NET Core Web API, Entity Framework Core, C# REST API, JWT Token
- Ratings
- 4.59
- Subscribers
- 9,370
- Subscribers last month
(February 2024) - 588
- Level
- beginner
- Video Duration
- 21 hours 23 minutes
- Created
- Aug 20th, 2021
- Last updated
- Jan 31st, 2024
- Price
- $74.99
*****
This course has been re-recorded from scratch to the latest versions of Angular and ASP.NET Core
*****
A Comprehensive Course on Angular and ASP.NET Core Web API where you will learn and master your Angular and ASP.NET Core skills and be excellent at making full stack web applications using the Angular and ASP.NET Core Web APIs.
In this course, we will use Angular 16 to create our Single Page Web Application and we will use C# and .NET 7 to develop a REST API using ASPNET Core.
Why do you need this course?
Full-Stack web development is in great demand and what better technologies to choose from? We have the best technologies Angular and ASP.NET Core from Google and Microsoft. These are great technologies that pair really well and are adopted by big tech giants across the world.
This course helps you understand full-stack web development using Angular and ASP.NET Core Web APIs as you have never thought of.
Concentrating on the practical aspect of web development, You will learn and master ASP.NET Core Web API and Angular Web development skills and with the help of this course and the knowledge you will acquire in this course, you will be able to implement that in your projects and your organization as well.
Know me more
I am Sameer, a professional software developer with over 15 years of industry experience. I love to educate myself and others and that's why I started with my youtube channel where I have a loving audience. I create content for software developers like you so that I can share my knowledge.
Money Back Guarantee
I Guarantee you that after finishing this course, you will be confident enough to create web applications using Angular and ASP.NET Core Web API on your own.
You will feel confident at work or creating your own projects.
If you want to create functional, generic, clean, and usable websites using Angular and clean scalable web apis using dotnet core, then this is the course for you.
If still, you are unable to get benefit from this course (we will be sad to see you go!), there is a "30-day money back guaranteed by Udemy".
In this course, you will learn and implement:
Learn And Create Your First Angular single page application (SPA)
Learn and Create your first ASP.NET Core Web API using RESTful principles in C#
Create a fully functional, highly scalable blog application
In Angular you will learn and develop:
Angular CLI
Angular Components
Angular Routing
Angular Services
HTTP calls
CORS
Use Bootstrap CSS in Angular applications
Create reusable components
CRUD operations (Create Read Update Delete)
Angular Forms
Live Markdown Preview
Markdown to HTML
Angular Form Elements
Authentication and Authorization
JWT Tokens and Storage
Cookie Services
Local Storage
Interceptors
Auth/Route Guards
Image Upload in Angular applications
Models and Interfaces
In our ASP.NET Core Web API, you will learn and develop:
Create ASPNET Core APIs from scratch using C#
Create endpoints and action methods
CRUD operations in ASP.NET Core (Create Read Update Delete)
Install and Use Entity Framework Core to connect to SQL Server database
Understand and implement Entity framework core relationships
Domain-Driven Design Patterns (DDD)
Repository Pattern in ASP.NET Core
Domain Modelling
Entity Framework Code First Approach
SQL Server
Seeding the Database
HTTP Web Methods
Authentication and Authorization
JWT Tokens
Role Based Authorization
Image Upload in ASP.NET Core Web API
Write Clean, Re-Usable Code
- Introduction and Development Setup
- Introduction To The Course
- Prerequisites
- Setting Up Development Environment
- Install .NET SDK and .NET Runtime
- Download and Install Visual Studio 2022
- Download and Install SQL Server (Local Instance) and SQL Server Management Stu
- Install Visual Studio Code
- Visual Studio Code Extensions
- Download and Install NodeJs
- Install Angular CLI
- Getting Help
- Application Source Code
- *****OLD CONTENT ***** Source Code and GITHUB Repository - Complete Source Code
- Building API using ASP.NET Core and Visual Studio
- Create New Web API
- Understand Files and Folder Structure - ASPNET Web API
- Understand REST and HTTP Verbs
- Routing In ASP.NET Core Web API
- Understand Our Project and Domain Models
- Create Domain Models
- Install Nuget Packages For Entity Framework Core
- Create DbContext Class
- Adding ConnectionString To The Database In Appsettings.Json
- Understanding Dependency Injection & Injecting DbContext Into Our Application
- Run EF Core Migrations
- Create New Controller (CategoriesController)
- DTOs and Domain Models
- Create POST Categories Action Method
- Repository Pattern and Benefits
- Change POST Category Action Method To Use Repository
- Create UI Application Using Angular CLI
- Create Angular Project
- Understand Files and Folders
- Clean Angular Project And Import Bootstrap CDN
- Create Navbar Component
- Create Categories List Component and Angular Routing
- Create Add Category Component and Routing
- Create Angular Services
- Enable CORS
- Unsubscribe from Observables
- Get All Categories - API and UI
- What's in this section
- Create API GET method to GET all categories, and TEST
- Create UI Service method to GET all categories
- Create Environment Files
- Use Get All Categories Service In Component
- Using Async Pipe To Subscribe to Observables
- EDIT/UPDATE Category By Id - API and UI
- What's in this section
- API - Create GET API method to get category by Id and Test
- UI - Create UI component Edit-Category Component and pass route parameters
- UI - Create Service Method and Display Single Category
- API - Update Category Action Method (HTTPPUT)
- UI - Create Update Category Service Method and Connect to Edit Category Componen
- DELETE Category By Id - API and UI
- What's in this section
- API - Delete Category By Id (HTTP DELETE)
- UI - Delete Category Service Method
- Add New BlogPost (Feature) - API and UI
- What's in this section
- UI - Create BlogPost List Component and Routing
- UI - Create BlogPost Add Component and Routing
- UI - Submit Add BlogPost Form
- API - Add Blog Post Functionality (HTTP POST)
- UI - Create BlogPost Service
- UI - Form Submission To Create BlogPost
- Get All BlogPosts - API and UI
- What's in this section
- Seeding Some Blogs
- API - Get All BlogPosts (HTTP GET)
- UI - Get All BlogPosts
- Live Markdown Preview & Image Preview
- What's in this section
- UI - Live Markdown Preview
- UI - Image Preview
- Relationships in Entity Framework Core (Categories and BlogPosts)
- What's in this section
- API - Change Domain Models and Add EF Core Relationships
- API - Change AddBlogPost Action Method - Accept Categories
- API - Change GetAll BlogPosts Action Method - Return Categories
- UI - Display Categories In BlogPost List Component
- UI - Display Categories MultiSelect Dropdown and Capture Categories
- UI - Submit Categories - Add BlogPost
- EDIT/UPDATE BlogPosts - API and UI
- What's in this section
- API - GET BlogPost By Id Action Method
- UI - Edit BlogPost Component
- UI - Fetch and Display BlogPost Data in Edit Component
- UI - Show Categories and Selected Categories
- API -Update BlogPost (HTTP PUT)
- UI - Submit Form To Update BlogPost and Categories
- DELETE BlogPosts By Id - API and UI
- What's in this section
- API - Delete BlogPost Action Method
- UI - Delete BlogPost
- Image Upload in ASP.NET Core and Angular
- Introduction - Image Upload
- UI - Create Image Component
- UI - Image Selector As Modal Popup
- API - Image Functionality Domain Model Changes
- API - Upload Image Controller and Action Method
- API - Image Repository
- API - Serve Static Images From API
- UI - Create Image Service and Upload Image Form
- API - Get All Images
- UI - Fetch All Images and Display
- UI - Select Image From Image-Selector
- UI - Image Selector In Add-BlogPost Component
- Public pages for our blog - API and UI
- What's in this section
- UI - Create Home Component
- UI - Create BlogDetails Component
- API - GET BlogDetails by URL
- UI - Display BlogDetails By URL
- Authentication and Authorization -Using JWT Token - API and UI
- What's in this section
- Authentication Flow
- API - Setting Up Authentication - Install Nuget Packages
- API- Create DbContext, Seed Roles, Seed Default User
- API - Inject DbContext and Authentication Changes
- API - Testing Authorize Attribute
- API - Create Auth Controller and Register Action Method
- API - Create Identity Tables - Run EF Core Migrations
- API - Login Action Method
- API - Create JWT Token
- API - Role Based Authorization
- API - Change Action Methods
- UI - Introduction to changes
- UI - Login Component and Navbar Changes
- UI - Create Auth Service
- UI - Store JWT Token
- UI - Auth Service and Navbar Changes
- UI - Implement Logout
- UI - Hide Admin Menu
- UI - Pass JWT Token With API Calls
- UI - Interceptors and Passing Auth Header Using Interceptor
- UI - Auth Guard and Implementation
- BONUS Section
- BONUS Lecture
- *****OLD CONTENT ***** Building APIs using ASP.NET CORE
- Introduction
- Adding our application to Git
- Creating a ASP.NET Core API using Visual Studio
- Understanding and building the Models
- Adding Entity Framework Core (EF Core)
- Creating the DbContext
- Adding Connection to the database
- Configuring DbContext and using Dependency Injection from Startup.cs
- Create database using EF Core migrations
- Seeding the database
- Creating student repository - Repository pattern
- Creating the Students API Controller
- Run the API and test using Swagger UI
- Domain Models and Data Models
- Adding Navigation Properties Address and Gender
- Install and Use Automapper
- Making Our Code Asynchronous
- Saving your changes to Git
- *****OLD CONTENT ***** Creating the UI application using Angular
- Introduction to the Angular Application
- Prerequisites to create an Angular App
- Cloning UI Repository From GIT
- Creating Angular application using angular CLI
- Adding visual studio code extensions
- Install Angular Material UI Library
- Reference Angular Material Components in app.module
- Install FlexBoxGrid Library
- Clean UI Solution
- Creating Top Navigation Component
- Creating Students List Component
- Creating a Route
- Creating The Student Service
- Adding CORS support in the API
- Creating UI Models
- Displaying Fetched Students
- Implementing Pagination on the Table
- Implementing Sorting on the Table
- Implementing Filtering on the Table
- Saving your changes to Git
- Summary
- *****OLD CONTENT Retrieving and Displaying Single Student Details (READ in CRUD)
- Introduction
- Creating a New Controller Method
- Testing the new method using Swagger UI
- Create New Component in the Angular UI Application
- Creating Route for View Student Component
- Fetching Data Of Single Student From API into UI
- Defining Link Between Students Table and View Student in UI
- Creating and Implementing Design For View Student
- Binding Student Data From API to UI
- Saving your changes to GIT
- *****OLD CONTENT ***** Updating an Existing Student - (UPDATE in CRUD)
- Introduction
- Creating GET method for Gender Controller
- Display Gender List In Dropdown
- Create New API Method - UPDATE Student
- Create Update Functionality in UI
- Show Notifications On Update
- Saving your changes to GIT
3. Top 3 Recommended YouTube Videos
Here are Outlecture's top 3 recommended YouTube videos, carefully selected for you.
Title | View count | View count last month (February 2024) | Like count | Publish date |
---|---|---|---|---|
Angular for Beginners Course [Full Front End Tutorial with TypeScript] Channel: freeCodeCamp.org | 1,215,711 | 49,559 | 18,852 | Sep 7th, 2022 |
Angular Full Course - Complete Zero to Hero Angular full Tutorial Channel: OctAcademy | 459,595 | 21,694 | 8,512 | Nov 29th, 2022 |
Learn Angular A-Z: Complete Tutorial for Beginners Channel: Envato Tuts+ | 81,830 | 14,650 | 2,105 | Aug 30th, 2023 |
YouTube has become a familiar platform for everyday use, where viewers can watch videos for free, although they may contain advertisements. Recently, there has been an increase in the availability of high-quality educational materials on this platform.
It is an excellent option for those who want to learn without paying or simply obtaining a quick understanding of a topic.
We highly recommend utilizing YouTube as a valuable learning resource.
Recommended for
- Wanting to learn without spending money
- Wanting to quickly understand the overview of Angular
The details of each course are as follows:
freeCodeCamp.org
- View count
- 1,215,711
- View count last month
(February 2024) - 49,559
- Like count
- 18,852
- Publish date
- Sep 7th, 2022
✏️ Santosh Yadav created this course. Check out his channel: https://www.youtube.com/c/TechTalksWithSantosh
🔗 https://twitter.com/SantoshYadavDev
🔗 https://github.com/sponsors/santoshyadavdev
💻 API Code: https://github.com/santoshyadavdev/hotelapi
⭐️ 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
OctAcademy
- View count
- 459,595
- View count last month
(February 2024) - 21,694
- Like count
- 8,512
- Publish date
- Nov 29th, 2022
Angular Real-World Client Project from Scratch 120+ Hours- https://youtu.be/yyd2uPM_5CE
Angular Full Course - Complete Zero to Hero Angular full Tutorial- 90% off join now - https://bit.ly/90offangulafullcourse
Source Code - https://bit.ly/47luSkP
Angular Data Table - https://youtu.be/5c_678HRutQ
we learn about Angular A to z from scratch, so this is an Angular Full course where you can learn Angular Javascript framework top to bottom.
Javascript Full Course - https://youtu.be/6rhmk9pEN0s
Part II Angular Full Course - https://youtu.be/6zv1PTuqIIc (Learn to build a Full Angular App)
Angular 15 With @angular/fire 7 (Full CRUD) - https://youtu.be/HXSqKW4JCr4
Tailwind CSS 3 Course 2023 - https://youtu.be/dqz1hb40_Q4
00:00:00 Course Introduction
00:01:42 Angular & Angular CLI
00:02:12 What is Angular?
00:07:21 What is Single Page Application?
00:09:27 What is Angular CLI?
00:10:34 Angular CLI Setup
00:12:30 First Angular App
00:15:21 Angular File Structure Part I
00:20:07 Angular File Structure Part II
00:21:46 Angular File Structure Part III
00:24:57 End Section Angular & Angular CLI
00:25:33 Intro Angular Components
00:26:06 What is Angular Component
00:31:27 Create an Angular Component
00:40:51 How Loads Components Inside the Browser
00:44:24 Templates & Styles Component Properties
00:49:42 Better Approach for Templates & Styles
00:55:17 Generate Angular Components using Angular CLI
01:00:06 NgOnInit() Lifecycle Hook
01:02:11 Data Binding
01:05:43 Sharing Data Between Components
01:07:55 Parent Child Relationship
01:11:04 @Input Decorator
01:15:27 Task
01:16:51 Solution
01:21:17 @ViewChild Decorator
01:29:11 @Output & Event Emitter
01:37:47 End Section Component
01:38:43 Section Intro Display Data & Event Handling
01:39:06 String Interpolation
01:43:53 Property Binding
01:47:30 Class Binding
01:50:17 Style Binding
01:55:49 Event Binding
02:00:46 Event Filtering
02:07:15 Template Variable
02:10:25 Two-Way Data Binding
02:14:54 One-Way Vs Two-Way Data Binding
02:21:19 Task
02:23:37 Solution I
02:29:10 Solution II
02:37:01 End Section Data Binding
02:37:53 Section Intro Directives
02:38:32 What is Angular Directive?
02:40:44 NgFor Directive
02:47:22 Fetch Object Array
02:53:03 Angular Change Detection
02:58:18 Usage of Array Index
03:01:11 NgIf Directive
03:06:06 NgTemplate Directive
03:10:29 NgSwitchCase Directive
03:17:40 NgStyle Directive
03:22:11 NgClass Directive
03:25:26 Structural Directive VS Attribute Directives
03:29:40 Task
03:31:11 Solution I
03:43:56 Section Intro Pipes
03:44:21 What is Angular Pipes & types of Pipes
03:45:30 Uppercase Lowercase Pipes
03:47:45 Number Pipes
03:51:40 Currency Pipes
03:55:22 Date Pipes
03:57:35 JSON Pipe
03:59:21 Percent Pipe
04:00:37 Slice Pipe
04:02:51 Custom Pipe I
04:11:03 Create Custom Pipe Using Angular CLI
04:13:08 Custom Pipes With Arguments
04:17:13 Section Intro - Angular Services
04:17:46 What is Angular Service
04:20:13 Create Angular Service Manual
04:22:25 Dependency Injection
04:28:42 DI Providers and Injectable Decorator
04:35:55 Generate Angular Service Using Angular CLI
04:37:46 Usage of Angular Service
04:41:29 Angular Interface
04:49:27 Section Intro - Template Driven Forms
04:49:59 Angular Forms Types
04:51:50 Creating Bootstrap Forms
04:56:53 NgForm Directive
05:01:43 NgForm & Form Group Class
05:05:27 NgModel & FormControl Class
05:09:45 Form Validation
05:16:47 Styling Invalid Inputs
05:19:53 Form Validation Types
05:22:22 Validating Email Input Field
05:25:18 Validating Text Area
05:26:17 Error Fix
05:26:48 Styling All invalid input fields Validation Error
05:27:58 Form Submission
05:30:44 Disable Submit Button
05:32:50 Section End
05:33:17 Section Intro Reactive Forms
05:33:53 Reactive Form Setup
05:36:47 Creating Reactive Form Controls Programmatically
05:42:42 Reactive Form Basic Validations
05:44:51 Reactive Form Adding Multiple Validations
05:57:04 Reactive Form Submit and Getting Form Values
06:00:47 Nested Form Groups
06:08:30 Reactive Form Array
06:18:53 Reactive Form Builder
06:26:26 Adding Custom Validations I
06:40:59 Section End
06:41:52 Section Intro - Angular Routing & Navigation
06:42:29 What is Angular Routing & Navigation
06:44:09 How to implement Angular Routing & Navigation
06:52:42 Angular Router Outlet
06:55:21 Angular Router Link
06:57:00 Angular Base URL
07:00:10 Angular Base Router
07:02:08 Router Vs Href
07:06:07 Angular RouterLinkActive
07:08:39 Router Parameter Variables
07:14:36 Get Router Parameters
07:19:52 What is Observable
07:23:54 Observable Subscribe
07:25:45 Observable Next
07:28:05 RXJS Observable Vs Functions
07:30:31 Synchronous Vs Asynchronous Programming
07:34:10 Observable Subscribe & Unsubscribe
07:36:49 Multiple Router Parameters
07:40:02 Query Parameters
07:46:22 Separate Module for Angular Routing
07:52:38 Navigate Programmatically
07:56:28 Wild Card Routers
08:00:07 Section End
#angular #angular_developer
Envato Tuts+
- View count
- 81,830
- View count last month
(February 2024) - 14,650
- Like count
- 2,105
- Publish date
- Aug 30th, 2023
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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
5. Wrap-up
We introduced recommended courses for Angular. If you are interested in learning other related courses, please refer to the following.
If you want to further explore and learn after taking one of the courses we introduced today, we recommend visiting the official website or community site.
If you want to stay up-to-date on the latest information, we suggest following the official Twitter account.
Furthermore, We highly recommend utilizing General AI such as ChatGPT as a study aid. This can enable more effective learning, so please give it a try.
We hope you found our website and article helpful. Thank you for visiting.