156 Setting Up Routes | Elearn Portal

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Master in Angular Training 2024 - Scratch to Expert Level

01 Getting Started

001 Course Introduction (0:57)
002 What is Angular_ (1:59)
003 Join our Online Learning Community
004 Angular vs Angular 2 vs Latest Angular Version (3:49)
005 CLI Deep Dive & Troubleshooting
006 Fixing Errors With New Angular Projects
007 Project Setup and First App (8:45)
008 Editing the First App (10:05)
009 The Course Structure (4:00)
010 How to get the Most out of the Course (2:25)
011 What is TypeScript_ (2:09)
012 Optional_ TypeScript Quick Introduction
013 A Basic Project Setup using Bootstrap for Styling (4:27)
014 About the Course Code _ Code Snapshots

02 The Basics

015 Module Introduction (0:56)
016 How an Angular App gets Loaded and Started (7:11)
017 Components are Important! (3:08)
018 Creating a New Component (6:51)
019 Understanding the Role of AppModule and Component Declaration (5:15)
020 Using Custom Components (1:12)
021 Creating Components with the CLI & Nesting Components (3:50)
022 Working with Component Templates (3:08)
023 Working with Component Styles (4:02)
024 Fully Understanding the Component Selector (3:50)
025 [assignment] Practicing Components (1)
025 [assignment_video] Practicing Components (1:33)
025 [OPTIONAL] Assignment Solution (6:42)
026 What is Databinding_ (2:49)
027 String Interpolation (5:19)
028 Property Binding (6:33)
029 Property Binding vs String Interpolation (3:07)
030 Event Binding (4:09)
031 Bindable Properties and Events
032 Passing and Using Data with Event Binding (4:37)
033 Important_ FormsModule is Required for Two-Way-Binding!
034 Two-Way-Databinding (2:47)
035 Combining all Forms of Databinding (1:46)
036 [assignment_video] Practicing Databinding (1:07)
036 [assignment] Practicing Databinding
036 [OPTIONAL] Assignment Solution (5:12)
037 Understanding Directives (2:17)
038 Using ngIf to Output Data Conditionally (3:52)
039 Enhancing ngIf with an Else Condition (2:46)
040 Styling Elements Dynamically with ngStyle (5:01)
041 Applying CSS Classes Dynamically with ngClass (2:53)
042 Outputting Lists with ngFor (3:43)
043 [assignment_video] Practicing Directives (2:15)
043 [assignment] Practicing Directives
043 [OPTIONAL] Assignment Solution (7:06)
044 Getting the Index when using ngFor (2:52)

03 Course Project - The Basics

045 Project Introduction (1:04)
046 Planning the App (5:33)
047 Installing Bootstrap Correctly
048 Setting up the Application (4:31)
049 Creating the Components (9:32)
050 Using the Components (3:15)
051 Adding a Navigation Bar (5:09)
052 Alternative Non-Collapsable Navigation Bar
053 Creating a _Recipe_ Model (4:33)
054 Adding Content to the Recipes Components (7:41)
055 Outputting a List of Recipes with ngFor (4:37)
056 Displaying Recipe Details (5:52)
057 Working on the ShoppingListComponent (1:49)
058 Creating an _Ingredient_ Model (2:35)
059 Creating and Outputting the Shopping List (2:27)
060 Adding a Shopping List Edit Section (3:28)
061 Wrap Up & Next Steps (0:54)

04 Debugging

062 Understanding Angular Error Messages (4:36)
063 Debugging Code in the Browser Using Sourcemaps (5:32)

05 Components & Databinding Deep Dive

064 Module Introduction (0:36)
065 Splitting Apps into Components (5:56)
066 Property & Event Binding Overview (1:44)
067 Binding to Custom Properties (5:43)
068 Assigning an Alias to Custom Properties (1:59)
069 Binding to Custom Events (9:05)
070 Assigning an Alias to Custom Events (0:57)
071 Custom Property and Event Binding Summary (2:02)
072 Understanding View Encapsulation (4:59)
073 More on View Encapsulation (2:43)
074 Using Local References in Templates (4:36)
075 @ViewChild() in Angular 8+
076 Getting Access to the Template & DOM with @ViewChild (5:02)
077 Projecting Content into Components with ng-content (3:22)
078 lifecycle
078 Understanding the Component Lifecycle (4:54)
079 Seeing Lifecycle Hooks in Action (11:54)
080 Lifecycle Hooks and Template Access (2:33)
081 @ContentChild() in Angular 8+
082 Getting Access to ng-content with @ContentChild (3:00)
083 Wrap Up (0:49)
084 [assignment] Practicing Property & Event Binding and View Encapsulation
084 [assignment_video] Practicing Property & Event Binding and View Encapsulation (2:17)
084 [OPTIONAL] Assignment Solution (12:21)

06 Course Project - Components & Databinding

085 Introduction (0:50)
086 Adding Navigation with Event Binding and ngIf (7:31)
087 Passing Recipe Data with Property Binding (4:43)
088 Passing Data with Event and Property Binding (Combined) (10:31)
089 Make sure you have FormsModule added!
090 Allowing the User to Add Ingredients to the Shopping List (7:22)

07 Directives Deep Dive

091 Module Introduction (1:23)
092 ngFor and ngIf Recap (3:36)
093 ngClass and ngStyle Recap (2:56)
094 Creating a Basic Attribute Directive (6:42)
095 Using the Renderer to build a Better Attribute Directive (7:04)
096 More about the Renderer
097 Using HostListener to Listen to Host Events (2:59)
098 Using HostBinding to Bind to Host Properties (3:17)
099 Binding to Directive Properties (6:43)
100 What Happens behind the Scenes on Structural Directives (3:04)
101 Building a Structural Directive (6:13)
102 Understanding ngSwitch (2:49)

08 Course Project - Directives

103 Building and Using a Dropdown Directive (6:25)

09 Using Services & Dependency Injection

105 Module Introduction (1:39)
106 Why would you Need Services_ (2:04)
107 Creating a Logging Service (3:32)
108 Injecting the Logging Service into Components (6:21)
109 Creating a Data Service (6:41)
110 Understanding the Hierarchical Injector (2:40)
111 How many Instances of Service Should It Be_ (2:12)
112 Injecting Services into Services (5:13)
113 Using Services for Cross-Component Communication (4:06)
114 Services in Angular 6+
115 [assignment] Practicing Services
115 [assignment_video] Practicing Services (1:44)
115 [OPTIONAL] Assignment Solution (9:37)

10 Course Project - Services & Dependency Injection

116 Introduction (1:23)
117 Setting up the Services (1:15)
118 Managing Recipes in a Recipe Service (4:07)
119 Using a Service for Cross-Component Communication (5:07)
120 Adding the Shopping List Service (5:04)
121 Using Services for Pushing Data from A to B (3:08)
122 Adding Ingredients to Recipes (3:41)
123 Passing Ingredients from Recipes to the Shopping List (via a Service) (7:03)

11 Changing Pages with Routing

124 Module Introduction (1:26)
125 Why do we need a Router_ (1:15)
126 Understanding the Example Project
127 Setting up and Loading Routes (8:01)
128 Navigating with Router Links (5:18)
129 Understanding Navigation Paths (4:54)
130 Styling Active Router Links (5:01)
131 Navigating Programmatically (3:28)
132 Using Relative Paths in Programmatic Navigation (5:09)
133 Passing Parameters to Routes (3:10)
134 Fetching Route Parameters (4:01)
135 Fetching Route Parameters Reactively (7:25)
136 An Important Note about Route Observables (2:42)
137 Passing Query Parameters and Fragments (5:53)
138 Retrieving Query Parameters and Fragments (3:15)
139 Practicing and some Common Gotchas (6:07)
140 Setting up Child (Nested) Routes (4:28)
141 Using Query Parameters - Practice (5:36)
142 Configuring the Handling of Query Parameters (1:50)
143 Redirecting and Wildcard Routes (4:36)
144 Important_ Redirection Path Matching
145 Outsourcing the Route Configuration (4:40)
146 An Introduction to Guards (1:45)
147 Protecting Routes with canActivate (8:55)
148 Protecting Child (Nested) Routes with canActivateChild (2:51)
149 Using a Fake Auth Service (1:43)
150 Controlling Navigation with canDeactivate (12:28)
151 Passing Static Data to a Route (5:56)
152 Resolving Dynamic Data with the resolve Guard (9:53)
153 Understanding Location Strategies (4:43)
154 Wrap Up (0:51)

12 Course Project - Routing

155 Planning the General Structure (1:36)
156 Setting Up Routes (7:58)
157 Adding Navigation to the App (1:41)
158 Marking Active Routes (1:30)
159 Fixing Page Reload Issues (2:51)
160 Child Routes_ Challenge (1:54)
161 Adding Child Routing Together (4:21)
162 Configuring Route Parameters (6:22)
163 Passing Dynamic Parameters to Links (3:01)
164 Styling Active Recipe Items (1:14)
165 Adding Editing Routes (3:44)
166 Retrieving Route Parameters (3:19)
167 Programmatic Navigation to the Edit Page (4:46)
168 One Note about Route Observables (0:52)
169 prj-routing-final
169 Project Cleanup (1)

13 Understanding Observables

170 Module Introduction (4:25)
171 Analyzing Angular Observables (2:15)
172 Getting Closer to the Core of Observables (6:50)
173 Building a Custom Observable (4:46)
174 Errors & Completion (6:39)
175 Observables & You! (1:55)
176 Understanding Operators (8:39)
177 Subjects (8:17)
178 Wrap Up (1:15)
179 Useful Resources & Links

14 Course Project - Observables

180 Improving the Reactive Service with Observables (Subjects) (6:04)
181 Changed the Subscription Name

15 Handling Forms in Angular Apps

182 Module Introduction (1:19)
183 Why do we Need Angular's Help_ (2:21)
184 Template-Driven (TD) vs Reactive Approach (1:16)
185 An Example Form (1:32)
186 TD_ Creating the Form and Registering the Controls (5:42)
187 TD_ Submitting and Using the Form (6:15)
188 TD_ Understanding Form State (2:29)
189 TD_ Accessing the Form with @ViewChild (3:03)
190 TD_ Adding Validation to check User Input (4:14)
191 Built-in Validators & Using HTML5 Validation
192 TD_ Using the Form State (4:27)
193 TD_ Outputting Validation Error Messages (2:23)
194 TD_ Set Default Values with ngModel Property Binding (2:15)
195 TD_ Using ngModel with Two-Way-Binding (2:48)
196 TD_ Grouping Form Controls (3:30)
197 TD_ Handling Radio Buttons (3:27)
198 TD_ Setting and Patching Form Values (4:42)
199 TD_ Using Form Data (4:44)
200 TD_ Resetting Forms (1:47)
201 [assignment_video] Practicing Template-Driven Forms (1:15)
201 Introduction to the Reactive Approach (0:40)
201 [assignment] Practicing Template-Driven Forms
202 Reactive_ Setup (2:26)
203 Reactive_ Creating a Form in Code (4:07)
204 Reactive_ Syncing HTML and Form (3:58)
205 Reactive_ Submitting the Form (2:15)
206 Reactive_ Adding Validation (2:50)
207 Reactive_ Getting Access to Controls (3:47)
208 Reactive_ Grouping Controls (3:46)
209 Fixing a Bug
210 Reactive_ Arrays of Form Controls (FormArray) (7:31)
211 Reactive_ Creating Custom Validators (6:11)
212 Reactive_ Using Error Codes (3:20)
213 Reactive_ Creating a Custom Async Validator (4:38)
214 Reactive_ Reacting to Status or Value Changes (2:11)
215 Reactive_ Setting and Patching Values (2:09)
216 [assignment_video] Practicing Reactive Forms (1:04)
216 [OPTIONAL] Assignment Solution (13:48)
216 [assignment] Practicing Reactive Forms

16 Course Project - Forms

217 Introduction (0:59)
218 TD_ Adding the Shopping List Form (3:42)
219 Adding Validation to the Form (2:21)
220 Allowing the Selection of Items in the List (4:24)
221 Loading the Shopping List Items into the Form (3:02)
222 Updating existing Items (3:15)
223 Resetting the Form (2:34)
224 Allowing the the User to Clear (Cancel) the Form (1:16)
225 Allowing the Deletion of Shopping List Items (2:52)
226 Creating the Template for the (Reactive) Recipe Edit Form (4:59)
227 Creating the Form For Editing Recipes (5:06)
228 Syncing HTML with the Form (3:52)
229 Fixing a Bug
230 Adding Ingredient Controls to a Form Array (5:39)
231 Adding new Ingredient Controls (3:38)
232 Validating User Input (5:10)
233 Submitting the Recipe Edit Form (7:30)
234 Adding a Delete and Clear (Cancel) Functionality (4:46)
235 Redirecting the User (after Deleting a Recipe) (1:47)
236 Adding an Image Preview (1:48)
237 Providing the Recipe Service Correctly (1:58)
238 Deleting Ingredients and Some Finishing Touches (3:34)
239 Deleting all Items in a FormArray

17 Using Pipes to Transform Output

240 Introduction & Why Pipes are Useful (2:01)
241 Using Pipes (3:28)
242 Parametrizing Pipes (2:10)
243 Where to learn more about Pipes (1:56)
244 Chaining Multiple Pipes (2:20)
245 Creating a Custom Pipe (6:42)
246 Parametrizing a Custom Pipe (2:36)
247 Example_ Creating a Filter Pipe (7:01)
248 Pure and Impure Pipes (or_ How to _fix_ the Filter Pipe) (4:46)
249 Understanding the _async_ Pipe (4:03)
250 [assignment_video] Practicing Pipes (1:13)
250 [assignment] Practicing Pipes

18 Making Http Requests

250 A New IDE (0:43)
251 Module Introduction (1:06)
252 How Does Angular Interact With Backends_ (3:09)
253 The Anatomy of a Http Request (2:27)
254 Backend (Firebase) Setup (2:34)
255 Sending a POST Request (10:11)
256 GETting Data (2:56)
257 Using RxJS Operators to Transform Response Data (3:59)
258 Using Types with the HttpClient (5:07)
259 Outputting Posts (2:15)
260 Showing a Loading Indicator (2:03)
261 Using a Service for Http Requests (6:37)
262 Services & Components Working Together (3:28)
263 Sending a DELETE Request (3:27)
264 Handling Errors (6:38)
265 Using Subjects for Error Handling (2:39)
266 Using the catchError Operator (2:13)
267 Error Handling & UX (2:07)
268 Setting Headers (3:18)
269 Adding Query Params (4:01)
270 Observing Different Types of Responses (7:32)
271 Changing the Response Body Type (3:16)
272 Introducing Interceptors (7:24)
273 Manipulating Request Objects (2:32)
274 Response Interceptors (2:46)
275 Multiple Interceptors (4:52)
276 Wrap Up (1:57)
277 Useful Resources & Links

19 Course Project - Http

278 Module Introduction (0:55)
279 Backend (Firebase) Setup (2:03)
280 Setting Up the DataStorage Service (5:32)
281 Storing Recipes (6:39)
282 Fetching Recipes (5:38)
283 Transforming Response Data (4:17)
284 Resolving Data Before Loading (7:31)
285 Fixing a Bug with the Resolver (1:43)

20 Authentication & Route Protection in Angular

286 Module Introduction (0:52)
287 How Authentication Works (5:01)
288 Adding the Auth Page (6:44)
289 Switching Between Auth Modes (4:02)
290 Handling Form Input (3:44)
291 Preparing the Backend (3:14)
292 Make sure you got Recipes in your backend!
293 Preparing the Signup Request (8:24)
294 Sending the Signup Request (4:36)
295 Adding a Loading Spinner & Error Handling Logic (6:34)
296 Improving Error Handling (5:39)
297 Sending Login Requests (6:00)
298 Login Error Handling (4:28)
299 Creating & Storing the User Data (10:16)
300 Reflecting the Auth State in the UI (9:41)
301 Adding the Token to Outgoing Requests (10:15)
302 Attaching the Token with an Interceptor (8:48)
303 Adding Logout (3:18)
304 Adding Auto-Login (9:54)
305 Adding Auto-Logout (7:39)
306 Adding an Auth Guard (10:56)
307 Wrap Up (1:55)
308 Useful Resources & Links

21 Dynamic Components

309 Module Introduction (1:09)
310 Adding an Alert Modal Component (7:33)
311 Understanding the Different Approaches (2:28)
312 Using ngIf (3:05)
313 Preparing Programmatic Creation (8:27)
314 Creating a Component Programmatically (4:46)
315 Understanding entryComponents (5:06)
316 Data Binding & Event Binding (5:05)
317 Wrap Up (1:25)
318 Useful Resources & Links

22 Angular Modules & Optimizing Angular Apps

319 Module Introduction (0:41)
320 What are Modules_ (2:26)
321 Analyzing the AppModule (6:24)
322 Getting Started with Feature Modules (8:59)
323 Splitting Modules Correctly (4:09)
324 Adding Routes to Feature Modules (4:34)
325 Component Declarations (1:58)
326 The ShoppingList Feature Module (4:27)
327 Understanding Shared Modules (8:10)
328 Understanding the Core Module (5:48)
329 Adding an Auth Feature Module (4:22)
330 Understanding Lazy Loading (2:52)
331 Implementing Lazy Loading (12:20)
332 More Lazy Loading (3:02)
333 Preloading Lazy-Loaded Code (3:39)
334 Modules & Services (5:46)
335 Loading Services Differently (8:24)
336 Ahead-of-Time Compilation (9:49)
337 Wrap Up (0:49)
338 Useful Resources & Links

23 Deploying an Angular App

339 Module Introduction (0:52)
340 Deployment Preparation & Steps (3:18)
341 Using Environment Variables (4:44)
342 Deployment Example_ Firebase Hosting (9:01)
343 Server Routing vs Browser Routing

24 Bonus_ Working with NgRx in our Project

344 Module Introduction (0:46)
345 What is Application State_ (9:07)
346 What is NgRx_ (6:55)
347 Getting Started with Reducers (6:44)
348 Adding Logic to the Reducer (5:47)
349 Understanding & Adding Actions (6:16)
350 Setting Up the NgRx Store (4:48)
351 Selecting State (8:51)
352 Dispatching Actions (7:09)
353 Multiple Actions (9:37)
354 Preparing Update & Delete Actions (3:08)
355 Updating & Deleting Ingredients (10:59)
356 Expanding the State (9:17)
357 Managing More State via NgRx (9:52)
358 Removing Redundant Component State Management (3:32)
359 First Summary & Clean Up (5:25)
360 One Root State (11:39)
361 Setting Up Auth Reducer & Actions (8:25)
362 Dispatching Auth Actions (5:53)
363 Auth Finished (For Now...) (6:43)
364 And Important Note on Actions (6:24)
365 Exploring NgRx Effects (3:38)
366 Defining the First Effect (5:19)
367 Effects & Error Handling (8:57)
368 Login via NgRx Effects (9:08)
369 Managing UI State in NgRx (7:30)
370 Finishing the Login Effect (7:11)
371 Preparing Other Auth Actions (4:09)
372 Adding Signup (6:17)
373 Further Auth Effects (6:13)
374 Adding Auto-Login with NgRx (8:16)
375 Adding Auto-Logout (6:31)
376 Finishing the Auth Effects (2:29)
377 Using the Store Devtools (6:20)
378 The Router Store (2:11)
379 Getting Started with NgRx for Recipes (11:03)
380 Fetching Recipe Detail Data (9:14)
381 Fetching Recipes & Using the Resolver (12:00)
382 Fixing the Auth Redirect (2:10)
383 Update, Delete and Add Recipes (15:11)
384 Storing Recipes via Effects (5:52)
385 Cleanup Work (1:58)
386 Wrap Up (2:12)
387 Alternative NgRx Syntax
388 Useful Resources & Links

25 Bonus_ Angular Universal

389 Module Introduction (3:04)
390 Angular Universal & ModuleMapLoader
391 Adding Angular Universal (10:01)
392 Adding Angular Universal with NestJS (6:18)
393 Deploying Universal Apps
394 Important_ Remaining Lectures
395 Module Introduction (1:40)
396 Getting Started with Angular Universal (1:31)
397 Working on the App Module (4:02)
398 Adding a Server-Side Build Workflow (4:55)
399 Adding a NodeJS Server (8:26)
400 Pre-Rendering the App on the Server (4:11)
401 Next Steps (1:38)
402 Angular Universal Gotchas

26 Angular Animations

403 Making Animations Work with Angular 4+
404 Introduction (1:03)
405 Setting up the Starting Project (0:52)
406 Animations Triggers and State (7:11)
407 Switching between States (2:04)
408 Transitions (1:54)
409 Advanced Transitions (5:21)
410 Transition Phases (3:57)
411 The _void_ State (6:10)
412 Using Keyframes for Animations (5:32)
413 Grouping Transitions (2:11)
414 Using Animation Callbacks (2:38)

27 Adding Offline Capabilities with Service Workers

415 Module Introduction (2:09)
416 Adding Service Workers (12:41)
417 Caching Assets for Offline Use (5:28)
418 Caching Dynamic Assets & URLs (7:02)
419 Further Links & Resources

28 A Basic Introduction to Unit Testing in Angular Apps

420 About this Section
421 Introduction (1:18)
422 Why Unit Tests_ (2:12)
423 Analyzing the Testing Setup (as created by the CLI) (8:01)
424 Running Tests (with the CLI) (1:59)
425 Adding a Component and some fitting Tests (6:14)
426 Testing Dependencies_ Components and Services (6:55)
427 Simulating Async Tasks (9:41)
428 Using _fakeAsync_ and _tick_ (2:14)
429 Isolated vs Non-Isolated Tests (6:10)
430 Further Resources & Where to Go Next

29 Angular as a Platform & Closer Look at the CLI

431 Module Introduction (1:43)
432 A Closer Look at _ng new_ (5:18)
433 IDE & Project Setup (2:31)
434 Understanding the Config Files (9:01)
435 Important CLI Commands (5:25)
436 The _angular.json_ File - A Closer Look (11:18)
437 Angular Schematics - An Introduction (1:41)
438 The _ng add_ Command (4:31)
439 Using Custom _ng generate_ Schematics (3:05)
440 Smooth Updating of Projects with _ng update_ (2:13)
441 Simplified Deployment with _ng deploy_ (5:46)
442 Understanding _Differential Loading_ (5:10)
443 Managing Multiple Projects in One Folder (4:35)
444 Angular Libraries - An Introduction (2:51)
445 Wrap Up (1:27)

30 Angular Changes & New Features

446 A First Look At Angular Elements (15:34)

31 Course Roundup

447 Course Roundup (1:33)
448 Bonus_ More Content!

32 Bonus_ TypeScript Introduction (for Angular 2 Usage)

449 Module Introduction (1:15)
450 What & Why_ (6:32)
451 Installing & Using TypeScript (6:22)
452 Base Types & Primitives (3:55)
453 Array & Object Types (5:33)
454 Type Inference (2:47)
455 Working with Union Types (2:48)
456 Assigning Type Aliases (2:42)
457 Diving into Functions & Function Types (5:12)
458 Understanding Generics (7:20)
459 Classes & TypeScript (7:58)
460 Working with Interfaces (5:36)
461 Configuring the TypeScript Compiler (2:29)
462 Module Resources

Teach online with

156 Setting Up Routes

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock