Mô tả

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

  • ngFor

  • ngIf

  • ngClass

  • ngStyle

  • ngSwitch

  • 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

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.

Bạn sẽ học được gì

Code in Github repository with downloadable ZIP files per section

Understand key questions about Angular: Why Angular, what are the benefits?

Know how to build and style your own custom Angular Components

Learn in detail all the functionality available in Core Directives

Feel comfortable with Intermediate topics like Template Querying, Content Projection, Dynamic Templates and more

Have in-depth knowledge how to build custom Attribute and Structural Directives

Feel comfortable with Advanced topics like View Encapsulation, Change Detection, Dependency Injection, Lifecycle Hooks and more

Learn in detail about custom Modules, custom Pipes and Internationalization (i18n)

Learn all about Angular Elements (Advanced)

Yêu cầu

  • Just some Javascript, HTML & CSS
  • No previous knowledge of Angular is required
  • Starts with Angular Fundamentals, but quickly evolves to Intermediate to Advanced topics

Nội dung khoá học

19 sections

Introduction

6 lectures
Angular Core Deep Dive - Introduction
03:15
IMPORTANT - Recommended Software Versions
00:15
Course Kickoff - Development Environment Setup
06:03
The Typescript Jumpstart Ebook
03:20
Introduction To Angular - Custom HTML Elements, Model vs View
08:54
Why Angular? Learn the Key Features of Angular Core
11:36

Angular Components, Core Directives and Pipes

23 lectures
New Section - Angular Components and Core Directives
03:48
Building our First Angular Component
05:42
Component Inputs and the @Input Decorator
11:13
Angular Component @Output - Custom Events and Event Emitters
09:53
Angular 17 Control Flow Syntax
02:44
The Angular 17 @for syntax
05:17
Angular @for @empty, $index and other extra options
09:13
Understanding Angular 17 @for tracking functions
08:50
What's Next - The ngFor Directive
01:32
The Angular ngFor Core Directive
10:09
Angular 17 - Comparison between @for and ngFor
01:15
Angular 17 - @if Section Introduction
00:41
The Angular 17 @if else syntax
05:05
What's Next - The ngIf Directive
00:43
Angular ngIf Directive and the Elvis Operator
09:00
Angular 17 - Comparison between @if vs ngIf
01:43
Angular ngClass Core Directive - Learn All Features
09:07
Angular ngStyle Core Directive - When to use it and Why
06:29
Angular 17 @switch Section Introduction
00:59
The Angular 17 @switch syntax in action
03:52
Angular ngSwitch Core Directive In Detail
04:16
Angular ng-container Core Directive - When to use it?
03:52
Angular Built-In Pipes - Complete Catalog
11:17

Angular Local Template Querying In Depth

4 lectures
Angular View Child Decorator - How Does it Work?
05:15
View Child - Learn the multiple View Query Configuration Options
06:22
The AfterViewInit Lifecycle Hook - How deep can we query with View Child?
06:50
The View Children Decorator and Query List In Detail
08:40

Angular Content Projection In Depth

3 lectures
Angular Content Projection with ng-content In Detail
10:35
Angular Content Child Decorator - In-Depth Explanation
11:03
Angular Content Children and the AfterContentInit Lyfecycle Hook
05:25

Angular Templates In Depth

3 lectures
Angular Templates Introduction with ng-template
05:29
Angular Template Instantiation with ngTemplateOutlet
07:06
Angular Templates as Component Inputs
05:05

Angular Directives In Depth

6 lectures
Introduction to Angular Attribute Directives
07:13
Angular Host Binding in Detail - DOM Properties vs Attributes
09:43
Angular Host Listener - Handling Events in Directives
06:14
Angular Directive Export As syntax - When to Use it and Why
04:47
Angular Structural Directives - Understanding the Star Syntax
05:40
Angular Structural Directives - Step-by-Step Implementation
08:42

Angular View Encapsulation In Depth

5 lectures
Angular View Encapsulation - Under the Hood
08:28
Angular View Encapsulation - the Host Selector
05:23
Bypassing View Encapsulation with the ng-deep modifier
06:37
The Host Context Selector - Theming Use Case
05:14
Angular View Encapsulation - Default vs Shadow DOM
07:12

Angular Injectable Services In Depth

6 lectures
Angular Injectable Services - New Section Introduction
04:00
The Angular HTTP Client - GET calls with Request Parameters
06:01
The Async Pipe - a Better way of passing Observable data to the View
04:08
Angular Custom Services - The Injectable Decorator
05:39
Angular Custom Service - Fetching Data
04:10
Angular Custom Service - Data Modification with an HTTP PUT
07:00

Angular Dependency Injection In Depth

8 lectures
Introduction to the Angular Dependency Injection System
05:00
Angular DI - Understanding Providers and Injection Tokens
09:34
Angular DI - Understanding Simplified Provider Configuration
03:57
Understanding Hierarchical Dependency Injection
09:20
Understanding Angular Tree-Shakeable Providers
06:55
Angular DI - Injection Tokens In Detail
09:04
Angular DI Decorators - Optional, Self, SkipSelf
09:04
Angular DI Host Decorator and Section Conclusion
05:35

Angular Change Detection In Depth

5 lectures
Angular Default Change Detection - How does it Work?
08:47
Angular OnPush Change Detection - How does it Work?
10:44
OnPush Change Detection and Observables Data Streams
09:32
Angular Attribute Decorator - When to use it?
04:47
Angular Custom Change Detection with ChangeDetectorRef
10:20

Angular Lifecycle Hooks In Depth

5 lectures
Angular Lifecycle Hooks - OnInit and OnDestroy In Detail
07:55
Angular OnChanges Lifecycle Hook
06:57
Angular AfterContentChecked Lifecycle Hook - Use Cases and Pitfalls
09:07
Angular AfterViewChecked Lifecycle Hook - Use Cases and Pitfalls
06:55
Angular Lifecycle Hooks - Complete Overview
07:58

Angular Modules in Depth

2 lectures
Introduction to Angular Modules
06:12
Angular Feature Modules In Detail
07:56

Angular Pipes In Depth

2 lectures
Angular Custom Pipes - Step-by-Step Implementation
05:15
Angular Impure Pipes In Detail
06:39

Angular Internationalization (i18n) In Depth

5 lectures
Introduction to Angular Internationalization (i18n)
06:57
Understanding Angular i18n Unique Identifiers
06:05
Angular i18n Pluralization Support
05:43
Angular i18n Alternative Expressions Support
05:11
Running a Translated Angular Application using the Angular CLI
11:40

Angular Elements In Depth

1 lectures
Angular Elements In Detail
11:06

Angular Standalone Components In Depth

4 lectures
Angular Standalone Components - New Section
03:51
Migrating To Standalone Components Step 1 - Importing Dependencies
06:20
Migrating To Standalone Components Step 2 - Removing Unused Modules
04:07
Migrating To Standalone Components Step 3 - Refactor Application Bootstrapping
05:10

Angular 17 @defer - Partial Template Loading

11 lectures
Angular 17 @defer Section Introduction
08:26
Angular 17 @defer - How Does It Work?
06:03
Angular 17 @defer with @placeholder
07:20
Angular 17 @defer with @loading
06:19
Angular 17 @defer trigger (idle and immediate triggers)
04:14
Angular 17 @defer timer trigger - Understanding prefetch triggers
04:11
Angular 17 @defer @error block
03:55
Angular 17 @defer - The viewport built-in trigger
08:57
Angular 17 @defer - The built-in interaction trigger
05:18
Angular 17 @defer- the built-in on hover trigger
05:11
Angular 17 @defer Custom Triggers
06:11

Angular 17 Signals In Depth

12 lectures
Angular 17 Signals - Section Introduction
07:43
Introduction to Angular 17 Signals - Writing our first Signal
08:50
The Angular 17 Signal update() API and Read Only Signals
03:19
Angular Signals with Objects and Arrays - Avoid mutating signal values directly
06:14
Angular 17 derived signals with the compute() API
03:52
Understanding how dependencies between signals are created
11:08
The Angular 17 Signal effect() API
08:13
Angular 17 - Cleaning up Signal Effects manually
05:24
Angular 17 Signal-based Data Services
09:38
Introduction To Angular Input Signals - How Do They Compare With @Input?
04:10
How To Use Signal Inputs To Avoid The OnChanges Lifecycle Hook
03:31
Signal Input Options required, alias, transform functions
03:49

Conclusion & Bonus

2 lectures
Bonus Lecture
01:45
Angular Core Deep Dive - Course Conclusion and Key Takeaways
09:39

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.