CF

Angular Basics (v15)

8h 58m 31s
English
Paid

Master the essentials of Angular with a comprehensive course on modern best practices and patterns honed from years of evolution in web development. Learn to create a scalable architecture, utilize immutable data structures, and implement effective state services. Explore the power of brand new Standalone Components while building a robust app from start-to-finish, ultimately fast-tracking your Angular skills.

Course Overview

This course provides in-depth knowledge of Angular's latest version, focusing on practical skills and real-world applications. By the end, you'll understand how to structure your projects effectively and manage data flow seamlessly.

Key Learning Objectives

  • Understand the principles of scalable architecture in Angular.
  • Implement and work with immutable data structures.
  • Develop CO₆ ²²² è™äæãő properties and effectively manage state within your Angular applications.
  • Learn to deploy and utilize Standalone Components for streamlined development.

Course Content

Introduction to Angular

Start with the basics of Angular, covering its core features and setup. Familiarize yourself with the CLI to kickstart your projects smoothly.

Building Scalable Architecture

Create a robust foundation for your applications using best practices in architecture design, allowing for future growth and adaptation.

Working with Immutable Data Structures

Learn the advantages of using immutable data structures and how they improve performance and maintainability.

State Services and Management

Master different state management strategies to maintain a stable and predictable state throughout your application.

Exploring Standalone Components

Dive into Angular's Standalone Components to modularize your application effectively and reduce dependencies.

Conclusion

By completing this course, you will be equipped with the latest Angular tools and techniques that empower you to build responsive, efficient, and modern web applications.

Additional

About the Author: Ultimate Courses (Todd Motto)

Ultimate Courses (Todd Motto) thumbnail

Ultimate Courses (ultimatecourses.com) is the online course platform of Todd Motto, a UK-based Google Developer Expert for Angular and one of the longer-running independent voices on the Angular and TypeScript stack. The platform also covers Vue, RxJS, and JavaScript fundamentals.

The course catalog covers Angular in depth (the framework from its early TypeScript-era through current versions), TypeScript (compiler internals and advanced type-system patterns), RxJS and reactive programming, Vue.js, JavaScript fundamentals, and the broader modern front-end ecosystem. Material is taught at the level of comprehensive reference work rather than introductory tutorial.

The CourseFlix listing under this source carries 9 Ultimate Courses titles spanning that range. Material is paid; Ultimate Courses runs on per-course or membership pricing on the original platform.

Watch Online 84 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 84 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: The Missing Introduction to Angular
All Course Lessons (84)
#Lesson TitleDurationAccess
1
The Missing Introduction to Angular Demo
12:53
2
Component Architecture, State and One-Way Data Flow
14:02
3
Project Setup and Walkthrough
06:26
4
Understand Angular Bootstrapping
07:13
5
Interpolation and Expressions
07:00
6
Property Binding Syntax
07:38
7
Event Binding Syntax
11:22
8
Template Ref Variables
05:18
9
Create a Child Feature Module
06:55
10
Create a Smart Container Component
05:13
11
Use the NgOnInit Lifecycle Hook
08:29
12
Type Definitions with Interfaces
06:01
13
Create and Render a Dumb Component
06:19
14
Pass State to Dumb Components via @Input
06:34
15
Scoped Styles in Components
11:00
16
Style a Host Element
04:53
17
View Encapsulation: Shadow DOM and Emulated
05:29
18
Set Inline Styles with Style Bindings
06:30
19
Complex Inline Styles with NgStyle
06:20
20
Set Classes with Class Bindings
04:56
21
Complex Classes with NgClass
05:17
22
Use a Pipe to Format Currency
05:01
23
Use NgIf for Conditional Rendering
05:30
24
Use <ng-container> for Virtual Elements
02:38
25
Use the NgIf, Else and Then Syntax
04:34
26
NgIf Syntax with <ng-template>
05:45
27
NgFor and Iterating Collections
05:19
28
Improve NgFor Performance with TrackBy
04:38
29
Access NgFor Index, Odd and Even Variables
04:37
30
Advanced NgFor Syntax with <ng-template>
04:47
31
Use NgSwitch for Case Rendering
08:37
32
Advanced NgSwitch Syntax with <ng-template>
03:36
33
Create a Form Container and Dumb Component
07:36
34
Use NgForm with a Template Ref Variable
03:44
35
<input> Binding with NgModel
05:03
36
Radio Button Binding with NgModel
07:54
37
<select> and <option> Rendering and Binding
07:16
38
Textarea Binding with NgModel
01:35
39
Add Validation Constraints and Form Status
05:48
40
NgModel Template Refs and Validation States
07:12
41
Show Error Messages on Validation Change
07:39
42
Style Invalid Input Fields Globally
04:31
43
Form Submit with NgSubmit
06:57
44
Disable Submit and Safety Check Submissions
02:32
45
Trigger Validation Messages On Submit
07:46
46
Control NgModel Writes with ngModelOptions
04:08
47
Trigger a Form State and Validation Reset
03:55
48
Show Visual Feedback on Form Submission
03:01
49
Emit Form Payload to Smart Container via @Output
08:08
50
One-Way Data Binding to NgModel
10:37
51
Create an @Injectable Service
03:58
52
Share State in Components via Services
07:40
53
Class Methods as State Selectors
05:41
54
Immutable State Creation
07:17
55
Immutable State Updates
12:02
56
Immutable State Deletions
05:13
57
Configure and Proxy a Local HTTP Server
04:58
58
Read Data with HttpClient GET
09:46
59
Store State with Observable Pipes
10:38
60
Branch off an Observable to Access State
07:38
61
Create Data with HttpClient POST
07:19
62
Update Data with HttpClient PUT
09:14
63
Delete Data with HttpClient DELETE
05:40
64
Error Handling with catchError() and throwError()
11:11
65
Retry Failed Requests with retry()
02:47
66
Use retryWhen() to Delay Retries
04:58
67
Set HttpHeaders and RequestOptions
07:36
68
Root Module Routes with forRoot()
08:40
69
Create Nested Child Routes
02:59
70
Redirect Routes to New Paths
04:03
71
Handle 404 Not Found Routes with Wildcards
02:41
72
Lazy-Loading Feature Modules
07:49
73
Declarative Navigation with routerLink Directives
06:15
74
Dynamic Route Params and ActivatedRoute
06:48
75
Pass Custom Data to Routed Components
08:15
76
Programmatic Navigation with Router.navigate()
05:21
77
The Idea Behind Standalone Angular
07:20
78
Bootstrap a Standalone Component instead of NgModule
05:36
79
Providing a Route Config via importProvidersFrom
05:59
80
Import NgModules into Standalone Components
03:50
81
Lazy-Load Component-Less Route Configs
04:33
82
Providing Standalone Directives, Components and Pipes
10:15
83
Code Split and Lazy-Load at the Component Level
04:34
84
Scoped or Component-Level Providers and “providedIn”
03:45
Unlock unlimited learning

Get instant access to all 83 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites are necessary for this course?
Before enrolling in this course, students should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with TypeScript is beneficial but not required, as the course will cover TypeScript interfaces and type definitions. Prior experience with other front-end frameworks or libraries can be helpful but is not mandatory.
What kind of application will I build during the course?
Throughout the course, students will build a robust Angular application, focusing on implementing scalable architecture and managing state. The curriculum includes creating and rendering components, using Angular's CLI for setup, and deploying Standalone Components. Students will gain practical experience in building a complete app using modern Angular techniques.
Who is the target audience for this course?
This course is designed for web developers who want to learn Angular or enhance their existing skills in the latest version. It is suitable for those interested in building scalable web applications and gaining hands-on experience with Angular's architectural patterns and state management features.
How does the depth of this course compare to others?
The course offers an in-depth exploration of Angular version 15, focusing on real-world applications and practical skills. Unlike introductory courses, it delves into advanced topics like immutable data structures, state services, and Standalone Components, providing a comprehensive understanding of building scalable Angular applications.
What specific tools or platforms will be covered?
Students will learn to use Angular's CLI for project setup and management. The course also covers the use of HttpClient for data retrieval, and various Angular directives like NgIf, NgFor, and NgSwitch for templating. Additionally, students will explore the use of pipes for data formatting and the management of component styles.
What topics are not covered in this course?
The course does not cover server-side rendering with Angular Universal or advanced topics such as Progressive Web Apps (PWAs) and Angular Material. It focuses strictly on client-side development using Angular version 15, emphasizing foundational architectural concepts and state management.
What is the expected time commitment to complete the course?
The course has a total runtime of approximately 9 hours, spread over 84 lessons. Students should allocate additional time for hands-on exercises and practice, which can vary depending on individual learning paces. A consistent study routine is recommended to thoroughly understand and apply the concepts taught.