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