Angular 8 (formerly Angular 2) – The Complete Guide

Angular 8 (formerly Angular 2) – The Complete Guide
Angular 8 (formerly Angular 2) – The Complete Guide
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 36 Hours | 13.1 GB

Master Angular (Angular 2+, incl. Angular 8) and build awesome, reactive web apps with the successor of Angular.js

This course starts from scratch, you neither need to know Angular 1 nor Angular 2! (Angular 8 simply is the latest version of Angular 2)

Join the most comprehensive and popular Angular course on Udemy, because now is the time to get started!

From Setup to Deployment, this course covers it all! You’ll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular App with Modules and Offline Compilation and much more – and in the end: You’ll learn how to deploy an application!

But that’s not all! This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course!

And if you do get stuck, you benefit from an extremely fast and friendly support – both via direct messaging or discussion. You have my word!

Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away.

Hear what my students have to say

Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! – Paul Whitehouse

The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he’s doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!

As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand.

This Course uses TypeScript

TypeScript is the main language used by the official Angular team and the language you’ll mostly see in Angular tutorials. It’s a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.

TypeScript knowledge is, however, not required – basic JavaScript knowledge is enough.

Why Angular?

Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 8 simply is the latest version of the Angular framework and simply an update to Angular 2.

Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular (=Angular 8) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular.

Get a very deep understanding of how to create Angular applications

This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.

Specifically you will learn:

  • Which architecture Angular uses
  • How to use TypeScript to write Angular applications
  • All about directives and components, including the creation of custom directives/ components
  • How databinding works
  • All about routing and handling navigation
  • What Pipes are and how to use them
  • How to access the Web (e.g. RESTful servers)
  • What dependency injection is and how to use it
  • How to use Modules in Angular
  • How to optimize your (bigger) Angular Application
  • We will build a major project in this course
  • and much more!
Table of Contents

Getting Started
1 Course Introduction
2 What is Angular?
3 Angular vs Angular 2 vs Angular 8
4 CLI Deep Dive & Troubleshooting
5 Project Setup and First App
6 Editing the First App
7 The Course Structure
8 How to get the Most out of the Course
9 What is TypeScript?
10 A Basic Project Setup using Bootstrap for Styling
11 Where to find the Course Source Code

The Basics
12 Module Introduction
13 How an Angular App gets Loaded and Started
14 Components are Important!
15 Creating a New Component
16 Understanding the Role of AppModule and Component Declaration
17 Using Custom Components
18 Creating Components with the CLI & Nesting Components
19 Working with Component Templates
20 Working with Component Styles
21 Fully Understanding the Component Selector
22 [OPTIONAL] Assignment Solution
23 What is Databinding?
24 String Interpolation
25 Property Binding
26 Property Binding vs String Interpolation
27 Event Binding
28 Bindable Properties and Events
29 Passing and Using Data with Event Binding
30 Important: FormsModule is Required for Two-Way-Binding!
31 Two-Way-Databinding
32 Combining all Forms of Databinding
33 [OPTIONAL] Assignment Solution
34 Understanding Directives
35 Using ngIf to Output Data Conditionally
36 Enhancing ngIf with an Else Condition
37 Styling Elements Dynamically with ngStyle
38 Applying CSS Classes Dynamically with ngClass
39 Outputting Lists with ngFor
40 [OPTIONAL] Assignment Solution
41 Getting the Index when using ngFor

Course Project – The Basics
42 Project Introduction
43 Planning the App
44 Installing Bootstrap Correctly
45 Setting up the Application
46 Creating the Components
47 Using the Components
48 Adding a Navigation Bar
49 Alternative Non-Collapsable Navigation Bar
50 Creating a “Recipe” Model
51 Adding Content to the Recipes Components
52 Outputting a List of Recipes with ngFor
53 Displaying Recipe Details
54 Working on the ShoppingListComponent
55 Creating an “Ingredient” Model
56 Creating and Outputting the Shopping List
57 Adding a Shopping List Edit Section
58 Wrap Up & Next Steps

59 Understanding Angular Error Messages
60 Debugging Code in the Browser Using Sourcemaps
61 Using Augury to Dive into Angular Apps

Components & Databinding Deep Dive
62 Module Introduction
63 Splitting Apps into Components
64 Property & Event Binding Overview
65 Binding to Custom Properties
66 Assigning an Alias to Custom Properties
67 Binding to Custom Events
68 Assigning an Alias to Custom Events
69 Custom Property and Event Binding Summary
70 Understanding View Encapsulation
71 More on View Encapsulation
72 Using Local References in Templates
73 @ViewChild() in Angular 8
74 Getting Access to the Template & DOM with @ViewChild
75 Projecting Content into Components with ng-content
76 Understanding the Component Lifecycle
77 Seeing Lifecycle Hooks in Action
78 Lifecycle Hooks and Template Access
79 @ContentChild() in Angular 8
80 Getting Access to ng-content with @ContentChild
81 Wrap Up
82 [OPTIONAL] Assignment Solution

Course Project – Components & Databinding
83 Introduction
84 Adding Navigation with Event Binding and ngIf
85 Passing Recipe Data with Property Binding
86 Passing Data with Event and Property Binding (Combined)
87 Make sure you have FormsModule added!
88 Allowing the User to Add Ingredients to the Shopping List

Directives Deep Dive
89 Module Introduction
90 ngFor and ngIf Recap
91 ngClass and ngStyle Recap
92 Creating a Basic Attribute Directive
93 Using the Renderer to build a Better Attribute Directive
94 More about the Renderer
95 Using HostListener to Listen to Host Events
96 Using HostBinding to Bind to Host Properties
97 Binding to Directive Properties
98 What Happens behind the Scenes on Structural Directives
99 Building a Structural Directive
100 Understanding ngSwitch

Course Project – Directives
101 Building and Using a Dropdown Directive
102 Closing the Dropdown From Anywhere

Using Services & Dependency Injection
103 Module Introduction
104 Why would you Need Services?
105 Creating a Logging Service
106 Injecting the Logging Service into Components
107 Creating a Data Service
108 Understanding the Hierarchical Injector
109 How many Instances of Service Should It Be?
110 Injecting Services into Services
111 Using Services for Cross-Component Communication
112 [OPTIONAL] Assignment Solution
113 Services in Angular 6+

Course Project – Services & Dependency Injection
114 Introduction
115 Setting up the Services
116 Managing Recipes in a Recipe Service
117 Using a Service for Cross-Component Communication
118 Adding the Shopping List Service
119 Using Services for Pushing Data from A to B
120 Adding Ingredients to Recipes
121 Passing Ingredients from Recipes to the Shopping List (via a Service)

Changing Pages with Routing
122 Module Introduction
123 Why do we need a Router?
124 Understanding the Example Project
125 Setting up and Loading Routes
126 Navigating with Router Links
127 Understanding Navigation Paths
128 Styling Active Router Links
129 Navigating Programmatically
130 Using Relative Paths in Programmatic Navigation
131 Passing Parameters to Routes
132 Fetching Route Parameters
133 Fetching Route Parameters Reactively
134 An Important Note about Route Observables
135 Passing Query Parameters and Fragments
136 Retrieving Query Parameters and Fragments
137 Practicing and some Common Gotchas
138 Setting up Child (Nested) Routes
139 Using Query Parameters – Practice
140 Configuring the Handling of Query Parameters
141 Redirecting and Wildcard Routes
142 Important: Redirection Path Matching
143 Outsourcing the Route Configuration
144 An Introduction to Guards
145 Protecting Routes with canActivate
146 Protecting Child (Nested) Routes with canActivateChild
147 Using a Fake Auth Service
148 Controlling Navigation with canDeactivate
149 Passing Static Data to a Route
150 Resolving Dynamic Data with the resolve Guard
151 Understanding Location Strategies
152 Wrap Up

Course Project – Routing
153 Planning the General Structure
154 Setting Up Routes
155 Adding Navigation to the App
156 Marking Active Routes
157 Fixing Page Reload Issues
158 Child Routes: Challenge
159 Adding Child Routing Together
160 Configuring Route Parameters
161 Passing Dynamic Parameters to Links
162 Styling Active Recipe Items
163 Adding Editing Routes
164 Retrieving Route Parameters
165 Programmatic Navigation to the Edit Page
166 One Note about Route Observables
167 Project Cleanup

Understanding Observables
168 Module Introduction
169 Analyzing Angular Observables
170 Getting Closer to the Core of Observables
171 Building a Custom Observable
172 Errors & Completion
173 Observables & You!
174 Understanding Operators
175 Subjects
176 Wrap Up
177 Useful Resources & Links

Course Project – Observables
178 Improving the Reactive Service with Observables (Subjects)
179 Changed the Subscription Name

Handling Forms in Angular Apps
180 Module Introduction
181 Why do we Need Angular’s Help?
182 Template-Driven (TD) vs Reactive Approach
183 An Example Form
184 TD: Creating the Form and Registering the Controls
185 TD: Submitting and Using the Form
186 TD: Understanding Form State
187 TD: Accessing the Form with @ViewChild
188 TD: Adding Validation to check User Input
189 Built-in Validators & Using HTML5 Validation
190 TD: Using the Form State
191 TD: Outputting Validation Error Messages
192 TD: Set Default Values with ngModel Property Binding
193 TD: Using ngModel with Two-Way-Binding
194 TD: Grouping Form Controls
195 TD: Handling Radio Buttons
196 TD: Setting and Patching Form Values
197 TD: Using Form Data
198 TD: Resetting Forms
199 Introduction to the Reactive Approach
200 Reactive: Setup
201 Reactive: Creating a Form in Code
202 Reactive: Syncing HTML and Form
203 Reactive: Submitting the Form
204 Reactive: Adding Validation
205 Reactive: Getting Access to Controls
206 Reactive: Grouping Controls
207 Reactive: Arrays of Form Controls (FormArray)
208 Reactive: Creating Custom Validators
209 Reactive: Using Error Codes
210 Reactive: Creating a Custom Async Validator
211 Reactive: Reacting to Status or Value Changes
212 Reactive: Setting and Patching Values
213 [OPTIONAL] Assignment Solution

Course Project – Forms
214 Introduction
215 TD: Adding the Shopping List Form
216 Adding Validation to the Form
217 Allowing the Selection of Items in the List
218 Loading the Shopping List Items into the Form
219 Updating existing Items
220 Resetting the Form
221 Allowing the the User to Clear (Cancel) the Form
222 Allowing the Deletion of Shopping List Items
223 Creating the Template for the (Reactive) Recipe Edit Form
224 Creating the Form For Editing Recipes
225 Syncing HTML with the Form
226 Adding Ingredient Controls to a Form Array
227 Fixing a Bug
228 Adding new Ingredient Controls
229 Validating User Input
230 Submitting the Recipe Edit Form
231 Adding a Delete and Clear (Cancel) Functionality
232 Redirecting the User (after Deleting a Recipe)
233 Adding an Image Preview
234 Providing the Recipe Service Correctly
235 Deleting Ingredients and Some Finishing Touches
236 Deleting all Items in a FormArray

Using Pipes to Transform Output
237 Introduction & Why Pipes are Useful
238 Using Pipes
239 Parametrizing Pipes
240 Where to learn more about Pipes
241 Chaining Multiple Pipes
242 Creating a Custom Pipe
243 Parametrizing a Custom Pipe
244 Example: Creating a Filter Pipe
245 Pure and Impure Pipes (or: How to “fix” the Filter Pipe)
246 Understanding the “async” Pipe

Making Http Requests
247 A New IDE
248 Module Introduction
249 How Does Angular Interact With Backends?
250 The Anatomy of a Http Request
251 Backend (Firebase) Setup
252 Sending a POST Request
253 GETting Data
254 Using RxJS Operators to Transform Response Data
255 Using Types with the HttpClient
256 Outputting Posts
257 Showing a Loading Indicator
258 Using a Service for Http Requests
259 Services & Components Working Together
260 Sending a DELETE Request
261 Handling Errors
262 Using Subjects for Error Handling
263 Using the catchError Operator
264 Error Handling & UX
265 Setting Headers
266 Adding Query Params
267 Observing Different Types of Responses
268 Changing the Response Body Type
269 Introducing Interceptors
270 Manipulating Request Objects
271 Response Interceptors
272 Multiple Interceptors
273 Wrap Up
274 Useful Resources & Links

Course Project – Http
275 Module Introduction
276 Backend (Firebase) Setup
277 Setting Up the DataStorage Service
278 Storing Recipes
279 Fetching Recipes
280 Transforming Response Data
281 Resolving Data Before Loading
282 Fixing a Bug with the Resolver

Authentication & Route Protection in Angular
283 Module Introduction
284 How Authentication Works
285 Adding the Auth Page
286 Switching Between Auth Modes
287 Handling Form Input
288 Preparing the Backend
289 Preparing the Signup Request
290 Sending the Signup Request
291 Adding a Loading Spinner & Error Handling Logic
292 Improving Error Handling
293 Sending Login Requests
294 Login Error Handling
295 Creating & Storing the User Data
296 Reflecting the Auth State in the UI
297 Adding the Token to Outgoing Requests
298 Attaching the Token with an Interceptor
299 Adding Logout
300 Adding Auto-Login
301 Adding Auto-Logout
302 Adding an Auth Guard
303 Wrap Up
304 Useful Resources & Links

Dynamic Components
305 Module Introduction
306 Adding an Alert Modal Component
307 Understanding the Different Approaches
308 Using ngIf
309 Preparing Programmatic Creation
310 Creating a Component Programmatically
311 Understanding entryComponents
312 Data Binding & Event Binding
313 Wrap Up
314 Useful Resources & Links

Angular Modules & Optimizing Angular Apps
315 Module Introduction
316 What are Modules?
317 Analyzing the AppModule
318 Getting Started with Feature Modules
319 Splitting Modules Correctly
320 Adding Routes to Feature Modules
321 Component Declarations
322 The ShoppingList Feature Module
323 Understanding Shared Modules
324 Understanding the Core Module
325 Adding an Auth Feature Module
326 Understanding Lazy Loading
327 Implementing Lazy Loading
328 Alternative Lazy Loading Syntax
329 More Lazy Loading
330 Preloading Lazy-Loaded Code
331 Modules & Services
332 Loading Services Differently
333 Ahead-of-Time Compilation
334 Wrap Up
335 Useful Resources & Links

Deploying an Angular App
336 Module Introduction
337 Deployment Preparation & Steps
338 Using Environment Variables
339 Deployment Example: Firebase Hosting
340 Server Routing vs Browser Routing

Bonus: Working with NgRx in our Project
341 Module Introduction
342 What is Application State?
343 What is NgRx?
344 Getting Started with Reducers
345 Adding Logic to the Reducer
346 Understanding & Adding Actions
347 Setting Up the NgRx Store
348 Selecting State
349 Dispatching Actions
350 Multiple Actions
351 Preparing Update & Delete Actions
352 Updating & Deleting Ingredients
353 Expanding the State
354 Managing More State via NgRx
355 Removing Redundant Component State Management
356 First Summary & Clean Up
357 One Root State
358 Setting Up Auth Reducer & Actions
359 Dispatching Auth Actions
360 Auth Finished (For Now…)
361 And Important Note on Actions
362 Exploring NgRx Effects
363 Defining the First Effect
364 Effects & Error Handling
365 Login via NgRx Effects
366 Managing UI State in NgRx
367 Finishing the Login Effect
368 Preparing Other Auth Actions
369 Adding Signup
370 Further Auth Effects
371 Adding Auto-Login with NgRx
372 Adding Auto-Logout
373 Finishing the Auth Effects
374 Using the Store Devtools
375 The Router Store
376 Getting Started with NgRx for Recipes
377 Fetching Recipe Detail Data
378 Fetching Recipes & Using the Resolver
379 Fixing the Auth Redirect
380 Update, Delete and Add Recipes
381 Storing Recipes via Effects
382 Cleanup Work
383 Wrap Up
384 Useful Resources & Links
385 MUST READ: The [LEGACY] Lectures
386 [LEGACY] Module Introduction
387 [LEGACY] Important: Angular 6, RxJS 6 and this section!
388 [LEGACY] State Challenges
389 [LEGACY] Getting Started with Reducers
390 [LEGACY] Adding Actions
391 [LEGACY] Finishing the First Reducer
392 [LEGACY] Registering the Application Store
393 [LEGACY] Selecting Data from State
394 [LEGACY] Dispatch Actions
395 [LEGACY] More Actions and Adding Ingredients
396 [LEGACY] Dispatching Update and Deleting Shopping List Actions
397 [LEGACY] Expanding App State
398 [LEGACY] Editing the Shopping-List via NgRx
399 [LEGACY] Managing all Relevant State
400 [LEGACY] Authentication and Side Effects – Introduction
401 [LEGACY] Setting up the Auth Store Files
402 [LEGACY] The Reducer
403 [LEGACY] Adding Reducer Logic & Actions
404 [LEGACY] Adjusting the App Module Setup
405 [LEGACY] Using Authentication
406 [LEGACY] Dispatch Actions
407 [LEGACY] Getting State Access in Http Interceptor
408 [LEGACY] Handling the Auth Token
409 [LEGACY] Only React to Actions Once via take(1)
410 [LEGACY] A Closer Look at Effects
411 [LEGACY] Auth Effects and Actions
412 [LEGACY] Using NgRx Effects with NgRx >= 7
413 [LEGACY] Effects – How they Work
414 [LEGACY] Adding Auth Signup
415 [LEGACY] Adding Auth Signin
416 [LEGACY] Navigation as a Side Effect
417 [LEGACY] Handling Logout via NgRx
418 [LEGACY] Additional Fixes
419 [LEGACY] Redirecting Upon Logout
420 [LEGACY] What’s Next?
421 [LEGACY] The Router Store Package
422 [LEGACY] Store Devtools
423 [LEGACY] Lazy Load and Dynamic Injection
424 [LEGACY] Adding Recipe Actions
425 [LEGACY] Adding Recipe Reducers
426 [LEGACY] Dispatching and Selecting State
427 [LEGACY] Viewing and Deleting Recipes via NgRx
428 [LEGACY] Editing and Updating Recipes via NgRx
429 [LEGACY] Recipes Side Effects – Fetching from Server
430 [LEGACY] Recipes Side Effects – Storing Recipes on Server
431 [LEGACY] Cleaning Up
432 [LEGACY] Updating to RxJS 6+
433 [LEGACY] Wrap Up
434 [LEGACY] Useful Resources & Links

Bonus: Angular Universal
435 Module Introduction
436 Important: Official Docs & Starting Project
437 Getting Started with Angular Universal
438 Working on the App Module
439 Adding a Server-Side Build Workflow
440 Adding a NodeJS Server
441 Pre-Rendering the App on the Server
442 Next Steps
443 Angular Universal Gotchas

Angular Animations
444 Making Animations Work with Angular 4+
445 Introduction
446 Setting up the Starting Project
447 Animations Triggers and State
448 Switching between States
449 Transitions
450 Advanced Transitions
451 Transition Phases
452 The “void” State
453 Using Keyframes for Animations
454 Grouping Transitions
455 Using Animation Callbacks

Adding Offline Capabilities with Service Workers
456 Module Introduction
457 Adding Service Workers
458 Caching Assets for Offline Use
459 Caching Dynamic Assets & URLs
460 Further Links & Resources

A Basic Introduction to Unit Testing in Angular Apps
461 About this Section
462 Introduction
463 Why Unit Tests?
464 Analyzing the Testing Setup (as created by the CLI)
465 Running Tests (with the CLI)
466 Adding a Component and some fitting Tests
467 Testing Dependencies: Components and Services
468 Simulating Async Tasks
469 Using “fakeAsync” and “tick”
470 Isolated vs Non-Isolated Tests
471 Further Resources & Where to Go Next

Angular Changes & New Features
472 What’s New with Angular 8?
473 What’s New & How to Update

Course Roundup
474 Course Roundup
475 Bonus: More Content!

Custom Project & Workflow Setup
476 Introduction
477 Initializing the Project
478 Setting up the Basic Project Files
479 Installing the Core Dependencies
480 Filling the Project Files with Some Life
481 index.html & Polyfills
482 Installing Development Dependencies
483 Setting up a Development Workflow
484 Updating to Angular 6 + Webpack 4
485 Finishing & Using the Development Workflow
486 Setting up a Production Workflow
487 Adding Types & Fixing Bugs
488 Finishing Touches

Bonus: TypeScript Introduction (for Angular 2 Usage)
489 Introduction
490 Using Types
491 Classes
492 Interfaces
493 Generics
494 Wrap up & Modules
495 Deep dive into TypeScript