(<< Back <<) Angular lecture from Maximilian Schwarzmüller (<< Back <<)
- 01 - Getting Started
- 001 Course Introduction
- 002 What is Angular_
- 004 Angular vs Angular 2 vs Latest Angular Version
- 007 Project Setup and First App
- 008 Editing the First App
- 009 The Course Structure
- 010 How to get the Most out of the Course
- 011 What is TypeScript_
- 013 A Basic Project Setup using Bootstrap for Styling
- 02 - The Basics
- 015 Module Introduction
- 016 How an Angular App gets Loaded and Started
- 017 Components are Important!
- 018 Creating a New Component
- 019 Understanding the Role of AppModule and Component Declaration
- 020 Using Custom Components
- 021 Creating Components with the CLI & Nesting Components
- 022 Working with Component Templates
- 023 Working with Component Styles
- 024 Fully Understanding the Component Selector
- 025 [assignment] Practicing Components
- 025 [assignment_solution] Practicing Components
- 025 [OPTIONAL] Assignment Solution
- 026 What is Databinding_
- 027 String Interpolation
- 028 Property Binding
- 029 Property Binding vs String Interpolation
- 030 Event Binding
- 032 Passing and Using Data with Event Binding
- 034 Two-Way-Databinding
- 035 Combining all Forms of Databinding
- 036 [assignment] Practicing Databinding
- 036 [assignment_solution] Practicing Databinding
- 036 [OPTIONAL] Assignment Solution
- 037 Understanding Directives
- 038 Using ngIf to Output Data Conditionally
- 039 Enhancing ngIf with an Else Condition
- 040 Styling Elements Dynamically with ngStyle
- 041 Applying CSS Classes Dynamically with ngClass
- 042 Outputting Lists with ngFor
- 043 [assignment] Practicing Directives
- 043 [assignment_solution] Practicing Directives
- 043 [OPTIONAL] Assignment Solution
- 044 Getting the Index when using ngFor
- 03 - Course Project - The Basics
- 045 Project Introduction
- 046 Planning the App
- 048 Setting up the Application
- 049 Creating the Components
- 050 Using the Components
- 051 Adding a Navigation Bar
- 053 Creating a _Recipe_ Model
- 054 Adding Content to the Recipes Components
- 055 Outputting a List of Recipes with ngFor
- 056 Displaying Recipe Details
- 057 Working on the ShoppingListComponent
- 058 Creating an _Ingredient_ Model
- 059 Creating and Outputting the Shopping List
- 060 Adding a Shopping List Edit Section
- 061 Wrap Up & Next Steps
- 04 - Debugging
- 05 - Components & Databinding Deep Dive
- 064 Module Introduction
- 065 Splitting Apps into Components
- 066 Property & Event Binding Overview
- 067 Binding to Custom Properties
- 068 Assigning an Alias to Custom Properties
- 069 Binding to Custom Events
- 070 Assigning an Alias to Custom Events
- 071 Custom Property and Event Binding Summary
- 072 Understanding View Encapsulation
- 073 More on View Encapsulation
- 074 Using Local References in Templates
- 076 Getting Access to the Template & DOM with @ViewChild
- 077 Projecting Content into Components with ng-content
- 078 Understanding the Component Lifecycle
- 079 Seeing Lifecycle Hooks in Action
- 080 Lifecycle Hooks and Template Access
- 082 Getting Access to ng-content with @ContentChild
- 083 Wrap Up
- 084 [assignment] Practicing Property & Event Binding and View Encapsulation
- 084 [assignment_solution] Practicing Property & Event Binding and View Encapsulation
- 084 [OPTIONAL] Assignment Solution
- 06 - Course Project - Components & Databinding
- 085 Introduction
- 086 Adding Navigation with Event Binding and ngIf
- 087 Passing Recipe Data with Property Binding
- 088 Passing Data with Event and Property Binding (Combined)
- 090 Allowing the User to Add Ingredients to the Shopping List
- 07 - Directives Deep Dive
- 091 Module Introduction
- 092 ngFor and ngIf Recap
- 093 ngClass and ngStyle Recap
- 094 Creating a Basic Attribute Directive
- 095 Using the Renderer to build a Better Attribute Directive
- 097 Using HostListener to Listen to Host Events
- 098 Using HostBinding to Bind to Host Properties
- 099 Binding to Directive Properties
- 100 What Happens behind the Scenes on Structural Directives
- 101 Building a Structural Directive
- 102 Understanding ngSwitch
- 08 - Course Project - Directives
- 09 - Using Services & Dependency Injection
- 105 Module Introduction
- 106 Why would you Need Services_
- 107 Creating a Logging Service
- 108 Injecting the Logging Service into Components
- 109 Creating a Data Service
- 110 Understanding the Hierarchical Injector
- 111 How many Instances of Service Should It Be_
- 112 Injecting Services into Services
- 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)
- 11 - Changing Pages with Routing
- 124 Module Introduction
- 125 Why do we need a Router_
- 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
- 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
- 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
- 13 - Understanding Observables
- 170 Module Introduction
- 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
- 14 - Course Project - Observables
- 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
- 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
- 202 [assignment] Practicing Template-Driven Forms
- 202 [assignment_solution] 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
- 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
- 217 [assignment] Practicing Reactive Forms
- 217 [assignment_solution] Practicing Reactive Forms
- 217 [OPTIONAL] Assignment Solution
- 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
- 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
- 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
- 251 [assignment] Practicing Pipes
- 251 [assignment_solution] Practicing Pipes
- 18 - Making Http Requests
- 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
- 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
- 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
- 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 Gu
- 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 Understanding entryComponents
- 317 Data Binding & Event Binding
- 318 Wrap Up
- 22 - Angular Modules & Optimizing Angular Apps
- 320 Module Introduction
- 321 What are Modules_
- 322 Analyzing the AppModule
- 323 Getting Started with Feature Modules
- 324 Splitting Modules Correctly
- 325 Adding Routes to Feature Modules
- 326 Component Declarations
- 327 The ShoppingList Feature Module
- 328 Understanding Shared Modules
- 329 Understanding the Core Module
- 330 Adding an Auth Feature Module
- 331 Understanding Lazy Loading
- 332 Implementing Lazy Loading
- 333 More Lazy Loading
- 334 Preloading Lazy-Loaded Code
- 335 Modules & Services
- 336 Loading Services Differently
- 337 Ahead-of-Time Compilation
- 338 Wrap Up
- 23 - Deploying an Angular App
- 340 Module Introduction
- 341 Deployment Preparation & Steps
- 342 Using Environment Variables
- 343 Deployment Example_ Firebase Hosting
- 24 - Preview_ Standalone Components
- 345 Module Introduction
- 346 Starting Setup & Why We Want Standalone Components
- 347 Building a First Standalone Component
- 348 Standalone Directives & Connecting Building Blocks
- 349 Migrating Another Component
- 350 A Standalone Root Component
- 351 Services & Standalone Components
- 352 Routing with Standalone Components
- 353 Lazy Loading
- 354 Summary
- 25 - Bonus_ Working with NgRx in our Project
- 355 Module Introduction
- 356 What is Application State_
- 357 What is NgRx_
- 358 Getting Started with Reducers
- 359 Adding Logic to the Reducer
- 360 Understanding & Adding Actions
- 361 Setting Up the NgRx Store
- 362 Selecting State
- 363 Dispatching Actions
- 364 Multiple Actions
- 365 Preparing Update & Delete Actions
- 366 Updating & Deleting Ingredients
- 367 Expanding the State
- 368 Managing More State via NgRx
- 369 Removing Redundant Component State Management
- 370 First Summary & Clean Up
- 371 One Root State
- 372 Setting Up Auth Reducer & Actions
- 373 Dispatching Auth Actions
- 374 Auth Finished (For Now...)
- 375 And Important Note on Actions
- 376 Exploring NgRx Effects
- 377 Defining the First Effect
- 378 Effects & Error Handling
- 379 Login via NgRx Effects
- 380 Managing UI State in NgRx
- 381 Finishing the Login Effect
- 382 Preparing Other Auth Actions
- 383 Adding Signup
- 384 Further Auth Effects
- 385 Adding Auto-Login with NgRx
- 386 Adding Auto-Logout
- 387 Finishing the Auth Effects
- 388 Using the Store Devtools
- 389 The Router Store
- 390 Getting Started with NgRx for Recipes
- 391 Fetching Recipe Detail Data
- 392 Fetching Recipes & Using the Resolver
- 393 Fixing the Auth Redirect
- 394 Update, Delete and Add Recipes
- 395 Storing Recipes via Effects
- 396 Cleanup Work
- 397 Wrap Up
- 26 - Bonus_ Angular Universal
- 400 Module Introduction
- 402 Adding Angular Universal
- 403 Adding Angular Universal with NestJS
- 406 Module Introduction
- 407 Getting Started with Angular Universal
- 408 Working on the App Module
- 409 Adding a Server-Side Build Workflow
- 410 Adding a NodeJS Server
- 411 Pre-Rendering the App on the Server
- 412 Next Steps
- 27 - Angular Animations
- 415 Introduction
- 416 Setting up the Starting Project
- 417 Animations Triggers and State
- 418 Switching between States
- 419 Transitions
- 420 Advanced Transitions
- 421 Transition Phases
- 422 The _void_ State
- 423 Using Keyframes for Animations
- 424 Grouping Transitions
- 425 Using Animation Callbacks
- 28 - Adding Offline Capabilities with Service Workers
- 426 Module Introduction
- 427 Adding Service Workers
- 428 Caching Assets for Offline Use
- 429 Caching Dynamic Assets & URLs
- 29 - A Basic Introduction to Unit Testing in Angular Apps
- 432 Introduction
- 433 Why Unit Tests_
- 434 Analyzing the Testing Setup (as created by the CLI)
- 435 Running Tests (with the CLI)
- 436 Adding a Component and some fitting Tests
- 437 Testing Dependencies_ Components and Services
- 438 Simulating Async Tasks
- 439 Using _fakeAsync_ and _tick_
- 440 Isolated vs Non-Isolated Tests
- 30 - Angular as a Platform & Closer Look at the CLI
- 442 Module Introduction
- 443 A Closer Look at _ng new_
- 444 IDE & Project Setup
- 445 Understanding the Config Files
- 446 Important CLI Commands
- 447 The _angular.json_ File - A Closer Look
- 448 Angular Schematics - An Introduction
- 449 The _ng add_ Command
- 450 Using Custom _ng generate_ Schematics
- 451 Smooth Updating of Projects with _ng update_
- 452 Simplified Deployment with _ng deploy_
- 453 Understanding _Differential Loading_
- 454 Managing Multiple Projects in One Folder
- 455 Angular Libraries - An Introduction
- 456 Wrap Up
- 31 - Angular Changes & New Features
- 32 - Course Roundup
- 458 Course Roundup
- 460 Module Introduction
- 461 What & Why_
- 462 Installing & Using TypeScript
- 463 Base Types & Primitives
- 464 Array & Object Types
- 465 Type Inference
- 466 Working with Union Types
- 467 Assigning Type Aliases
- 468 Diving into Functions & Function Types
- 469 Understanding Generics
- 470 Classes & TypeScript
- 471 Working with Interfaces
- 472 Configuring the TypeScript Compiler
- 33 - Bonus_ TypeScript Introduction (for Angular 2 Usage)
- 460 Module Introduction
- 461 What & Why_
- 462 Installing & Using TypeScript
- 463 Base Types & Primitives
- 464 Array & Object Types
- 465 Type Inference
- 466 Working with Union Types
- 467 Assigning Type Aliases
- 468 Diving into Functions & Function Types
- 469 Understanding Generics
- 470 Classes & TypeScript
- 471 Working with Interfaces
- 472 Configuring the TypeScript Compiler
Related page:
Comments (
)
)
Link to this page:
http://www.vb-net.com/BootstrapLearning/Index.htm
|
|