The Modern Angular Bootcamp by Udemy
Get job ready with Angular! Understand how to build and deploy production-ready apps.
Course Highlights
- 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
Skills you will learn!
Curriculum
9 Topics
How to Get Help
Course Resources
Join Our Community!
Intro - Our First App
A Few Questions Answered
Four Major File Types
Environment Setup - Node JS
Environment Setup - Angular CLI
Environment Setup - Visual Studio Code
19 Topics
Project Overview
Starting and Stopping an Angular Project
Updating a Component Template
Event Binding Syntax
Property Binding Syntax
Interpolation Syntax
Angular vs JavaScript Design Patterns
Tracking Input State
Tracking Additional Properties
Handling Text Input
Generating a Random Password
Review on Property Binding
Adding Third Party CSS
CSS Import Statements
Adding Some Styling
Structural Directives
Deploying Angular Apps
Terminology Review
Terminology Review
18 Topics
App Overview
Project Setup
A Quick HTML Dump
Adding Static Files to Angular
Scoped CSS Files
Components in Angular
Creating Components
How Angular Creates Components
More on CSS Scoping
Tying Data to a Component
Accepting Data in a Child Component
Communicating from Parent to Child
Fixing Template References
Building Lists with NgFor
Two Notes on NgFor
Host Element Selectors
Deployment and Review
What We've Learned So Far
10 Topics
App Overview
Initial Steps
Adding CSS
IMPORTANT Info About Faker Installation
Displaying Content
Randomly Generating Text
Handling User Input
Conditional Display
Character by Character Comparison
Styling by Comparison
13 Topics
Pipes Overview
Adding an Input
Pipes in Action
A Touch of Styling
Adding a Date Picker
Formatting Dates
Displaying Currency
Formatting the Currency
Formatting Numbers
Displaying JSON
Creating Custom Pipes
Custom Arguments
Two Neat Things with Pipes
20 Topics
App Overview
App Setup
Getting Some Data
Review on NgFor
The NgClass Directive
More on NgClass
Conditionally Disabling Buttons
Changes Pages
Displaying Images
Reminder on NgIf
Multiple Directives with Ng-Container
NgSwitch
Generating Custom Directives
Accessing Elements from a Custom Directive
Communicating Properties to Directives
Intercepting a Property Assignment
Input Aliasing
Replacing NgClass
Custom Structural Directives
Context in Structural Directives
9 Topics
App Overview
Tackling Some Challenges
Modules Overview
Generating Modules
Importing and Exporting Modules
Modules Exercise
Quick Note
Modules Exercise Solution
Module Property Definitions
10 Topics
Adding Basic Routing
Routing Exercise
Exercise Solution
The RouterOutlet Element
Navigating with RouterLink
A Touch of Styling
Styling an Active Link
Adding Home and NotFound Routes
Reordering Routing Rules
Landing and NotFound Components
18 Topics
Lazy vs Eager Loading
Implementing Lazy Loading
Lazy Loading Exercise
Exercise Solution
Creating a Placeholder Component
Customizing Components
Reminder on Structural Directives
Widget Modules
Implementing a Titled Divider
Grabbing Content with NgContent
Creating a Segment Component
NgContent with Selects
Hiding Empty Elements
Building a Reusable Table
Generating and Displaying the Table
Communicating Down Table Data
Assembling the Table
Passing Down Class Names
12 Topics
Tab Based Navigation
Adding Child Navigation Routes
Understanding Child Component Routing
RouterLink Configuration
Relative RouterLink References
Alternate RouterLink Syntax
Matching Exact Paths
A Reusable Tabs Component
Views Module Exercise
Exercise Solution
Displaying a List of Statistics
Displaying a List of Items
14 Topics
The Mods Module
Modal Window Setup
More Basic Modal Setup
Natural Issues with Modal Windows
Solving the Modal Issue
Lifecycle Hooks
Hiding the Modal with NgOnDestroy
Opening the Modal
Closing the Modal
Stopping Event Bubbling
Making the Modal Reusable
Building an Accordion
Listing Accordion Elements
Expanding the Active Element
18 Topics
Intro to TypeScript
Basic Types
Type Inference
Why TypeScript at All?
TS with Functions
Difficulties with Objects
Introducing Interfaces
Classes and Properties
Public and Private
Property Assignment Shortcut
Enabling Decorator Support
Decorators
The Module System
Strict Mode
Combining Interfaces and Classes
Class Generics
Function Generics
That's a Lot of Typescript!
17 Topics
App Overview
App Architecture
Generating Services
Component Design Methodology
Handling Form Submission
Child to Parent Communication
The Wikipedia API
Notes on Services
Accessing Services
Really Weird Behavior
Where'd That Come From
Ok But Why?
Why Dependency Injection is Useful
Making HTTP Requests
Seeing the Request's Response
More Parent to Child Communication
Building the Table
6 Topics
Escaping HTML Characters
XSS Attacks
More on XSS Attacks
Adding Title Links
Another CSS Gotcha
Last Bit of Styling
17 Topics
Notes on RxJs
A Quick JS Example
Adding RxJs Terminology
Creating an Observable
Implementing the Processing Pipeline
More Processing!
Adding an Observer
Operator Groups
Specific Operators
Low Level Observables
Alternative Observer Syntax
Unicast Observables
More on Unicast Observables
Multicast Observables
Multicast in Action
Hot vs Cold Observables
RxJs Terminology
6 Topics
RxJs in an Angular World
Applying TypeScript to RxJs
Generics with RxJs
Using TypeScript to Catch Errors
TypeScript is Smart
Summary
11 Topics
App Overview
App Architecture Design
API Signup
HTTP Module Hookup
HTTP Dependency Injection
Making the Request
Displaying the Component
Making the Request
Using a Generic Type
Displaying the Image
Refetching Data
22 Topics
App Overview
Reactive Forms vs Template Forms
Creating a Form Instance
Binding a FormGroup to a Form
Validating Fields
Finding Validation Errors
Nasty Error Handling
Showing and Hiding Validation Messages
Making a Reusable Input
Adding Message Cases
Changing Styling on Validation Errors
Adding Additional Inputs
Handling Form Submission
Additional Validations
Input Masking
Hijacking Form Control Values
Inserting Extra Characters
Reformatting the Input
Using a Library for Masking
Resetting a Form
A Touch of Styling
Adding a Credit Card
8 Topics
App Overview
Basic Template Form Setup
Two Way Binding Syntax
Differences Between Template and Reactive Forms
Validation Around Template Forms
Conditional Validation
Handling Form Submission
Adding Styling and Wrapup
17 Topics
App Overview
App Setup
Possible Design Approaches
Displaying Form Values
Adding Custom Validation
Extracting Custom Validation Logic
Making Validators Reusable
RxJs with Reactive Forms
Handling Correct Answers
The Delay Operator
Adding a Statistic
RxJs Solution
A Touch of Styling
Helping the User Along
Accessing FormGroups from Custom Directives
Detecting Changes
Applying a Class Name
20 Topics
App Overview
The API Server
Contacting the Backend API
Cookie Based Authentication
File Generation
Navigation Reminder
Adding a Signup Form
Adding Basic Styling
Username and Password Validation
Writing Custom Validators
Connecting Custom Validators
Implementing Async Validators
Nasty Async Validators
Understanding Async Validators
Handling Errors from Async Validation
Building an Auth Service
Another Reusable Input
Robust Error Handling
Customizing Input Type
Fixing a Few Odds and Ends
26 Topics
Signup Process Overview
Making the Signup Request
Cleaning up the Auth Service
Handling Signup Errors
Generic Error Handling
Adding a Navigation Header
Maintaining Authentication State
Oh No More RxJs
Using BehaviorSubjects
The Async Pipe
Exact Active Links
Checking Auth Status
A Gotcha Around the HttpClient
HTTP Interceptors
Wiring up an Interceptor
Modifying Outgoing Requests
Other Uses of Interceptors
A Little Record Keeping
Adding Sign Out
Automated Signouts
Programmatic Navigation
Building the Sign In Flow
Sign In Authentication
Showing Authentication Errors
Inbox Module Design
Navigation on Authentication
5 Topics
Restricting Routing with Guards
Issues With Guards
A Solution to the Guard with RxJs
Implementing Our RxJs Solution
Navigation on Failing a Guard
36 Topics
Generating Inbox Components
Retrieving Emails
Adding Email Fetching to the Service
Connecting the Service
Rendering a List of Emails
Child Route Navigation
Relative Links with Router Link
Styling the Selected Email
Placeholder Markup
Extracting URL Params
Accessing Route Information
Snapshot vs Observable Route Params
Issues with Nested Subscribes
Canceling Previous Email Requests
Handling Undefined Data
Reusable Data Fetching with Resolvers
Using a Resolver
Communicating Data Out of a Resolver
Error Handling with Resolvers
Showing Email HTML
Component Reuse in Email Creation
A Reusable Modal
Some More Modal Implementation
Where to Place the Modal?
Toggling Modal Visibility
Providing a Form Default Values
Displaying Email Inputs
Adding Form Validation
Displaying Textarea instead of Text Input
Capturing the Username
Submitting a New Email
Sending Original Email
Replying to Emails
Formatting Reply Emails
Sending Replies
Quick Bug Fix! (Final Lecture)
85 Topics
Type Annotations and Inference
Annotations and Variables
Object Literal Annotations
Annotations Around Functions
Understanding Inference
The Any Type
Fixing the "Any" Type
Delayed Initialization
When Inference Doesn't Work
Annotations Around Functions
Inference Around Functions
Annotations for Anonymous Functions
Void and Never
Destructuring with Annotations
Annotations and Objects
Arrays in TypeScript
Why Typed Arrays?
Multiple Types in Arrays
When to Use Typed Arrays
Tuples in TypeScript
Tuples in Action
Why Tuples?
Interfaces
Long Type Annotations
Fixing Annotations With Interfaces
Syntax Around Interfaces
Functions in Interfaces
Code Reuse with Interfaces
General Plan with Interfaces
Classes
Basic Inheritance
Class Method Modifiers
Fields in Classes
Fields with Inheritance
Where to Use Classes
Updated Parcel Instructions
App Overview
Bundling with Parcel
Project Structure
IMPORTANT Info About Faker Installation
Generating Random Data
Type Definition Files
Using Type Definition Files
Export Statements in TypeScript
Defining a Company
A Note on API Keys
Adding Google Maps Support
Required Update for New @types Library
Google Maps Integration with TypeScript
Exploring Type Definition Files
Hiding Functionality
Why Use Private Modifiers? Here's Why
Adding Markers
Duplicate Code
One Possible Solution
Restricting Access with Interfaces
Implicit Type Checks
Showing Popup Windows
Updating Interface Definitions
Optional Implements Clauses
App Wrapup
App Overview
Configuring the TS Compiler
Concurrently Compilation and Execution
A Simple Sorting Algorithm
Sorter Scaffolding
Sorting Implementation
Two Huge Issues
TypeScript is Really Smart
Type Guards
Why Is This Bad?
Extracting Key Logic
Seperating Swapping and Comparison
The Big Reveal
Interface Definition
Sorting Abritrary Collections
Linked List Implementation
Completed Linked List Code
Just... One... More... Fix...
Integrating the Sort Method
Issues with Inheritance
Abstract Classes
Abstract Classes in Action
Solving All Our Issues with Abstract Classes
Interfaces vs Abstract Classes
69 Topics
IMPORTANT - Unfinished Application
App Overview
Modules Overview
Generating Modules
Module Properties
Connecting Modules
Examining the API
Reading the Users Location
The Angular Way
Geolocation in an Observable
Connecting the Service to a Component
Transforming Coordinates to Query Params
SwitchMap vs MergeMap
But Why SwitchMap?
Making a Request
Further Processing
Generics on HTTP Requests
Filter MergeMap Pluck Operators
Map and toArray Operators
Accessing Data in the Template
Pipes Overview
Data Pipes
The Async Pipe
Adding Bootstrap
Styling the Forecast Component
Reminder on the Share Operator
How to Structure Services
Generating the Notification Module
Notifications Service Design
Introducing Subjects
Subject Variations
More Design on Notifications
Building a Command Structure
The Scan Operator
Scan in the Service
Fixing a Few Errors
Replay Subject in Action
A Preferred Solution
Displaying Messages
Automatic Timeout
Notification Styling
Clearing Messages
When to Add Notifications
Showing Success and Errors
CatchError and ThrowError
The Retry Operator
Service Design
More on API Pagination
Service Generation
Subject Declarations
Building the HTTP Params
Applying a Type to the Response
Calculating Pages Available
Wrapping the Input Subject
A Better Interface
The Article List Component
Accessing the Data
Rendering Articles
Fetching a Page
Fixing Some Styling
Creating Custom Pipes
Custom Pipe Arguments
The Shared Module Pattern
Connecting the Paginator
Paginator Strategy
Paginator Internals
Styling the Current Page
Parent to Child Communication
REMINDER - Unfinished Application
1 Topic
Bonus!
The Modern Angular Bootcamp
Related Angular Courses
Thank You!
Your review has been submitted successfully.