Angular for Javascript Developers
A comprehensive course designed for JavaScript developers to master Angular and build modern web applications.
...
Share
Getting Started with Angular
Unit 1: Setting Up Your Angular Environment
Welcome to Angular!
Installing Node.js
Installing Angular CLI
Code Editor Setup
First Project: New App
Unit 2: Exploring the Project Structure
Project Structure
The angular.json File
package.json Explained
The App Module
The Main Component
Unit 3: Running and Serving Your Application
Serving the App
Exploring the App
CLI: Generate Component
CLI: Generate Service
Other CLI Commands
Angular Components Fundamentals
Unit 1: Component Creation and Structure
Creating a Component
Anatomy of a Component
Component Templates
Styling Components
Component Logic
Unit 2: Component Interaction
Input Properties
Output Properties
Event Emitters
Parent to Child
Child to Parent
Unit 3: Event Binding and Lifecycle Hooks
Click Events
Other DOM Events
ngOnInit
ngOnChanges
ngOnDestroy
Data Binding in Angular
Unit 1: Interpolation
Intro to Interpolation
Displaying Data
Expression Evaluation
String Concatenation
Handling Null Values
Unit 2: Property Binding
Intro to Prop Binding
Binding to Attributes
Binding to DOM Properties
Class Binding
Style Binding
Unit 3: Event Binding
Intro to Event Binding
Handling Click Events
Handling Input Events
Passing Event Data
Event Bubbling
Unit 4: Two-Way Binding
Intro to Two-Way Binding
ngModel Deep Dive
Custom Events
Services and Dependency Injection
Unit 1: Understanding Angular Services
What are Services?
Creating a Basic Service
Service Scope
Using a Service
Service Gotchas
Unit 2: Dependency Injection (DI)
What is DI?
DI in Angular
Configuring Providers
Hierarchical Injectors
Optional Dependencies
Unit 3: Advanced Service Techniques
Using HttpClient
RxJS and Services
Service with Configuration
Sharing Data
Testing Services
Routing and Navigation
Unit 1: Setting Up Angular Routing
Routing: The Basics
Import RouterModule
Configuring Routes
Adding RouterOutlet
First Route in Action
Unit 2: Navigating Between Views
Using RouterLink
Active Router Links
Programmatic Navigation
Navigating Back
Unit 3: Route Parameters and Guards
Route Parameters
Query Parameters
Route Guards: CanActivate
Guards: CanDeactivate
Guards: Resolve
Making API Calls with HttpClient
Unit 1: Setting Up HttpClient
Import HttpClientModule
Inject HttpClient
Basic GET Request
Unit 2: Working with Observables
RxJS Observables Intro
Subscribing to Data
Mapping Data
Unit 3: Displaying API Data
Displaying Data in HTML
Async Pipe
Unit 4: Handling Errors and Loading States
Error Handling
Loading States
Complete Error Handling
Unit 5: Advanced API Interactions
POST Requests
PUT/PATCH Requests
DELETE Requests
Template-Driven Forms
Unit 1: Introduction to Template-Driven Forms
Forms: The Template Way
Setting Up Our Project
ngModel Deep Dive
Basic Form Structure
Submitting the Form
Unit 2: Validation in Template-Driven Forms
Built-In Validators
Displaying Errors
The Power of ngModelGroup
Custom Validators
Async Validation
Unit 3: Advanced Template-Driven Forms
Resetting the Form
Populating Form Data
Form Submission Strategies
Reusable Form Components
Template Forms: Best Practices
Reactive Forms
Unit 1: Introduction to Reactive Forms
Reactive Forms: Intro
Setting Up Reactive Forms
FormControl Basics
Unit 2: Building Reactive Forms
FormGroup Deep Dive
Nesting FormGroups
FormArrays Explained
Unit 3: Validation in Reactive Forms
Basic Form Validation
Custom Validators
Async Validators
Cross-Field Validation
Unit 4: Advanced Reactive Forms Techniques
Dynamic Forms
setValue() and patchValue()
Form Submission
Resetting Forms
Angular Material UI Components
Unit 1: Introduction to Angular Material
Material What & Why?
Setting Up Material
Theming Basics
Unit 2: Layout and Navigation Components
Toolbar Time
Sidenav Structure
Grid System Basics
Unit 3: Form and Input Components
Input Fields
Select Boxes
Datepicker Delight
Unit 4: Data Display Components
Table Time
Card Creation
List It!
Unit 5: Buttons and Indicators
Button Basics
Progress Indicators
Dialog Boxes
Advanced Component Interactions
Unit 1: Advanced Component Communication
Subject vs. BehaviorSubject
ReplaySubject in Depth
AsyncSubject Explained
Component Communication Recap
Unit 2: Shared Services for Component Communication
Creating a Shared Service
Service with BehaviorSubject
Service with RxJS Operators
Unsubscribing Properly
Shared Service Best Practices
Unit 3: Component Composition
What is Composition?
Composition with Inputs
Composition with Outputs
Input and Output Recap
Unit 4: Content Projection
Content Projection Basics
Multi-Slot Projection
Conditional Projection
Testing Angular Applications
Unit 1: Introduction to Testing in Angular
Why Test Angular Apps?
Testing Frameworks
Setting Up Your Test Env
Unit 2: Unit Testing Components and Services
Your First Unit Test
Testing Component Logic
Testing Component Templates
Testing Services
Unit 3: Advanced Testing Techniques
Mocking Dependencies
Testing with Observables
Testing Pipes
Test-Driven Development
Unit 4: End-to-End (E2E) Testing
E2E Testing Intro
Cypress Basics
Advanced E2E Tests