The Modern Angular Bootcamp [2020]

The Modern Angular Bootcamp [2020]
The Modern Angular Bootcamp [2020]

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 45.5 Hours | 18.8 GB
eLearning | Skill level: All Levels

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.

What You’ll Learn

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. Sign up today, master Angular, and get a job as a Software Engineer!

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 Intro – Our First App
3 A Few Questions Answered
4 Environment Setup – Node JS
5 Environment Setup – Angular CLI
6 Environment Setup – Visual Studio Code

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Exercise! A Photo-Fetching App
209 App Overview
210 Displaying the Image
211 Refetching Data
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

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

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

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

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

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

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

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

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

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

504 Bonus!