The Modern Angular Bootcamp

The Modern Angular Bootcamp

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 45h 19m | 13.1 GB

Get job ready with Angular! Understand how to build, test, and deploy production-ready apps.

If you want to build large, scalable apps, Angular is the Javascript framework to learn!

Angular has been under development by Google for nearly a full decade. It has one purpose: scale up to gracefully handle the largest and most complex web apps around. If you want to build a big app, Angular is the way to go. Every other course online around Angular shows you how to use the basic syntax and features of Angular, but only this course will show you how to build large, professional projects using Angular.

Mastering Angular by reading the documentation alone is challenging. The official documentation always offers multiple ways to achieve any simple task, but never clarifies what the best way to do something is. In this course, you will gain a fundamental understanding of the best way to achieve any goal with Angular, along with an explanation of the pros and cons of each possible approach.

Top companies are hungry for Angular developers. You’ve probably heard of the crazy salaries being offered for front-end developers. The average starting salary for an Angular developer is $115k USD. That is not an exaggeration, it is not a joke – this is how badly employers are looking for Angular developers. You can be the latest hire at a new tech startup, a fantastic engineer with amazing skills in Angular! All you have to do to earn this salary is understand Angular, and this course will help you do that.

Learning Angular will make you a better software engineer. Here’s the little secret of Angular that nobody tells you about: Angular is really three different topics in one! You’ve got Angular itself, Typescript, and RxJs. Learning Angular isn’t just about Angular, its about Typescript and RxJs as well! Typescript’s goal is to help you catch errors quickly during development, rather than when you are running your app, while RxJs has a goal of helping you manage data transparently throughout your application. Understanding Typescript and RxJS will undoubtedly help you become a more knowledgeable, productive, and successful engineer. Note that you do not need any prior experience with Typescript or RxJs to take this course – I will teach you everything you need to know!

Planning on building your own apps? This course will give you a countless number of reusable code snippets that you can utilize on your own personal projects, saving you valuable time. Angular is all about code reusability, and this course will get you started on the right track. Not only will you get incredibly reusable code, but you’ll also learn to integrate multiple different CSS frameworks with Angular, so you can get some custom styling that suits the needs of your app.

Learn from someone who has worked with Angular since its 1.0 release. I have worked with Angular since version 1.0, released many years ago. I’ve seen an incredible number of design patterns and approaches, and I’ve narrowed down that list to the critical topics that you need to understand. Rather than showing you every last tiny feature of Angular, you’ll learn only the best way to achieve any given task.

But don’t just take my word for it – check out the reviews for this course! You’ll see that other engineers – just like yourself – have had great success and acquired a new understanding of how to build large web apps using Angular.

This is a long course, with just about every fact about Angular you could ever hope to know. Here’s a brief subset of the topics you’ll cover:

  • Master the fundamentals of Angular, including components, services, pipes, and directives
  • Create reusable components that you can plug-and-play to create dynamic, complex apps
  • Understand how to design and architect large apps, with a careful eye on code maintainability
  • Build modular apps that can easily be updated and changed
  • Get a handle on performance by leveraging lazy loading, supercharging the speed of your apps
  • Take a look at Typescript, which will help you write perfect code the first time, rather than encountering errors in the browser
  • Use RxJs to declaratively manage data throughout your app, leveraging built-in functions to transform your data
  • Test your code using Angular’s excellent testing framework
  • Connect to backend databases like MySQL, Postgres, or MS SQL Server to add data to your app
  • Understand how to handle security in your Angular code
  • …And so much more!

This course is the resource that I wish I had when I was learning Angular – a course that is up-to-date, complete, and full of practical examples. I learned Angular years ago before any courses like this existed. Now you can learn at 10x the speed I did.

What you’ll learn

  • Build amazing single page applications with Angular and Typescript
  • Master fundamental concepts behind structuring Angular applications
  • Realize the power of building composable components
  • Be the engineer who explains how Angular works to everyone else, because you know the fundamentals so well
  • Build a portfolio of projects to show any potential employer
  • Architect large apps effectively using Typescript + Angular’s Module system
  • Handle and process data declaratively using RxJs
  • Leverage Angular’s built in testing framework to make sure your code works correctly
Table of Contents

Welcome Start Here
1 How to Get Help
2 Join Our Community
3 Course Resources
4 Intro – Our First App
5 A Few Questions Answered
6 Environment Setup – Node JS
7 Environment Setup – Angular CLI
8 Environment Setup – Visual Studio Code

Understanding Angular Template Syntax
9 Project Overview
10 Starting and Stopping an Angular Project
11 Updating a Component Template
12 Event Binding Syntax
13 Property Binding Syntax
14 Interpolation Syntax
15 Angular vs JavaScript Design Patterns
16 Tracking Input State
17 Tracking Additional Properties
18 Handling Text Input
19 Generating a Random Password
20 Review on Property Binding
21 Adding Third Party CSS
22 CSS Import Statements
23 Adding Some Styling
24 Structural Directives
25 Deploying Angular Apps
26 Terminology Review

Building Components
27 App Overview
28 Project Setup
29 A Quick HTML Dump
30 Adding Static Files to Angular
31 Scoped CSS Files
32 Components in Angular
33 Creating Components
34 How Angular Creates Components
35 More on CSS Scoping
36 Tying Data to a Component
37 Accepting Data in a Child Component
38 Communicating from Parent to Child
39 Fixing Template References
40 Building Lists with NgFor
41 Two Notes on NgFor
42 Host Element Selectors
43 Deployment and Review

Exercise Building a Typing Game
44 App Overview
45 Initial Steps
46 Adding CSS
47 Displaying Content
48 Randomly Generating Text
49 Handling User Input
50 Conditional Display
51 Character by Character Comparison
52 Styling by Comparison

Mastering Pipes
53 Pipes Overview
54 Adding an Input
55 Pipes in Action
56 A Touch of Styling
57 Adding a Date Picker
58 Formatting Dates
59 Displaying Currency
60 Formatting the Currency
61 Formatting Numbers
62 Displaying JSON
63 Creating Custom Pipes
64 Custom Arguments
65 Two Neat Things with Pipes

Directives in Angular
66 App Overview
67 App Setup
68 Getting Some Data
69 Review on NgFor
70 The NgClass Directive
71 More on NgClass
72 Conditionally Disabling Buttons
73 Changes Pages
74 Displaying Images
75 Reminder on NgIf
76 Multiple Directives with Ng-Container
77 NgSwitch
78 Generating Custom Directives
79 Accessing Elements from a Custom Directive
80 Communicating Properties to Directives
81 Intercepting a Property Assignment
82 Input Aliasing
83 Replacing NgClass
84 Custom Structural Directives
85 Context in Structural Directives

The Module System
86 App Overview
87 Tackling Some Challenges
88 Modules Overview
89 Generating Modules
90 Importing and Exporting Modules
91 Modules Exercise
92 Quick Note
93 Modules Exercise Solution
94 Module Property Definitions

Routing and Navigation Between Pages
95 Adding Basic Routing
96 Routing Exercise
97 Exercise Solution
98 The RouterOutlet Element
99 Navigating with RouterLink
100 A Touch of Styling
101 Styling an Active Link
102 Adding Home and NotFound Routes
103 Reordering Routing Rules
104 Landing and NotFound Components

Lazy Loading with Modules
105 Lazy vs Eager Loading
106 Implementing Lazy Loading
107 Lazy Loading Exercise
108 Exercise Solution
109 Creating a Placeholder Component
110 Customizing Components
111 Reminder on Structural Directives
112 Widget Modules
113 Implementing a Titled Divider
114 Grabbing Content with NgContent
115 Creating a Segment Component
116 NgContent with Selects
117 Hiding Empty Elements
118 Building a Reusable Table
119 Generating and Displaying the Table
120 Communicating Down Table Data
121 Assembling the Table
122 Passing Down Class Names

Advanced Component Routing
123 Tab Based Navigation
124 Adding Child Navigation Routes
125 Understanding Child Component Routing
126 RouterLink Configuration
127 Relative RouterLink References
128 Alternate RouterLink Syntax
129 Matching Exact Paths
130 A Reusable Tabs Component
131 Views Module Exercise
132 Exercise Solution
133 Displaying a List of Statistics
134 Displaying a List of Items

Advanced Component Reusability + Hooks
135 The Mods Module
136 Modal Window Setup
137 More Basic Modal Setup
138 Natural Issues with Modal Windows
139 Solving the Modal Issue
140 Lifecycle Hooks
141 Hiding the Modal with NgOnDestroy
142 Opening the Modal
143 Closing the Modal
144 Stopping Event Bubbling
145 Making the Modal Reusable
146 Building an Accordion
147 Listing Accordion Elements
148 Expanding the Active Element

A Typescript Overview
149 Intro to TypeScript
150 Basic Types
151 Type Inference
152 Why TypeScript at All
153 TS with Functions
154 Difficulties with Objects
155 Introducing Interfaces
156 Classes and Properties
157 Public and Private
158 Property Assignment Shortcut
159 Enabling Decorator Support
160 Decorators
161 The Module System
162 Strict Mode
163 Combining Interfaces and Classes
164 Class Generics
165 Function Generics

Handling Data and HTTP Requests
166 App Overview
167 App Architecture
168 Generating Services
169 Component Design Methodology
170 Handling Form Submission
171 Child to Parent Communication
172 The Wikipedia API
173 Notes on Services
174 Accessing Services
175 Really Weird Behavior
176 Where’d That Come From
177 Ok, But Why
178 Why Dependency Injection is Useful
179 Making HTTP Requests
180 Seeing the Request’s Response
181 More Parent to Child Communication
182 Building the Table

App Security in Angular
183 Escaping HTML Characters
184 XSS Attacks
185 More on XSS Attacks
186 Adding Title Links
187 Another CSS Gotcha
188 Last Bit of Styling

RxJs From the Fundamentals
189 Notes on RxJs
190 A Quick JS Example
191 Adding RxJs Terminology
192 Creating an Observable
193 Implementing the Processing Pipeline
194 More Processing
195 Adding an Observer
196 Operator Groups
197 Specific Operators
198 Low Level Observables
199 Alternative Observer Syntax
200 Unicast Observables
201 More on Unicast Observables
202 Multicast Observables
203 Multicast in Action
204 Hot vs Cold Observables

Bonus – Typescript + RxJs
205 RxJs in an Angular World
206 Applying TypeScript to RxJs
207 Generics with RxJs
208 Using TypeScript to Catch Errors
209 TypeScript is Smart
210 Summary

Exercise A Photo-Fetching App
211 App Overview
212 App Architecture Design
213 API Signup
214 HTTP Module Hookup
215 HTTP Dependency Injection
216 Making the Request
217 Displaying the Component
218 Making the Request
219 Using a Generic Type
220 Displaying the Image
221 Refetching Data

Credit Card Payments with Reactive Forms
222 App Overview
223 Reactive Forms vs Template Forms
224 Creating a Form Instance
225 Binding a FormGroup to a Form
226 Validating Fields
227 Finding Validation Errors
228 Nasty Error Handling
229 Showing and Hiding Validation Messages
230 Making a Reusable Input
231 Adding Message Cases
232 Changing Styling on Validation Errors
233 Adding Additional Inputs
234 Handling Form Submission
235 Additional Validations
236 Input Masking
237 Hijacking Form Control Values
238 Inserting Extra Characters
239 Reformatting the Input
240 Using a Library for Masking
241 Resetting a Form
242 A Touch of Styling
243 Adding a Credit Card

Simple Data Entry with Template Forms
244 App Overview
245 Basic Template Form Setup
246 Two Way Binding Syntax
247 Differences Between Template and Reactive Forms
248 Validation Around Template Forms
249 Conditional Validation
250 Handling Form Submission
251 Adding Styling and Wrapup

Build a Fast-Paced Math Game
252 App Overview
253 App Setup
254 Possible Design Approaches
255 Displaying Form Values
256 Adding Custom Validation
257 Extracting Custom Validation Logic
258 Making Validators Reusable
259 RxJs with Reactive Forms
260 Handling Correct Answers
261 The Delay Operator
262 Adding a Statistic
263 RxJs Solution
264 A Touch of Styling
265 Helping the User Along
266 Accessing FormGroups from Custom Directives
267 Detecting Changes
268 Applying a Class Name

Custom Validators
269 App Overview
270 The API Server
271 Contacting the Backend API
272 Cookie Based Authentication
273 File Generation
274 Navigation Reminder
275 Adding a Signup Form
276 Adding Basic Styling
277 Username and Password Validation
278 Writing Custom Validators
279 Connecting Custom Validators
280 Implementing Async Validators
281 Nasty Async Validators
282 Understanding Async Validators
283 Handling Errors from Async Validation
284 Building an Auth Service
285 Another Reusable Input
286 Robust Error Handling
287 Customizing Input Type
288 Fixing a Few Odds and Ends

Handling Authentication
289 Signup Process Overview
290 Making the Signup Request
291 Cleaning up the Auth Service
292 Handling Signup Errors
293 Generic Error Handling
294 Adding a Navigation Header
295 Maintaining Authentication State
296 Oh No, More RxJs
297 Using BehaviorSubjects
298 The Async Pipe
299 Exact Active Links
300 Checking Auth Status
301 A Gotcha Around the HttpClient
302 HTTP Interceptors
303 Wiring up an Interceptor
304 Modifying Outgoing Requests
305 Other Uses of Interceptors
306 A Little Record Keeping
307 Adding Sign Out
308 Automated Signouts
309 Programmatic Navigation
310 Building the Sign In Flow
311 Sign In Authentication
312 Showing Authentication Errors
313 Inbox Module Design
314 Navigation on Authentication

More on Angular App Security
315 Restricting Routing with Guards
316 Issues With Guards
317 A Solution to the Guard with RxJs
318 Implementing Our RxJs Solution
319 Navigation on Failing a Guard

Build a Real Email Client
320 Generating Inbox Components
321 Retrieving Emails
322 Adding Email Fetching to the Service
323 Connecting the Service
324 Rendering a List of Emails
325 Child Route Navigation
326 Relative Links with Router Link
327 Styling the Selected Email
328 Placeholder Markup
329 Extracting URL Params
330 Accessing Route Information
331 Snapshot vs Observable Route Params
332 Issues with Nested Subscribes
333 Canceling Previous Email Requests
334 Handling Undefined Data
335 Reusable Data Fetching with Resolvers
336 Using a Resolver
337 Communicating Data Out of a Resolver
338 Error Handling with Resolvers
339 Showing Email HTML
340 Component Reuse in Email Creation
341 A Reusable Modal
342 Some More Modal Implementation
343 Where to Place the Modal
344 Toggling Modal Visibility
345 Providing a Form Default Values
346 Displaying Email Inputs
347 Adding Form Validation
348 Displaying Textarea instead of Text Input
349 Capturing the Username
350 Submitting a New Email
351 Sending Original Email
352 Replying to Emails
353 Formatting Reply Emails
354 Sending Replies
355 Quick Bug Fix

TypeScript – A DEEP Dive
356 Type Annotations and Inference
357 Annotations and Variables
358 Object Literal Annotations
359 Annotations Around Functions
360 Understanding Inference
361 The Any Type
362 Fixing the Any Type
363 Delayed Initialization
364 When Inference Doesn’t Work
365 Annotations Around Functions
366 Inference Around Functions
367 Annotations for Anonymous Functions
368 Void and Never
369 Destructuring with Annotations
370 Annotations and Objects
371 Arrays in TypeScript
372 Why Typed Arrays
373 Multiple Types in Arrays
374 When to Use Typed Arrays
375 Tuples in TypeScript
376 Tuples in Action
377 Why Tuples
378 Interfaces
379 Long Type Annotations
380 Fixing Annotations With Interfaces
381 Syntax Around Interfaces
382 Functions in Interfaces
383 Code Reuse with Interfaces
384 General Plan with Interfaces
385 Classes
386 Basic Inheritance
387 Class Method Modifiers
388 Fields in Classes
389 Fields with Inheritance
390 Where to Use Classes
391 App Overview
392 Parcel in Action
393 Project Structure
394 Generating Random Data
395 Type Definition Files
396 Using Type Definition Files
397 Export Statements in TypeScript
398 Defining a Company
399 A Note on API Keys
400 Adding Google Maps Support
401 Google Maps Integration with TypeScript
402 Exploring Type Definition Files
403 Hiding Functionality
404 Why Use Private Modifiers Here’s Why
405 Adding Markers
406 Duplicate Code
407 One Possible Solution
408 Restricting Access with Interfaces
409 Implicit Type Checks
410 Showing Popup Windows
411 Updating Interface Definitions
412 Optional Implements Clauses
413 App Wrapup
414 App Overview
415 Configuring the TS Compiler
416 Concurrently Compilation and Execution
417 A Simple Sorting Algorithm
418 Sorter Scaffolding
419 Sorting Implementation
420 Two Huge Issues
421 TypeScript is Really Smart
422 Type Guards
423 Why Is This Bad
424 Extracting Key Logic
425 Seperating Swapping and Comparison
426 The Big Reveal
427 Interface Definition
428 Sorting Abritrary Collections
429 Linked List Implementation
430 Completed Linked List Code
431 Just… One… More… Fix
432 Integrating the Sort Method
433 Issues with Inheritance
434 Abstract Classes
435 Abstract Classes in Action
436 Solving All Our Issues with Abstract Classes
437 Interfaces vs Abstract Classes

A Multi-Feature Landing Page App
438 NOTE – Unfinished App
439 App Overview
440 Modules Overview
441 Generating Modules
442 Module Properties
443 Connecting Modules
444 Examining the API
445 Reading the Users Location
446 The Angular Way
447 Geolocation in an Observable
448 Connecting the Service to a Component
449 Transforming Coordinates to Query Params
450 SwitchMap vs MergeMap
451 But Why SwitchMap
452 Making a Request
453 Further Processing
454 Generics on HTTP Requests
455 Filter, MergeMap, Pluck Operators
456 Map and toArray Operators
457 Accessing Data in the Template
458 Pipes Overview
459 Data Pipes
460 The Async Pipe
461 Adding Bootstrap
462 Styling the Forecast Component
463 Reminder on the Share Operator
464 How to Structure Services
465 Generating the Notification Module
466 Notifications Service Design
467 Introducing Subjects
468 Subject Variations
469 More Design on Notifications
470 Building a Command Structure
471 The Scan Operator
472 Scan in the Service
473 Fixing a Few Errors
474 Replay Subject in Action
475 A Preferred Solution
476 Displaying Messages
477 Automatic Timeout
478 Notification Styling
479 Clearing Messages
480 When to Add Notifications
481 Showing Success and Errors
482 CatchError and ThrowError
483 The Retry Operator
484 Service Design
485 More on API Pagination
486 Service Generation
487 Subject Declarations
488 Building the HTTP Params
489 Applying a Type to the Response
490 Calculating Pages Available
491 Wrapping the Input Subject
492 A Better Interface
493 The Article List Component
494 Accessing the Data
495 Rendering Articles
496 Fetching a Page
497 Fixing Some Styling
498 Creating Custom Pipes
499 Custom Pipe Arguments
500 The Shared Module Pattern
501 Connecting the Paginator
502 Paginator Strategy
503 Paginator Internals
504 Styling the Current Page
505 Parent to Child Communication

506 Bonus