The course providing the name “[LEGACY] Angular - The Complete Guide - Maximilian Schwarzmüller” is the basic level. Hence, you need not have any prior knowledge about Angular 1 or Angular 2. From the beginning, you will be taught the basics of the development environment, how to create and help deploy your Angular applications, and the Angular CLI. Moreover, the possible topics of the course include components, directives, services, forms, HTTP access, authentication, and application optimization. At the end of this course, you will be well-equipped to pursue Angular and deploy your applications.
"Angular is designed to make updating as easy as possible, allowing developers to take advantage of the latest developments with minimal effort." - MDN Web Docs
Angular is a new, effective, and fast-sailing frontend framework that helps you to create captivating web apps with outstanding UI/UX. This course uses TypeScript, which is a language that simplifies the creation of Angular apps and is used by the Angular team. But you don’t even need that much prior knowledge in JavaScript to begin with. The course also contains a large project; this gives you the chance to revisit what you were taught and enhance your performance.
Selecting Angular is selecting the framework that creates the future of the frontend part of the application. It is also described as being more rapid and elastic compared with Angular, its antecedent. Js provides many useful tools for creating fully responsive and highly functional web applications. This course, “[LEGACY] Angular - The Complete Guide,” is based on Angular’s architecture data binding, routing, and virtually all you need to build breathtaking apps. To begin learning with Angular, use its solid features as a course member.
"Angular provides powerful data binding between application logic and views, ensuring the UI updates automatically as the underlying data model changes." - Prismetric
[LEGACY] Angular - The Complete Guide - Maximilian Schwarzmüller Table of Contents:
- Getting Started
- Course Introduction (0:57)
- What is Angular? (1:59)
- Angular vs Angular 2 vs Latest Version (2:55)
- Angular Setup & First App (8:08)
- Join our Online Learning Community
- Editing the First App (10:05)
- The Course Structure (4:00)
- How to get the Most out of the Course (2:25)
- What is TypeScript? (2:09)
- A Basic Project Setup using Bootstrap for Styling (4:27)
- Where to find the Course Source Code
- The Academind Pro Referral Program
- The Basics
- Module Introduction (0:56)
- How an Angular App gets Loaded and Started (7:11)
- Components are Important! (3:08)
- Creating a New Component (6:51)
- Understanding the Role of AppModule and Component Declaration (5:15)
- Using Custom Components (1:12)
- Creating Components with the CLI & Nesting Components (3:51)
- Working with Component Templates (3:08)
- Working with Component Styles (4:02)
- Fully Understanding the Component Selector (3:50)
- Assignment: Component Basics (Problem) (1:33)
- Assignment: Component Basics (Solution) (6:42)
- What is Databinding? (2:49)
- String Interpolation (5:19)
- Property Binding (6:34)
- Property Binding vs String Interpolation (3:07)
- Event Binding (4:09)
- Passing and Using Data with Event Binding (4:37)
- Two-Way Databinding (2:47)
- Combining all Forms of Databinding (1:46)
- Assignment: Data & Event Binding (Problem) (1:07)
- Assignment: Data & Event Binding (Solution) (5:12)
- Understanding Directives (2:17)
- Using ngIf to Output Data Conditionally (3:52)
- Enhancing ngIf with an Else Condition (2:46)
- Angular 17: NgIf Alternative
- Styling Elements Dynamically with ngStyle (5:01)
- Applying CSS Classes Dynamically with ngClass (2:53)
- Outputting Lists with ngFor (3:43)
- Angular 17: NgFor Alternative
- Assignment: Directives (Problem) (2:15)
- Assignment: Directives (Solution) (7:06)
- Getting the Index when using ngFor (2:52)
- Course Project - The Basics
- Project Introduction (1:04)
- Planning the App (5:33)
- Setting up the Application (4:31)
- Creating the Components (9:32)
- Using the Components (3:15)
- Adding a Navigation Bar (5:09)
- Creating a "Recipe" Model (4:33)
- Adding Content to the Recipes Components (7:41)
- Outputting a List of Recipes with ngFor (4:37)
- Displaying Recipe Details (5:52)
- Working on the ShoppingListComponent (1:49)
- Creating an "Ingredient" Model (2:35)
- Creating and Outputting the Shopping List (2:27)
- Adding a Shopping List Edit Section (3:28)
- Wrap Up & Next Steps (0:54)
- Debugging
- Understanding Angular Error Messages (4:36)
- Debugging Code in the Browser Using Sourcemaps (5:32)
- Components & Databinding Deep Dive
- Module Introduction (0:36)
- Splitting Apps into Components (5:56)
- Property & Event Binding Overview (1:44)
- Binding to Custom Properties (5:43)
- Assigning an Alias to Custom Properties (1:59)
- Binding to Custom Events (9:05)
- Assigning an Alias to Custom Events (0:57)
- Custom Property and Event Binding Summary (2:02)
- Understanding View Encapsulation (4:59)
- More on View Encapsulation (2:43)
- Using Local References in Templates (4:36)
- Getting Access to the Template & DOM with @ViewChild (5:02)
- Projecting Content into Components with ng-content (3:22)
- Understanding the Component Lifecycle (4:54)
- Seeing Lifecycle Hooks in Action (11:54)
- Lifecycle Hooks and Template Access (2:33)
- Getting Access to ng-content with @ContentChild (3:00)
- Wrap Up (0:49)
- Assignment: Components & Databinding (Problem) (2:17)
- Assignment: Components & Databinding (Solution) (12:21)
- Course Project - Components & Databinding
- Introduction (0:50)
- Adding Navigation with Event Binding and ngIf (7:31)
- Passing Recipe Data with Property Binding (4:43)
- Passing Data with Event and Property Binding (Combined) (10:31)
- Allowing the User to Add Ingredients to the Shopping List (7:22)
- Directives Deep Dive
- Module Introduction (1:23)
- ngFor and ngIf Recap (3:36)
- ngClass and ngStyle Recap (2:56)
- Creating a Basic Attribute Directive (6:42)
- Using the Renderer to build a Better Attribute Directive (7:04)
- Using HostListener to Listen to Host Events (3:00)
- Using HostBinding to Bind to Host Properties (3:17)
- Binding to Directive Properties (6:43)
- What Happens behind the Scenes on Structural Directives (3:04)
- Building a Structural Directive (6:13)
- Understanding ngSwitch (2:49)
- Course Project - Directives
- Building and Using a Dropdown Directive (6:25)
- Using Services & Dependency Injection
- Module Introduction (1:39)
- Why would you Need Services? (2:04)
- Creating a Logging Service (3:32)
- Injecting the Logging Service into Components (6:21)
- Creating a Data Service (6:41)
- Understanding the Hierarchical Injector (2:40)
- How many Instances of Service Should It Be? (2:12)
- Injecting Services into Services (5:13)
- Using Services for Cross-Component Communication (4:06)
- Services in Angular 6+
- Assignment: Services (Problem) (1:44)
- Assignment: Services (Solution) (9:37)
- Course Project - Services & Dependency Injection
- Introduction (1:23)
- Setting up the Services (1:15)
- Managing Recipes in a Recipe Service (4:07)
- Using a Service for Cross-Component Communication (5:07)
- Adding the Shopping List Service (5:04)
- Using Services for Pushing Data from A to B (3:08)
- Adding Ingredients to Recipes (3:41)
- Passing Ingredients from Recipes to the Shopping List (via a Service) (7:03)
- Changing Pages with Routing
- Module Introduction (1:26)
- Why do we need a Router? (1:15)
- Setting up and Loading Routes (8:01)
- Navigating with Router Links (5:18)
- Understanding Navigation Paths (4:54)
- Styling Active Router Links (5:01)
- Navigating Programmatically (3:28)
- Using Relative Paths in Programmatic Navigation (5:09)
- Passing Parameters to Routes (3:10)
- Fetching Route Parameters (4:01)
- Fetching Route Parameters Reactively (7:25)
- An Important Note about Route Observables (2:42)
- Passing Query Parameters and Fragments (5:53)
- Retrieving Query Parameters and Fragments (3:15)
- Practicing and some Common Gotchas (6:07)
- Setting up Child (Nested) Routes (4:28)
- Using Query Parameters - Practice (5:36)
- Configuring the Handling of Query Parameters (1:50)
- Redirecting and Wildcard Routes (4:36)
- Redirection Path Matching
- Outsourcing the Route Configuration (4:40)
- An Introduction to Guards (1:45)
- Protecting Routes with canActivate (8:55)
- Protecting Child (Nested) Routes with canActivateChild (2:51)
- Using a Fake Auth Service (1:43)
- Controlling Navigation with canDeactivate (12:28)
- Passing Static Data to a Route (5:56)
- Resolving Dynamic Data with the resolve Guard (9:53)
- Understanding Location Strategies (4:43)
- Wrap Up (0:51)
- Course Project - Routing
- Planning the General Structure (1:36)
- Setting Up Routes (7:58)
- Adding Navigation to the App (1:41)
- Marking Active Routes (1:31)
- Fixing Page Reload Issues (2:51)
- Child Routes: Challenge (1:54)
- Adding Child Routing Together (4:21)
- Configuring Route Parameters (6:22)
- Passing Dynamic Parameters to Links (3:01)
- Styling Active Recipe Items (1:14)
- Adding Editing Routes (3:44)
- Retrieving Route Parameters (3:19)
- Programmatic Navigation to the Edit Page (4:46)
- One Note about Route Observables (0:52)
- Project Cleanup
- Understanding Observables
- Module Introduction (4:25)
- Analyzing Angular Observables (2:15)
- Getting Closer to the Core of Observables (6:50)
- Building a Custom Observable (4:46)
- Errors & Completion (6:39)
- Observables & You! (1:55)
- Understanding Operators (8:39)
- Subjects (8:17)
- Wrap Up (1:15)
- Useful Resources & Links
- Course Project - Observables
- Improving the Reactive Service with Observables (Subjects) (6:04)
- Handling Forms in Angular Apps
- Module Introduction (1:19)
- Why do we Need Angular's Help? (2:21)
- Template-Driven (TD) vs Reactive Approach (1:16)
- An Example Form (1:32)
- TD: Creating the Form and Registering the Controls (5:42)
- TD: Submitting and Using the Form (6:15)
- TD: Understanding Form State (2:29)
- TD: Accessing the Form with @ViewChild (3:03)
- TD: Adding Validation to check User Input (4:14)
- Built-in Validators & Using HTML5 Validation
- TD: Using the Form State (4:27)
- TD: Outputting Validation Error Messages (2:23)
- TD: Set Default Values with ngModel Property Binding (2:15)
- TD: Using ngModel with Two-Way-Binding (2:48)
- TD: Grouping Form Controls (3:30)
- TD: Handling Radio Buttons (3:27)
- TD: Setting and Patching Form Values (4:42)
- TD: Using Form Data (4:44)
- TD: Resetting Forms (1:47)
- Assignment: Template-driven Forms (Problem) (1:15)
- Assignment: Template-driven Forms (Solution) (12:17)
- Introduction to the Reactive Approach (0:40)
- Reactive: Setup (2:26)
- Reactive: Creating a Form in Code (4:07)
- Reactive: Syncing HTML and Form (3:58)
- Reactive: Submitting the Form (2:15)
- Reactive: Adding Validation (2:50)
- Reactive: Getting Access to Controls (3:47)
- Reactive: Grouping Controls (3:46)
- Reactive: Arrays of Form Controls (FormArray) (7:31)
- Reactive: Creating Custom Validators (6:11)
- Reactive: Using Error Codes (3:20)
- Reactive: Creating a Custom Async Validator (4:38)
- Reactive: Reacting to Status or Value Changes (2:11)
- Reactive: Setting and Patching Values (2:09)
- Assignment: Reactive Forms (Problem) (1:04)
- Assignment: Reactive Forms (Solution) (13:48)
- Course Project - Forms
- Introduction (0:59)
- TD: Adding the Shopping List Form (3:42)
- Adding Validation to the Form (2:21)
- Allowing the Selection of Items in the List (4:24)
- Loading the Shopping List Items into the Form (3:02)
- Updating existing Items (3:15)
- Resetting the Form (2:34)
- Allowing the User to Clear (Cancel) the Form (1:16)
- Allowing the Deletion of Shopping List Items (2:52)
- Creating the Template for the (Reactive) Recipe Edit Form (4:59)
- Creating the Form For Editing Recipes (5:06)
- Syncing HTML with the Form (3:52)
- Adding Ingredient Controls to a Form Array (5:39)
- Adding new Ingredient Controls (3:38)
- Validating User Input (5:10)
- Submitting the Recipe Edit Form (7:30)
- Adding a Delete and Clear (Cancel) Functionality (4:47)
- Redirecting the User (after Deleting a Recipe) (1:47)
- Adding an Image Preview (1:48)
- Providing the Recipe Service Correctly (1:58)
- Deleting Ingredients and Some Finishing Touches (3:34)
- Deleting All Items In A FormArray
- Using Pipes to Transform Output
- Introduction & Why Pipes are Useful (2:01)
- Using Pipes (3:28)
- Parametrizing Pipes (2:10)
- Where to learn more about Pipes (1:56)
- Chaining Multiple Pipes (2:20)
- Creating a Custom Pipe (6:42)
- Parametrizing a Custom Pipe (2:36)
- Example: Creating a Filter Pipe (7:01)
- Pure and Impure Pipes (or: How to "fix" the Filter Pipe) (4:46)
- Understanding the "async" Pipe (4:03)
- Assignment: Pipes (Problem) (1:13)
- Assignment: Pipes (Solution) (5:10)
- Making Http Requests
- A New IDE (0:43)
- Module Introduction (1:06)
- How Does Angular Interact With Backends? (3:09)
- The Anatomy of a Http Request (2:27)
- Backend (Firebase) Setup (2:35)
- Sending a POST Request (10:11)
- GETting Data (2:56)
- Using RxJS Operators to Transform Response Data (3:59)
- Using Types with the HttpClient (5:07)
- Outputting Posts (2:15)
- Showing a Loading Indicator (2:03)
- Using a Service for Http Requests (6:37)
- Services & Components Working Together (3:28)
- Sending a DELETE Request (3:27)
- Handling Errors (6:38)
- Using Subjects for Error Handling (2:39)
- Using the catchError Operator (2:13)
- Error Handling & UX (2:07)
- Setting Headers (3:18)
- Adding Query Params (4:01)
- Observing Different Types of Responses (7:32)
- Changing the Response Body Type (3:16)
- Introducing Interceptors (7:24)
- Manipulating Request Objects (2:32)
- Response Interceptors (2:46)
- Multiple Interceptors (4:52)
- Wrap Up (1:57)
- Useful Resources & Links
- Course Project - Http
- Module Introduction (0:55)
- Backend (Firebase) Setup (2:03)
- Setting Up the DataStorage Service (5:32)
- Storing Recipes (6:39)
- Fetching Recipes (5:38)
- Transforming Response Data (4:17)
- Resolving Data Before Loading (7:31)
- Fixing a Bug with the Resolver (1:43)
- Authentication & Route Protection in Angular
- Module Introduction (0:52)
- How Authentication Works (5:01)
- Adding the Auth Page (6:44)
- Switching Between Auth Modes (4:02)
- Handling Form Input (3:44)
- Preparing the Backend (3:15)
- Preparing the Signup Request (8:24)
- Sending the Signup Request (4:36)
- Adding a Loading Spinner & Error Handling Logic (6:34)
- Improving Error Handling (5:39)
- Sending Login Requests (6:00)
- Login Error Handling (4:28)
- Creating & Storing the User Data (10:16)
- Reflecting the Auth State in the UI (9:41)
- Adding the Token to Outgoing Requests (10:15)
- Attaching the Token with an Interceptor (8:48)
- Adding Logout (3:18)
- Adding Auto-Login (9:55)
- Adding Auto-Logout (7:39)
- Adding an Auth Guard (10:56)
- Wrap Up (1:55)
- Useful Resources & Links
- Dynamic Components
- Module Introduction (1:09)
- Adding an Alert Modal Component (7:33)
- Understanding the Different Approaches (2:28)
- Using ngIf (3:05)
- Preparing Programmatic Creation (8:27)
- Creating a Component Programmatically (4:46)
- Understanding entryComponents (5:06)
- Data Binding & Event Binding (5:05)
- Wrap Up (1:25)
- Useful Resources & Links
- Angular Modules & Optimizing Angular Apps
- Module Introduction (0:41)
- What are Modules? (2:26)
- Analyzing the AppModule (6:24)
- Getting Started with Feature Modules (8:59)
- Splitting Modules Correctly (4:09)
- Adding Routes to Feature Modules (4:35)
- Component Declarations (1:58)
- The ShoppingList Feature Module (4:27)
- Understanding Shared Modules (8:10)
- Understanding the Core Module (5:48)
- Adding an Auth Feature Module (4:22)
- Understanding Lazy Loading (2:52)
- Implementing Lazy Loading (12:20)
- More Lazy Loading (3:02)
- Preloading Lazy-Loaded Code (3:39)
- Modules & Services (5:46)
- Loading Services Differently (8:24)
- Ahead-of-Time Compilation (9:50)
- Wrap Up (0:49)
- Useful Resources & Links
- Deploying an Angular App
- Module Introduction (0:52)
- Deployment Preparation & Steps (3:18)
- Using Environment Variables (4:44)
- Example: Deploying to Firebase Hosting (9:01)
- Server-side Routing vs Client-side Routing
- Standalone Components
- Module Introduction (1:27)
- Starting Setup & Why We Want Standalone Components (4:48)
- Building a First Standalone Component (9:49)
- Standalone Components Are Now Stable
- Standalone Directives & Connecting Building Blocks (2:19)
- Migrating Another Component (1:49)
- A Standalone Root Component (4:20)
- Services & Standalone Components (3:59)
- Routing with Standalone Components (6:36)
- Lazy Loading (8:04)
- Summary (1:56)
- Angular Signals
- Module Introduction (1:08)
- Signals: What & Why? (5:40)
- Creating a New Signal (3:23)
- Updating a Signal Value (2:34)
- Reading & Outputting a Signal Value (2:11)
- Signal Updating: set(), update() & mutate() (6:12)
- Signals: What's To Come?
- Signal Updating: set(), update() & mutate() (1:02)
- Computed Values & Effects (3:48)
- Module Summary (0:55)
- Bonus: Working with NgRx in our Project
- Module Introduction (0:57)
- What Is NgRx? (2:09)
- Understanding NgRx & Its Building Blocks (3:58)
- Project Setup & Installing NgRx (5:12)
- Adding a First Reducer & Store Setup (8:35)
- An Alternative Way Of Creating Reducers (4:19)
- Reading Data From The Store (9:36)
- Introducing Actions & State Changing Reducers (7:49)
- Dispatching Actions (3:41)
- Attaching Data To Actions (4:20)
- Handling Actions Without createReducer (6:01)
- An Alternative Way Of Defining Actions (10:02)
- Time To Practice: A Second Action (5:28)
- Exploring Selectors (8:17)
- Introducing Effects (2:39)
- Installing the Effects Package (2:03)
- Defining a First Effect (8:40)
- The Old @Effect Decorator & Registering Effects (3:43)
- Using Store Data In Effects (3:24)
- Adding a Second Effect (9:58)
- Summary (3:02)
- About The Remaining Section
- Recipe Project Starting Code
- Getting Started with Reducers (6:44)
- Adding Logic to the Reducer (5:47)
- Understanding & Adding Actions (6:16)
- Setting Up the NgRx Store (4:48)
- Selecting State (8:51)
- Dispatching Actions (7:09)
- Multiple Actions (9:37)
- Preparing Update & Delete Actions (3:08)
- Updating & Deleting Ingredients (10:59)
- Expanding the State (9:17)
- Managing More State via NgRx (9:52)
- Removing Redundant Component State Management (3:32)
- First Summary & Clean Up (5:25)
- One Root State (11:39)
- Setting Up Auth Reducer & Actions (8:25)
- Dispatching Auth Actions (5:53)
- Auth Finished (For Now...) (6:43)
- An Important Note on Actions (6:24)
- Exploring NgRx Effects (3:38)
- Defining the First Effect (5:19)
- Effects & Error Handling (8:57)
- Login via NgRx Effects (9:08)
- Managing UI State in NgRx (7:30)
- Finishing the Login Effect (7:11)
- Preparing Other Auth Actions (4:09)
- Adding Signup (6:17)
- Further Auth Effects (6:13)
- Adding Auto-Login with NgRx (8:16)
- Adding Auto-Logout (6:31)
- Finishing the Auth Effects (2:29)
- Using the Store Devtools (6:20)
- The Router Store (2:11)
- Getting Started with NgRx for Recipes (11:03)
- Fetching Recipe Detail Data (9:14)
- Fetching Recipes & Using the Resolver (12:00)
- Fixing the Auth Redirect (2:10)
- Update, Delete and Add Recipes (15:11)
- Storing Recipes via Effects (5:52)
- Cleanup Work (1:58)
- Wrap Up (2:12)
- Alternative NgRx Syntax
- Useful Resources & Links
- Bonus: Angular Universal
- Module Introduction (0:33)
- Angular Universal - What & Why? (7:49)
- Converting the App to a Universal App (3:12)
- Analyzing & Running Server-side Code (5:22)
- A Closer Look At The Server-side Code (4:10)
- Integrating a REST API (3:07)
- Some Notes About Deploying Angular Universal Apps (4:30)
- Angular Animations
- Module Introduction (1:03)
- Setting Up A Starting Project (0:52)
- Animations Triggers and State (7:11)
- Switching between States (2:04)
- Transitions (1:54)
- Advanced Transitions (5:21)
- Transition Phases (3:57)
- The "void" State (6:11)
- Using Keyframes for Animations (5:32)
- Grouping Transitions (2:11)
- Using Animation Callbacks (2:38)
- Adding Offline Capabilities with Service Workers
- Module Introduction (2:09)
- Adding Service Workers (12:41)
- Caching Assets for Offline Use (5:28)
- Caching Dynamic Assets & URLs (7:02)
- Useful Resources & Links
- A Basic Introduction to Unit Testing in Angular Apps
- Introduction (1:18)
- Why Unit Tests? (2:12)
- Analyzing the Testing Setup (as created by the CLI) (8:01)
- Running Tests (with the CLI) (1:59)
- Adding a Component and some fitting Tests (6:14)
- Testing Dependencies: Components and Services (6:55)
- Simulating Async Tasks (9:41)
- Using "fakeAsync" and "tick" (2:14)
- Isolated vs Non-Isolated Tests (6:10)
- Useful Resources & Links
- Angular as a Platform & Closer Look at the CLI
- Module Introduction (1:44)
- A Closer Look at "ng new" (5:18)
- IDE & Project Setup (2:31)
- Understanding the Config Files (9:01)
- Important CLI Commands (5:25)
- The "angular.json" File - A Closer Look (11:18)
- Angular Schematics - An Introduction (1:41)
- The "ng add" Command (4:31)
- Using Custom "ng generate" Schematics (3:05)
- Smooth Updating of Projects with "ng update" (2:14)
- Simplified Deployment with "ng deploy" (5:46)
- Understanding "Differential Loading" (5:10)
- Managing Multiple Projects in One Folder (4:35)
- Angular Libraries - An Introduction (2:51)
- Wrap Up (1:27)
- Bonus: TypeScript Introduction
- Module Introduction (1:15)
- What & Why? (6:32)
- Installing & Using TypeScript (6:22)
- Base Types & Primitives (3:55)
- Array & Object Types (5:33)
- Type Inference (2:47)
- Working with Union Types (2:48)
- Assigning Type Aliases (2:42)
- Diving into Functions & Function Types (5:12)
- Understanding Generics (7:20)
- Classes & TypeScript (7:58)
- Working with Interfaces (5:36)
- Configuring the TypeScript Compiler (2:29)
- Module Resources
- Course Roundup
- Roundup (1:33)
Who is this course for?
- It is appreciable for starters who have no prior experience in Angular.
- Angular developers who already know Angular 1 or Angular 2 are eager to get to know the latest version
- JavaScript developers are interested in using Angular.
- Web developers who want to develop functional and user interaction-rich Web 2.0 style application
- TS for Angular development should read this article as it will help them learn how to master TypeScript.
- For getting a guided tour of Angular right from its installation to the deployment by the developers
Click on the links below to Download [LEGACY] Angular - The Complete Guide - Maximilian Schwarzmüller!
در حال پاسخ به :