Angular 8 Table of Content


Table of Content
 


Getting Started
  • Course Introduction
  • What is Angular?
  • Angular vs Angular 2 vs Angular 8
  • Project Setup and First App
  • Editing the First App
  • The Course Structure
  • How to get the Most out of the Course
  • What is TypeScript?
  • A Basic Project Setup using Bootstrap for Styling
The Basics
  • Module Introduction
  • How an Angular App gets Loaded and Started
  • Components are Important!
  • Creating a New Component
  • Understanding the Role of AppModule and Component Declaration
  • Using Custom Components
  • Creating Components with the CLI & Nesting Components
  • Working with Component Templates
  • Working with Component Styles
  • Fully Understanding the Component Selector
  • Assignment Solution
  • What is Databinding?
  • String Interpolation
  • Property Binding
  • Property Binding vs String Interpolation
  • Event Binding
  • Passing and Using Data with Event Binding
  • Two-Way-Databinding
  • Combining all Forms of Databinding
  • Assignment Solution
  • Understanding Directives
  • Using ngIf to Output Data Conditionally
  • Enhancing ngIf with an Else Condition
  • Styling Elements Dynamically with ngStyle
  • Applying CSS Classes Dynamically with ngClass
  • Outputting Lists with ngFor
  • Assignment Solution
  • Getting the Index when using ngFor
Course Project - The Basics
  • Project Introduction
  • Planning the App
  • Setting up the Application
  • Creating the Components
  • Using the Components
  • Adding a Navigation Bar
  • Creating a "Recipe" Model
  • Adding Content to the Recipes Components
  • Outputting a List of Recipes with ngFor
  • Displaying Recipe Details
  • Working on the ShoppingListComponent
  • Creating an "Ingredient" Model
  • Creating and Outputting the Shopping List
  • Adding a Shopping List Edit Section
  • Wrap Up & Next Steps
Debugging
  • Understanding Angular Error Messages
  • Debugging Code in the Browser Using Sourcemaps
  • Using Augury to Dive into Angular Apps
Components & Databinding Deep Dive
  • Module Introduction
  • Splitting Apps into Components
  • Property & Event Binding Overview
  • Binding to Custom Properties
  • Assigning an Alias to Custom Properties
  • Binding to Custom Events
  • Assigning an Alias to Custom Events
  • Custom Property and Event Binding Summary
  • Understanding View Encapsulation
  • More on View Encapsulation
  • Using Local References in Templates
  • Getting Access to the Template & DOM with @ViewChild
  • Projecting Content into Components with ng-content
  • Understanding the Component Lifecycle
  • Seeing Lifecycle Hooks in Action
  • Lifecycle Hooks and Template Access
  • Getting Access to ng-content with @ContentChild
  • Wrap Up
  • Assignment Solution
Course Project - Components & Databinding
  • Introduction
  • Adding Navigation with Event Binding and ngIf
  • Passing Recipe Data with Property Binding
  • Passing Data with Event and Property Binding (Combined)
  • Allowing the User to Add Ingredients to the Shopping List
Directives Deep Dive
  • Module Introduction
  • ngFor and ngIf Recap
  • ngClass and ngStyle Recap
  • Creating a Basic Attribute Directive
  • Using the Renderer to build a Better Attribute Directive
  • Using HostListener to Listen to Host Events
  • Using HostBinding to Bind to Host Properties
  • Binding to Directive Properties
  • What Happens behind the Scenes on Structural Directives?
  • Building a Structural Directive
  • Understanding ngSwitch
Course Project – Directives
  • Building and Using a Dropdown Directive
Using Services & Dependency Injection
  • Module Introduction
  • Why would you Need Services?
  • Creating a Logging Service
  • Injecting the Logging Service into Components
  • Creating a Data Service
  • Understanding the Hierarchical Injector
  • How many Instances of Service Should It Be?
  • Injecting Services into Services
  • Using Services for Cross-Component Communication
  • Assignment Solution
Course Project - Services & Dependency Injection
  • Introduction
  • Setting up the Services
  • Managing Recipes in a Recipe Service
  • Using a Service for Cross-Component Communication
  • Adding the Shopping List Service
  • Using Services for Pushing Data from A to B
  • Adding Ingredients to Recipes
  • Passing Ingredients from Recipes to the Shopping List (via a Service)
Changing Pages with Routing
  • Module Introduction
  • Why do we need a Router?
  • Setting up and Loading Routes
  • Navigating with Router Links
  • Understanding Navigation Paths
  • Styling Active Router Links
  • Navigating Programmatically
  • Using Relative Paths in Programmatic Navigation
  • Passing Parameters to Routes
  • Fetching Route Parameters
  • Fetching Route Parameters Reactively
  • An Important Note about Route Observables
  • Passing Query Parameters and Fragments
  • Retrieving Query Parameters and Fragments
  • Practicing and some Common Gotchas
  • Setting up Child (Nested) Routes
  • Using Query Parameters – Practice
  • Configuring the Handling of Query Parameters
  • Redirecting and Wildcard Routes
  • Outsourcing the Route Configuration
  • An Introduction to Guards
  • Protecting Routes with canActivate
  • Protecting Child (Nested) Routes with canActivateChild
  • Using a Fake Auth Service
  • Controlling Navigation with canDeactivate
  • Passing Static Data to a Route
  • Resolving Dynamic Data with the resolve Guard
  • Understanding Location Strategies
  • Wrap Up
Course Project – Routing
  • Planning the General Structure
  • Setting up Routes
  • Adding Navigation to the App
  • Marking Active Routes
  • Fixing Page Reload Issues
  • Child Routes: Challenge
  • Adding Child Routing Together
  • Configuring Route Parameters
  • Passing Dynamic Parameters to Links
  • Styling Active Recipe Items
  • Adding Editing Routes
  • Retrieving Route Parameters
  • Programmatic Navigation to the Edit Page
  • One Note about Route Observables
Understanding Observables
  • Module Introduction
  • Analyzing Angular Observables
  • Getting Closer to the Core of Observables
  • Building a Custom Observable
  • Errors & Completion
  • Observables & You!
  • Understanding Operators
  • Subjects
  • Wrap Up
Course Project – Observables
  • Improving the Reactive Service with Observables (Subjects)
Handling Forms in Angular Apps
  • Module Introduction
  • Why do we Need Angular's Help?
  • Template-Driven (TD) vs Reactive Approach
  • An Example Form
  • TD: Creating the Form and Registering the Controls
  • TD: Submitting and Using the Form
  • TD: Understanding Form State
  • TD: Accessing the Form with @ViewChild
  • TD: Adding Validation to check User Input
  • TD: Using the Form State
  • TD: Outputting Validation Error Messages
  • TD: Set Default Values with ngModel Property Binding
  • TD: Using ngModel with Two-Way-Binding
  • TD: Grouping Form Controls
  • TD: Handling Radio Buttons
  • TD: Setting and Patching Form Values
  • TD: Using Form Data
  • TD: Resetting Forms
  • Introduction to the Reactive Approach
  • Reactive: Setup
  • Reactive: Creating a Form in Code
  • Reactive: Syncing HTML and Form
  • Reactive: Submitting the Form
  • Reactive: Adding Validation
  • Reactive: Getting Access to Controls
  • Reactive: Grouping Controls
  • Reactive: Arrays of Form Controls (FormArray)
  • Reactive: Creating Custom Validators
  • Reactive: Using Error Codes
  • Reactive: Creating a Custom Async Validator
  • Reactive: Reacting to Status or Value Changes
  • Reactive: Setting and Patching Values
  • Assignment Solution
Course Project – Forms
  • Introduction
  • TD: Adding the Shopping List Form
  • Adding Validation to the Form
  • Allowing the Selection of Items in the List
  • Loading the Shopping List Items into the Form
  • Updating existing Items
  • Resetting the Form
  • Allowing the the User to Clear (Cancel) the Form
  • Allowing the Deletion of Shopping List Items
  • Creating the Template for the (Reactive) Recipe Edit Form
  • Creating the Form for Editing Recipes
  • Syncing HTML with the Form
  • Adding Ingredient Controls to a Form Array
  • Adding new Ingredient Controls
  • Validating User Input
  • Submitting the Recipe Edit Form
  • Adding a Delete and Clear (Cancel) Functionality
  • Redirecting the User (after Deleting a Recipe)
  • Adding an Image Preview
  • Providing the Recipe Service Correctly
  • Deleting Ingredients and Some Finishing Touches
Using Pipes to Transform Output
  • Introduction & Why Pipes are Useful
  • Using Pipes
  • Parametrizing Pipes
  • Where to learn more about Pipes
  • Chaining Multiple Pipes
  • Creating a Custom Pipe
  • Parametrizing a Custom Pipe
  • Example: Creating a Filter Pipe
  • Pure and Impure Pipes (or: How to "fix" the Filter Pipe)
  • Understanding the "async" Pipe
Making Http Requests
  • A New IDE
  • Module Introduction
  • How Does Angular Interact with Backends?
  • The Anatomy of a Http Request
  • Backend (Firebase) Setup
  • Sending a POST Request
  • Getting Data
  • Using RxJS Operators to Transform Response Data
  • Using Types with the HttpClient
  • Outputting Posts
  • Showing a Loading Indicator
  • Using a Service for Http Requests
  • Services & Components Working Together
  • Sending a DELETE Request
  • Handling Errors
  • Using Subjects for Error Handling
  • Using the catchError Operator
  • Error Handling & UX
  • Setting Headers
  • Adding Query Params
  • Observing Different Types of Responses
  • Changing the Response Body Type
  • Introducing Interceptors
  • Manipulating Request Objects
  • Response Interceptors
  • Multiple Interceptors
  • Wrap Up
Course Project – Http
  • Module Introduction
  • Backend (Firebase) Setup
  • Setting Up the DataStorage Service
  • Storing Recipes
  • Fetching Recipes
  • Transforming Response Data
  • Resolving Data Before Loading
  • Fixing a Bug with the Resolver
Authentication & Route Protection in Angular Apps
  • Module Introduction
  • How Authentication Works
  • Adding the Auth Page
  • Switching Between Auth Modes
  • Handling Form Input
  • Preparing the Backend
  • Preparing the Signup Request
  • Sending the Signup Request
  • Adding a Loading Spinner & Error Handling Logic
  • Improving Error Handling
  • Sending Login Requests
  • Login Error Handling
  • Creating & Storing the User Data
  • Reflecting the Auth State in the UI
  • Adding the Token to Outgoing Requests
  • Attaching the Token with an Interceptor
  • Adding Logout
  • Adding Auto-Login
  • Adding Auto-Logout
  • Adding an Auth Guard
  • Wrap Up
Dynamic Components
  • Module Introduction
  • Adding an Alert Modal Component
  • Understanding the Different Approaches
  • Using ngIf
  • Preparing Programmatic Creation
  • Creating a Component Programmatically
  • Understanding entryComponents
  • Data Binding & Event Binding
  • Wrap Up
Angular Modules & Optimizing Angular Apps
  • Module Introduction
  • What are Modules?
  • Analyzing the AppModule
  • Getting Started with Feature Modules
  • Splitting Modules Correctly
  • Adding Routes to Feature Modules
  • Component Declarations
  • The ShoppingList Feature Module
  • Understanding Shared Modules
  • Understanding the Core Module
  • Adding an Auth Feature Module
  • Understanding Lazy Loading
  • Implementing Lazy Loading
  • More Lazy Loading
  • Preloading Lazy-Loaded Code
  • Modules & Services
  • Loading Services Differently
  • Ahead-of-Time Compilation
  • Wrap Up
Deploying an Angular App
  • Module Introduction
  • Deployment Preparations and Important Steps
  • Using Environment Variables
  • Deployment Example: Firebase Hosting
Bonus: Working with NgRx in our Project
  • Module Introduction
  • What is Application State?
  • What is NgRx?
  • Getting Started with Reducers
  • Adding Logic to the Reducer
  • Understanding & Adding Actions
  • Setting Up the NgRx Store
  • Selecting State
  • Dispatching Actions
  • Multiple Actions
  • Preparing Update & Delete Actions
  • Updating & Deleting Ingredients
  • Expanding the State
  • Managing More State via NgRx
  • Removing Redundant Component State Management
  • First Summary & Clean Up
  • One Root State
  • Setting Up Auth Reducer & Actions
  • Dispatching Auth Actions
  • Auth Finished (For Now...)
  • And Important Note on Actions
  • Exploring NgRx Effects
  • Defining the First Effect
  • Effects & Error Handling
  • Login via NgRx Effects
  • Managing UI State in NgRx
  • Finishing the Login Effect
  • Preparing Other Auth Actions
  • Adding Signup
  • Further Auth Effects
  • Adding Auto-Login with NgRx
  • Adding Auto-Logout
  • Finishing the Auth Effects
  • Using the Store Devtools
  • The Router Store
  • Getting Started with NgRx for Recipes
  • Fetching Recipe Detail Data
  • Fetching Recipes & Using the Resolver
  • Fixing the Auth Redirect
  • Update, Delete and Add Recipes
  • Storing Recipes via Effects
  • Cleanup Work
  • Wrap Up
Bonus: Angular Universal
  • Module Introduction
  • Getting Started with Angular Universal
  • Working on the App Module
  • Adding a Server-Side Build Workflow
  • Adding a NodeJS Server
  • Pre-Rendering the App on the Server
  • Next Steps
Angular Animations
  • Introduction
  • Setting up the Starting Project
  • Animations Triggers and State
  • Switching between States
  • Transitions
  • Advanced Transitions
  • Transition Phases
  • The "void" State
  • Using Keyframes for Animations
  • Grouping Transitions
  • Using Animation Callbacks
Adding Offline Capabilities with Service Workers
  • Module Introduction
  • Adding Service Workers
  • Caching Assets for Offline Use
  • Caching Dynamic Assets & URLs
A Basic Introduction to Unit Testing in Angular Apps
  • Introduction
  • Why Unit Tests?
  • Analysing the Testing Setup (as created by the CLI)
  • Running Tests (with the CLI)
  • Adding a Component and some fitting Tests
  • Testing Dependencies: Components and Services
  • Simulating Async Tasks
  • Using "fakeAsync" and "tick"
  • Isolated vs Non-Isolated Tests
Angular Changes & New Features
  • What's New with Angular 8?
  • A First Look At Angular Elements
Course Roundup



Apply for certification

https://www.vskills.in/certification/web-development/angular-8-certification-course