![Angular - The Complete Guide [2023 Edition] [Video]](https://content.packt.com/V10771/cover_image_small.jpg)
Angular - The Complete Guide [2023 Edition] [Video]
Video
Subscription
FREE
Video + Subscription
$29.99
Video
$174.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
Subscription
FREE
Video + Subscription
$29.99
Video
$174.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
-
Free ChapterGetting Started
-
The Basics
- Module Introduction
- Loading and Starting an Angular Application
- Important Components
- Creating a New Component
- Understanding the Role of AppModule and Component Declaration
- Using Custom Components
- Creating Components with the Command Line Input (CLI) and Nesting Components
- Working with Component Templates
- Working with Component Styles
- Understanding the Component Selector
- Assignment Solution
- What Is Data Binding?
- String Interpolation
- Property Binding
- Property Binding Versus String Interpolation
- Event Binding
- Passing and Using Data with Event Binding
- Two-Way Data Binding
- Combining All Forms of Data Binding
- Assignment Solution
- Understanding Directives
- Using the ngIf Directive to Display Data Conditionally
- Enhancing the ngIf Directive with an Else Condition
- Styling Elements Dynamically with the ngStyle Directive
- Applying CSS Classes Dynamically with the ngClass Directive
- Displaying Lists Using the ngFor Directive
- Assignment Solution
- Getting the Index When Using the ngFor Directive
-
Course Project - the Basics
- Project Introduction
- Planning the Application
- Setting Up the Application
- Creating Components
- Using Components
- Adding a Navigation Bar
- Creating a "Recipe" Model
- Adding Content to the Recipes' Components
- Displaying a List of Recipes Using the ngFor Directive
- Displaying Recipe Details
- Working on the ShoppingList Component
- Creating an "Ingredients" Model
- Creating and Displaying the Shopping List
- Adding a Shopping List Edit Section
- Wrapping Up and Next Steps
-
Debugging
-
Components and Databinding Deep Dive
- Module Introduction
- Splitting Applications into Components
- Property and 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 and Document Object Model (DOM) with the @ViewChild Component
- 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 the @ContentChild Parameter Decorator
- Wrapping Up
- Assignment Solution
-
Course Project - Components and Data Binding
-
Directives Deep Dive
- Module Introduction
- ngFor and ngIf Directives Recap
- ngClass and ngStyle Recap
- Creating a Basic Attribute Directive
- Using the Renderer to Build a Better Attribute Directive
- Using the @HostListener() Decorator to Listen to Host Events
- Using the @HostBinding() Decorator to Bind to Host Properties
- Binding to Directive Properties
- What Happens Behind the Scenes on Structural Directives
- Building a Structural Directive
- Understanding the ngSwitch Directive
-
Course Project – Directives
-
Using Services and 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 Are Required?
- Injecting Services into Other Services
- Using Services for Cross-Component Communication
- Assignment Solution
-
Course Project - Services and 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 (Through 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
- 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 the canActivate() Method
- Protecting Child (Nested) Routes Using the canActivateChild() Method
- Using a Fake Authentication Service
- Controlling Navigation with the canDeactivate() Method
- Passing Static Data to a Route
- Resolving Dynamic Data with the Resolve Guard
- Understanding Location Strategies
- Wrapping Up
-
Course Project – Routing
- Planning the General Structure
- Setting Up Routes
- Adding Navigation to the Application
- 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
-
Course Project – Observables
-
Handling Forms in Angular Apps
- Module Introduction
- Why do We Need Angular's Help?
- Template-Driven (TD) Versus Reactive Approach
- Creating an Example Form
- Template-Driven (TD): Creating Forms and Registering the Controls
- Template-Driven (TD): Submitting and Using a Form
- Template-Driven (TD): Understanding Form State
- Template-Driven (TD): Accessing a Form Using the @ViewChild Decorator
- Template-Driven (TD): Adding Validation to Check User Input
- Template-Driven (TD): Using the Form State
- Template-Driven (TD): Displaying Validation Error Messages
- Template-Driven (TD): Set Default Values Using the ngModel Property Binding
- Template-Driven (TD): Using ngModel with Two-Way Binding
- Template-Driven (TD): Grouping Form Controls
- Template-Driven (TD): Handling Radio Buttons
- Template-Driven (TD): Setting and Patching Form Values
- Template-Driven (TD): Using Form Data
- Template-Driven (TD): Resetting Forms
- Introduction to the Reactive Approach
- Reactive: Form Template Setup
- Reactive: Creating a Form in Code
- Reactive: Syncing HTML and Form
- Reactive: Submitting a Form
- Reactive: Adding Validation
- Reactive: Getting Access to Controls
- Reactive: Grouping Controls
- Reactive: Arrays of FormControl (FormArray)
- Reactive: Creating Custom Validators
- Reactive: Using Error Codes
- Reactive: Creating a Custom Asynchronous 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 a Form
- Allowing Selection of Items in a List
- Loading Shopping List Items into a Form
- Updating Existing Items
- Resetting a Form
- Allowing the User to Clear (Cancel) a Form
- Allowing the Deletion of Shopping List Items
- Creating a Template for the (Reactive) Recipe Edit Form
- Creating a Form to Edit Recipes
- Syncing HTML with a Form
- Adding Ingredient Controls to a FormArray
- Adding New Ingredient Controls
- Validating User Input
- Submitting the Recipe Edit Form
- Adding the Delete and Clear (Cancel) Functionality
- Redirecting a User (After Deleting a Recipe)
- Adding an Image Preview
- Providing the Recipe Service Correctly
- Deleting Ingredients and Some Finishing Touches
-
Using Pipes to Transform the Output
-
Making HTTP Requests
- A New Integrated Development Environment (IDE)
- Module Introduction
- How Does Angular Interact with Backends?
- Anatomy of an HTTP Request
- Setting Up Backend (Firebase)
- Sending a POST Request
- Sending a GET Request
- Using Reactive Extensions for JavaScript (RxJS) Operators to Transform Response Data
- Using Types with HttpClient
- Outputting Posts
- Showing a Loading Indicator
- Using a Service for HTTP Requests
- Working of Services and Components
- Sending a DELETE Request
- Handling Errors
- Using Subjects for Error Handling
- Using the catchError Operator
- Error Handling and User Experience (UX)
- Setting Headers
- Adding Query Parameters
- Observing Different Types of Responses
- Changing the Response Body Type
- Introducing Interceptors
- Manipulating Request Objects
- Response Interceptors
- Multiple Interceptors
- Wrapping Up
-
Course Project – HTTP
-
Authentication and Route Protection in Angular Apps
- Module Introduction
- Working of Authentication
- Adding the Authentication Page
- Switching between Authentication Modes
- Handling Form Input
- Preparing the Backend
- Preparing the Signup Request
- Sending the Signup Request
- Adding Loading Spinner and Error Handling Logic
- Improving Error Handling
- Sending Login Requests
- Handling Login Error
- Creating and Storing the User Data
- Reflecting the Authentication State in the User Interface (UI)
- Adding a Token to Outgoing Requests
- Attaching a Token with an Interceptor
- Adding Logout
- Adding Auto-Login
- Adding Auto-Logout
- Adding an Authentication Guard
- Wrapping Up
-
Dynamic Components
-
Angular Modules and Optimizing Angular Applications
- Module Introduction
- What are Modules?
- Analyzing the AppModule Class
- Getting Started with Feature Modules
- Splitting Modules Correctly
- Adding Routes to Feature Modules
- Component Declarations
- ShoppingList Feature Module
- Understanding Shared Modules
- Understanding Core Modules
- Adding an Authentication Feature Module
- Understanding Lazy Loading
- Implementing Lazy Loading
- More Lazy Loading
- Preloading Lazy-Loaded Code
- Modules and Services
- Loading Services Differently
- Wrapping Up
-
Deploying an Angular Application
-
Standalone Components
- Module Introduction
- Starting Setup and Why We Want Standalone Components
- Building a First Standalone Component
- Standalone Directives and Connecting Building Blocks
- Migrating Another Component
- A Standalone Root Component
- Services and Standalone Components
- Routing with Standalone Components
- Lazy Loading
- Summary
-
Angular Signals
-
Bonus - Using NgRx for State Management
- Module Introduction
- What Is NgRx?
- Understanding NgRx and Its Building Blocks
- Project Setup and Installing NgRx
- Adding a First Reducer and Store Setup
- An Alternative Way of Creating Reducers
- Reading Data from the Store
- Introducing Actions and State Changing Reducers
- Dispatching Actions
- Attaching Data to Actions
- Handling Actions without createReducer
- An Alternative Way of Defining Actions
- Time to Practice - A Second Action
- Exploring Selectors
- Introducing Effects
- Installing the Effects Package
- Defining a First Effect
- The Old @Effect Decorator and Registering Effects
- Using Store Data in Effects
- Adding a Second Effect
- Summary
- Getting Started with Reducers
- Adding Logic to the Reducer
- Understanding and Adding Actions
- Setting Up the NgRx Store
- Selecting State
- Dispatching Actions
- Multiple Actions
- Preparing Update and Delete Actions
- Updating and Deleting Ingredients
- Expanding the State
- Managing More State Through NgRx
- Removing Redundant Component State Management
- First Summary and Clean Up
- One Root State
- Setting Up Auth Reducer and Actions
- Dispatching Auth Actions
- Auth Finished (For Now…)
- An Important Note on Actions
- Exploring NgRx Effects
- Defining the First Effect
- Effects and Error Handling
- Login Through 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 and Using the Resolver
- Fixing the Auth Redirect
- Update, Delete and Add Recipes
- Storing Recipes Through Effects
- Cleanup Work
- Wrap Up
-
Bonus - Angular Universal
-
Angular Animations
-
Adding Offline Capabilities with Service Workers
-
A Basic Introduction to Unit Testing in Angular Apps
- Introduction
- Why Unit Tests?
- Analyzing the Testing Setup (As Created by the Command Line Interface (CLI))
- Running Tests (With the Command Line Interface (CLI))
- Adding a Component and Some Fitting Tests
- Testing Dependencies: Components and Services
- Simulating Asynchronous Tasks
- Using "fakeAsync" and "Tick"
- Isolated Versus Non-Isolated Tests
-
Angular as a Platform and a r Look at the Command Line Interface (CLI)
- Module Introduction
- A r Look at the "ng new" Command
- Integrated Development Environment (IDE) and Project Setup
- Understanding the Configuration Files
- Important Command Line Interface (CLI) Commands
- The "angular.json" File - a r Look
- Angular Schematics - an Introduction
- The "ng add" Command
- Using Custom "ng generate" Schematics
- Updating Projects Using the "ng update" Command
- Deploying with the "ng deploy" Command
- Understanding "Differential Loading"
- Managing Multiple Projects in One Folder
- Angular Libraries - an Introduction
- Wrapping Up
-
Angular Changes and New Features
-
Course Roundup
-
Bonus: TypeScript Introduction (For Angular 2 Usage)
- Module Introduction
- What and Why?
- Installing and Using TypeScript
- Base Types and Primitives
- Array and Object Types
- Type Inference
- Working with Union Types
- Assigning Type Aliases
- Diving into Functions and Function Types
- Understanding Generics
- Classes and TypeScript
- Working with Interfaces
- Configuring the TypeScript Compiler
About this video
If you are looking to become a proficient Angular developer and build modern, responsive, and scalable web applications, then this is the course for you! This comprehensive course starts from scratch, so no prior Angular 1 or 2+ knowledge is required.
Throughout the course, you will learn about Angular architecture, components, directives, services, forms, HTTP access, authentication, optimizing Angular apps with modules and offline compilation, and much more. You will also learn how to use the Angular CLI and deploy an application.
The course features TypeScript, the main language used by the official Angular team, and ensures you have the best preparation for creating Angular apps. The course includes a complete project to practice your skills, and you will benefit from fast and friendly support if you get stuck.
In the latest course update, you will learn to work with signals in Angular, allowing you to easily manage and update data flow within your application. You will also discover the power of NgRx for state management and explore Angular Universal.
By the end of the course, you will have a deep understanding of how to create Angular applications, including modules, directives, components, databinding, routing, HTTP access, dependency injection, signals, state management with NgRx, and server-side rendering with Angular Universal; and quickly establish yourself as a front-end developer.
- Publication date:
- April 2018
- Publisher
- Packt
- Duration
- 34 hours 58 minutes
- ISBN
- 9781788998437
Download code from GitHub
Latest Reviews
(7 reviews total)
Great instructor. I like his pace.
5
Kinda nice and inspiring... worth 5 euros def
3
Duidelijke uitleg van Angular.
5
![Angular 10 Masterclass with TypeScript, Firebase, and Material [Video]](https://static.packt-cdn.com/products/9781800567764/cover/9781800567764-original.png)
![The Complete React Developer Course (with Hooks and Redux) [Video]](https://static.packt-cdn.com/products/9781839212123/cover/9781839212123-original.png)
