Contenuto del corso
✅ Sezione 1: Getting Started
1. Course Introduction
2. What is Angular?
3. Join our Online Learning Community
4. Angular vs Angular 2 vs Latest Angular Version
5. CLI Deep Dive & Troubleshooting
6. Project Setup and First App
7. Editing the First App
8. The Course Structure
9. How to get the Most out of the Course
10. What is TypeScript?
11. Optional: TypeScript Quick Introduction
12. A Basic Project Setup using Bootstrap for Styling
13. About the Course Code / Code Snapshots
✅ Sezione 2: The Basics
14. Module Introduction
15. How an Angular App gets Loaded and Started
16. Components are Important!
17. Creating a New Component
18. Understanding the Role of AppModule and Component Declaration
19. Using Custom Components
20. Creating Components with the CLI & Nesting Components
21. Working with Component Templates
22. Working with Component Styles
23. Fully Understanding the Component Selector
Compito 1: Practicing Components
24. [OPTIONAL] Assignment Solution
25. What is Databinding?
26. String Interpolation
27. Property Binding
28. Property Binding vs String Interpolation
29. Event Binding
30. Bindable Properties and Events
31. Passing and Using Data with Event Binding
32. Important: FormsModule is Required for Two-Way-Binding!
33. Two-Way-Databinding
34. Combining all Forms of Databinding
Compito 2: Practicing Databinding
35. [OPTIONAL] Assignment Solution
36. Understanding Directives
37. Using ngIf to Output Data Conditionally
38. Enhancing ngIf with an Else Condition
39. Styling Elements Dynamically with ngStyle
40. Applying CSS Classes Dynamically with ngClass
41. Outputting Lists with ngFor
Compito 3: Practicing Directives
42. [OPTIONAL] Assignment Solution
43. Getting the Index when using ngFor
✅ Sezione 3: Course Project – The Basics
44. Project Introduction
45. Planning the App
46. Creating a New App Correctly
47. Setting up the Application
48. Creating the Components
49. Using the Components
50. Adding a Navigation Bar
51. Alternative Non-Collapsable Navigation Bar
52. Creating a “Recipe” Model
53. Adding Content to the Recipes Components
54. Outputting a List of Recipes with ngFor
55. Displaying Recipe Details
56. Working on the ShoppingListComponent
57. Creating an “Ingredient” Model
58. Creating and Outputting the Shopping List
59. Adding a Shopping List Edit Section
60. Wrap Up & Next Steps
✅ Sezione 4: Debugging
61. Understanding Angular Error Messages
62. Debugging Code in the Browser Using Sourcemaps
✅ Sezione 5: Components & Databinding Deep Dive
63. Module Introduction
64. Splitting Apps into Components
65. Property & Event Binding Overview
66. Binding to Custom Properties
67. Assigning an Alias to Custom Properties
68. Binding to Custom Events
69. Assigning an Alias to Custom Events
70. Custom Property and Event Binding Summary
71. Understanding View Encapsulation
72. More on View Encapsulation
73. Using Local References in Templates
74. @ViewChild() in Angular 8+
75. Getting Access to the Template & DOM with @ViewChild
76. Projecting Content into Components with ng-content
77. Understanding the Component Lifecycle
78. Seeing Lifecycle Hooks in Action
79. Lifecycle Hooks and Template Access
80. @ContentChild() in Angular 8+
81. Getting Access to ng-content with @ContentChild
82. Wrap Up
Compito 4: Practicing Property & Event Binding and View Encapsulation
83. [OPTIONAL] Assignment Solution
✅ Sezione 6: Course Project – Components & Databinding
84. Introduction
85. Adding Navigation with Event Binding and ngIf
86. Passing Recipe Data with Property Binding
87. Passing Data with Event and Property Binding (Combined)
88. Make sure you have FormsModule added!
89. Allowing the User to Add Ingredients to the Shopping List
✅ Sezione 7: Directive Deep Dive
90. Module Introduction
91. ngFor and ngIf Recap
92. ngClass and ngStyle Recap
93. Creating a Basic Attribute Directive
94. Using the Renderer to build a Better Attribute Directive
95. More about the Renderer
96. Using HostListener to Listen to Host Events
97. Using HostBinding to Bind to Host Properties
98. Binding to Directive Properties
99. What Happens behind the Scenes on Structural Directives
100. Building a Structural Directive
101. Understanding ngSwitch
✅ Sezione 8: Course Project – Directives
102. Building and Using a Dropdown Directive
103. Closing the Dropdown From Anywhere
✅Sezione 9: Using Services & Dependency Injection
104. Module Introduction
105. Why would you Need Services?
106. Creating a Logging Service
107. Injecting the Logging Service into Components
108. Alternative Injection Syntax
109. Creating a Data Service
110. Understanding the Hierarchical Injector
111. How many Instances of Service Should It Be?
112. Injecting Services into Services
113. Using Services for Cross-Component Communication
114. A Different Way Of Injecting Services
Compito 5: Practicing Services
115. [OPTIONAL] Assignment Solution
➖ Sezione 10: Course Project – Services & Dependency Injection
116. Introduction
117. Setting up the Services
118. Managing Recipes in a Recipe Service
119. Using a Service for Cross-Component Communication
120. Adding the Shopping List Service
121. Using Services for Pushing Data from A to B
122. Adding Ingredients to Recipes
123. Passing Ingredients from Recipes to the Shopping List (via a Service)
➖ Sezione 11: Changing Pages with Routing
124. Module Introduction
125. Why do we need a Router?
126. Understanding the Example Project
127. Setting up and Loading Routes
128. Navigating with Router Links
129. Understanding Navigation Paths
130. Styling Active Router Links
131. Navigating Programmatically
132. Using Relative Paths in Programmatic Navigation
133. Passing Parameters to Routes
134. Fetching Route Parameters
135. Fetching Route Parameters Reactively
136. An Important Note about Route Observables
137. Passing Query Parameters and Fragments
138. Retrieving Query Parameters and Fragments
139. Practicing and some Common Gotchas
140. Setting up Child (Nested) Routes
141. Using Query Parameters – Practice
142. Configuring the Handling of Query Parameters
143. Redirecting and Wildcard Routes
144. Important: Redirection Path Matching
145. Outsourcing the Route Configuration
146. An Introduction to Guards
147. Protecting Routes with canActivate
148. Protecting Child (Nested) Routes with canActivateChild
149. Using a Fake Auth Service
150. Controlling Navigation with canDeactivate
151. Passing Static Data to a Route
152. Resolving Dynamic Data with the resolve Guard
153. Understanding Location Strategies
154. Wrap Up
➖ Sezione 12: Course Project – Routing
155. Planning the General Structure
156. Setting Up Routes
157. Adding Navigation to the App
158. Marking Active Routes
159. Fixing Page Reload Issues
160. Child Routes: Challenge
161. Adding Child Routing Together
162. Configuring Route Parameters
163. Passing Dynamic Parameters to Links
164. Styling Active Recipe Items
165. Adding Editing Routes
166. Retrieving Route Parameters
167. Programmatic Navigation to the Edit Page
168. One Note about Route Observables
169. Project Cleanup
➖ Sezione 13: Understanding Observables
170. Module Introduction
171. Install RxJS
172. Analyzing Angular Observables
173. Getting Closer to the Core of Observables
174. Building a Custom Observable
175. Errors & Completion
176. Observables & You!
177. Understanding Operators
178. Subjects
179. Wrap Up
180. Useful Resources & Links
➖ Sezione 14: Course Project – Observables
181. Improving the Reactive Service with Observables (Subjects)
182. Changed the Subscription Name
➖ Sezione 15: Handling Forms in Angular Apps
183. Module Introduction
184. Why do we Need Angular’s Help?
185. Template-Driven (TD) vs Reactive Approach
186. An Example Form
187. TD: Creating the Form and Registering the Controls
188. TD: Submitting and Using the Form
189. TD: Understanding Form State
190. TD: Accessing the Form with @ViewChild
191. TD: Adding Validation to check User Input
192. Built-in Validators & Using HTML5 Validation
193. TD: Using the Form State
194. TD: Outputting Validation Error Messages
195. TD: Set Default Values with ngModel Property Binding
196. TD: Using ngModel with Two-Way-Binding
197. TD: Grouping Form Controls
198. TD: Handling Radio Buttons
199. TD: Setting and Patching Form Values
200. TD: Using Form Data
201. TD: Resetting Forms
Compito 6: Practicing Template-Driven Forms
202. Introduction to the Reactive Approach
203. Reactive: Setup
204. Reactive: Creating a Form in Code
205. Reactive: Syncing HTML and Form
206. Reactive: Submitting the Form
207. Reactive: Adding Validation
208. Reactive: Getting Access to Controls
209. Reactive: Grouping Controls
210. Fixing a Bug
211. Reactive: Arrays of Form Controls (FormArray)
212. Reactive: Creating Custom Validators
213. Reactive: Using Error Codes
214. Reactive: Creating a Custom Async Validator
215. Reactive: Reacting to Status or Value Changes
216. Reactive: Setting and Patching Values
Compito 7: Practicing Reactive Forms
217. [OPTIONAL] Assignment Solution
➖ Sezione 16: Course Project – Forms
218. Introduction
219. TD: Adding the Shopping List Form
220. Adding Validation to the Form
221. Allowing the Selection of Items in the List
222. Loading the Shopping List Items into the Form
223. Updating existing Items
224. Resetting the Form
225. Allowing the the User to Clear (Cancel) the Form
226. Allowing the Deletion of Shopping List Items
227. Creating the Template for the (Reactive) Recipe Edit Form
228. Creating the Form For Editing Recipes
229. Syncing HTML with the Form
230. Fixing a Bug
231. Adding Ingredient Controls to a Form Array
232. Adding new Ingredient Controls
233. Validating User Input
234. Submitting the Recipe Edit Form
235. Adding a Delete and Clear (Cancel) Functionality
236. Redirecting the User (after Deleting a Recipe)
237. Adding an Image Preview
238. Providing the Recipe Service Correctly
239. Deleting Ingredients and Some Finishing Touches
240. Deleting all Items in a FormArray
➖ Sezione 17: Using Pipes to Transform Output
241. Introduction & Why Pipes are Useful
242. Using Pipes
243. Parametrizing Pipes
244. Where to learn more about Pipes
245. Chaining Multiple Pipes
246. Creating a Custom Pipe
247. Parametrizing a Custom Pipe
248. Example: Creating a Filter Pipe
249. Pure and Impure Pipes (or: How to “fix” the Filter Pipe)
250. Understanding the “async” Pipe
Compito 8: Practicing Pipes
➖ Sezione 18: Making Http Request
251. A New IDE
252. Module Introduction
253. How Does Angular Interact With Backends?
254. The Anatomy of a Http Request
255. Backend (Firebase) Setup
256. Sending a POST Request
257. GETting Data
258. Using RxJS Operators to Transform Response Data
259. Using Types with the HttpClient
260. Outputting Posts
261. Showing a Loading Indicator
262. Using a Service for Http Requests
263. Services & Components Working Together
264. Sending a DELETE Request
265. Handling Errors
266. Using Subjects for Error Handling
267. Using the catchError Operator
268. Error Handling & UX
269. Setting Headers
270. Adding Query Params
271. Observing Different Types of Responses
272. Changing the Response Body Type
273. Introducing Interceptors
274. Manipulating Request Objects
275. Response Interceptors
276. Multiple Interceptors
277. Wrap Up
278. Useful Resources & Links
➖ Sezione 19: Course Project – Http
279. Module Introduction
280. Backend (Firebase) Setup
281. Setting Up the DataStorage Service
282. Storing Recipes
283. Fetching Recipes
284. Transforming Response Data
285. Resolving Data Before Loading
286. Fixing a Bug with the Resolver
➖ Sezione 20: Authentication & Route Protection in Angular
287. Module Introduction
288. How Authentication Works
289. Adding the Auth Page
290. Switching Between Auth Modes
291. Handling Form Input
292. Preparing the Backend
293. Make sure you got Recipes in your backend!
294. Preparing the Signup Request
295. Sending the Signup Request
296. Adding a Loading Spinner & Error Handling Logic
297. Improving Error Handling
298. Sending Login Requests
299. Login Error Handling
300. Creating & Storing the User Data
301. Reflecting the Auth State in the UI
302. Adding the Token to Outgoing Requests
303. Attaching the Token with an Interceptor
304. Adding Logout
305. Adding Auto-Login
306. Adding Auto-Logout
307. Adding an Auth Guard
308. Wrap Up
309. Useful Resources & Links
➖ Sezione 21: Dynamic Components
310. Module Introduction
311. Adding an Alert Modal Component
312. Understanding the Different Approaches
313. Using ngIf
314. Preparing Programmatic Creation
315. Creating a Component Programmatically
316. About entryComponents
317. Understanding entryComponents
318. Data Binding & Event Binding
319. Wrap Up
320. Useful Resources & Links
➖ Sezione 22: Angular Modules & Optimization Angular Apps
321. Module Introduction
322. What are Modules?
323. Analyzing the AppModule
324. Getting Started with Feature Modules
325. Splitting Modules Correctly
326. Adding Routes to Feature Modules
327. Component Declarations
328. The ShoppingList Feature Module
329. Understanding Shared Modules
330. Understanding the Core Module
331. Adding an Auth Feature Module
332. Understanding Lazy Loading
333. Implementing Lazy Loading
334. More Lazy Loading
335. Preloading Lazy-Loaded Code
336. Modules & Services
337. Loading Services Differently
338. Useful Resources & Links
➖ Sezione 23: Deploy an Angular App
339. Module Introduction
340. Deployment Preparation & Steps
341. Using Environment Variables
342. Deploying Angular Applications
343. Deployment Example: Firebase Hosting
344. Server Routing vs Browser Routing
➖ Sezione 24: Standalone Components
345. Module Introduction
346. Starting Setup & Why We Want Standalone Components
347. Building a First Standalone Component
348. Standalone Components Are Now Stable
349. Standalone Directives & Connecting Building Blocks
350. Migrating Another Component
351. A Standalone Root Component
352. Services & Standalone Components
353. Routing with Standalone Components
354. Lazy Loading
355. Summary
➖ Sezione 25: Angular Signals
356. Module Introduction
357. Signals: What & Why?
358. Creating a New Signal
359. Updating a Signal Value
360. Reading & Outputting a Signal Value
361. Signal Updating: set(), update() & mutate()
362. Important: Signals are NOT Finished Yet!
363. Signals: What’s To Come?
364. Computed Values & Effects
365. Module Summary
➖ Sezione 26: Using NgRx For State Management
366. Module Introduction
367. What Is NgRx?
368. Understanding NgRx & Its Building Blocks
369. Project Setup & Installing NgRx
370. Adding a First Reducer & Store Setup
371. An Alternative Way Of Creating Reducers
372. Reading Data From The Store
373. Introducing Actions & State Changing Reducers
374. Dispatching Actions
375. Attaching Data To Actions
376. Handling Actions Without createReducer
377. An Alternative Way Of Defining Actions
378. Time To Practice: A Second Action
379. Exploring Selectors
380. Introducing Effects
381. Installing the Effects Package
382. Defining a First Effect
383. The Old @Effect Decorator & Registering Effects
384. Using Store Data In Effects
385. Adding a Second Effect
386. Summary
387. About The Remaining Section
388. Recipe Project Starting Code
389. Getting Started with Reducers
390. Adding Logic to the Reducer
391. Understanding & Adding Actions
392. Setting Up the NgRx Store
393. Selecting State
394. Dispatching Actions
395. Multiple Actions
396. Preparing Update & Delete Actions
397. Updating & Deleting Ingredients
398. Expanding the State
399. Managing More State via NgRx
400. Removing Redundant Component State Management
401. First Summary & Clean Up
402. One Root State
403. Setting Up Auth Reducer & Actions
404. Dispatching Auth Actions
405. Auth Finished (For Now…)
406. And Important Note on Actions
407. Exploring NgRx Effects
408. Defining the First Effect
409. Important: Avoid @Effect
410. Effects & Error Handling
411. Login via NgRx Effects
412. Managing UI State in NgRx
413. Finishing the Login Effect
414. Preparing Other Auth Actions
415. Adding Signup
416. Further Auth Effects
417. Adding Auto-Login with NgRx
418. Adding Auto-Logout
419. Finishing the Auth Effects
420. Using the Store Devtools
421. The Router Store
422. Getting Started with NgRx for Recipes
423. Fetching Recipe Detail Data
424. Fetching Recipes & Using the Resolver
425. Fixing the Auth Redirect
426. Update, Delete and Add Recipes
427. Storing Recipes via Effects
428. Cleanup Work
429. Wrap Up
430. Alternative NgRx Syntax
431. Useful Resources & Links
➖ Sezione 27: Angular Universal
432. Module Introduction
433. Angular Universal – What & Why?
434. Converting the App to a Universal App
435. Analyzing & Running Server-side Code
436. A Closer Look At The Server-side Code
437. Integrating a REST API
438. Some Notes About Deploying Angular Universal Apps
439. Angular Universal Gotchas
➖ Sezione 28: Angular Animations
440. Making Animations Work with Angular 4+
441. Introduction
442. Setting up the Starting Project
443. Animations Triggers and State
444. Switching between States
445. Transitions
446. Advanced Transitions
447. Transition Phases
448. The “void” State
449. Using Keyframes for Animations
450. Grouping Transitions
451. Using Animation Callbacks
➖ Sezione 29: Add Offline Capabilities with Service Workers
452. Module Introduction
453. Adding Service Workers
454. Caching Assets for Offline Use
455. Caching Dynamic Assets & URLs
456. Further Links & Resources
➖ Sezione 30: A Basic Introduction to Unit Testing in Angular Apps
457. About this Section
458. Introduction
459. Why Unit Tests?
460. Analyzing the Testing Setup (as created by the CLI)
461. Running Tests (with the CLI)
462. Adding a Component and some fitting Tests
463. Testing Dependencies: Components and Services
464. Simulating Async Tasks
465. Using “fakeAsync” and “tick”
466. Isolated vs Non-Isolated Tests
467. Further Resources & Where to Go Next
➖ Sezione 31: Angular as Platform & Closer Look at the CLI
468. Module Introduction
469. A Closer Look at “ng new”
470. IDE & Project Setup
471. Understanding the Config Files
472. Important CLI Commands
473. The “angular.json” File – A Closer Look
474. Angular Schematics – An Introduction
475. The “ng add” Command
476. Using Custom “ng generate” Schematics
477. Smooth Updating of Projects with “ng update”
478. Simplified Deployment with “ng deploy”
479. Understanding “Differential Loading”
480. Managing Multiple Projects in One Folder
481. Angular Libraries – An Introduction
482. Wrap Up
➖ Sezione 32: Angular Changes & New Features
483. A First Look At Angular Elements
➖ Sezione 33: Course Roundup
484. Thanks for being part of the course!
485. Bonus: More Content!
➖ Sezione 34: Typescript Introduction (for Angular 2 Usage)
486. Module Introduction
487. What & Why?
488. Installing & Using TypeScript
489. Base Types & Primitives
490. Array & Object Types
491. Type Inference
492. Working with Union Types
493. Assigning Type Aliases
494. Diving into Functions & Function Types
495. Understanding Generics
496. Classes & TypeScript
497. Working with Interfaces
498. Configuring the TypeScript Compiler
499. Module Resources