Oreilly - Angular 8 - The Complete Guide

Oreilly - Angular 8 - The Complete Guide

by Maximilian Schwarzmüller | Publisher: Packt Publishing | Release Date: April 2018 | ISBN: 9781788998437

https://www.oreilly.com/library/view/angular-8-/9781788998437/

Master Angular and build awesome, reactive web appsAbout This VideoNo previous Angular of knowledge is required!Basic HTML and CSS knowledge helps but isn't a must-havePrior TypeScript knowledge also helps but isn't necessary to benefit from this courseBasic JavaScript knowledge is requiredIn DetailAngular 8 is the latest version of Angular and this course starts from scratch. From setup to deployment, this course covers it all! You'll learn all about components, directives, services, forms, HTTP access, authentication, optimizing an Angular app with modules and offline compilation, and much more - and in the end, you'll learn how to deploy an application! But that's not all! This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course! Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away. This course uses TypeScript - TypeScript is the main language used by the official Angular team and the language you'll mostly see in Angular tutorials. It's a superset to JavaScript and makes writing Angular apps easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. TypeScript knowledge is, however, not required - basic JavaScript knowledge is enough. Why Angular? - The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive, and user-friendly web applications. After taking this course you'll be able to fully take advantage of all those features and start developing awesome applications immediately. Get a very deep understanding of how to create Angular applications. This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.Specifically, you will learn:Which architecture Angular usesHow to use TypeScript to write Angular applicationsAll about directives and components, including the creation of custom directives/ componentsDownloading the example code for this course: You can download the example code files for this course on GitHub at the following link: https://github.com/PacktPublishing/Angular-8---The-Complete-Guide. If you require support please email: [email protected]

Chapter 1 : Getting Started
- Course Introduction 00:00:58
- What is Angular? 00:02:00
- Angular vs Angular 2 vs Angular 7 00:02:45
- Project Setup and First App 00:06:12
- Editing the First App 00:09:04
- The Course Structure 00:04:00
- How to get the Most out of the Course 00:02:26
- What is TypeScript? 00:02:10
- A Basic Project Setup using Bootstrap for Styling 00:03:35
Chapter 2 : The Basics
- Module Introduction 00:00:57
- How an Angular App gets Loaded and Started 00:07:11
- Components are Important! 00:03:09
- Creating a New Component 00:06:52
- Understanding the Role of AppModule and Component Declaration 00:05:16
- Using Custom Components 00:01:12
- Creating Components with the CLI & Nesting Components 00:03:51
- Working with Component Templates 00:03:09
- Working with Component Styles 00:04:02
- Fully Understanding the Component Selector 00:03:50
- What is Databinding? 00:02:50
- String Interpolation 00:05:19
- Property Binding 00:06:34
- Property Binding vs String Interpolation 00:03:08
- Event Binding 00:04:09
- Passing and Using Data with Event Binding 00:04:37
- Two-Way-Databinding 00:02:48
- Combining all Forms of Databinding 00:01:47
- Understanding Directives 00:02:17
- Using ngIf to Output Data Conditionally 00:03:53
- Enhancing ngIf with an Else Condition 00:02:46
- Styling Elements Dynamically with ngStyle 00:05:02
- Applying CSS Classes Dynamically with ngClass 00:02:54
- Outputting Lists with ngFor 00:03:44
- Getting the Index when using ngFor 00:02:53
Chapter 3 : Course Project - The Basics
- Project Introduction 00:01:05
- Planning the App 00:05:34
- Setting up the Application 00:04:32
- Creating the Components 00:09:33
- Using the Components 00:03:16
- Adding a Navigation Bar 00:05:10
- Creating a "Recipe" Model 00:04:33
- Adding Content to the Recipes Components 00:07:42
- Outputting a List of Recipes with ngFor 00:04:38
- Displaying Recipe Details 00:05:53
- Working on the ShoppingListComponent 00:01:50
- Creating an "Ingredient" Model 00:02:36
- Creating and Outputting the Shopping List 00:02:27
- Adding a Shopping List Edit Section 00:03:28
- Wrap Up & Next Steps 00:00:54
Chapter 4 : Debugging
- Understanding Angular Error Messages 00:04:36
- Debugging Code in the Browser Using Sourcemaps 00:05:32
- Using Augury to Dive into Angular Apps 00:02:01
Chapter 5 : Components & Databinding Deep Dive
- Module Introduction 00:00:37
- Splitting Apps into Components 00:05:56
- Property & Event Binding Overview 00:01:44
- Binding to Custom Properties 00:05:44
- Assigning an Alias to Custom Properties 00:02:00
- Binding to Custom Events 00:09:06
- Assigning an Alias to Custom Events 00:00:57
- Custom Property and Event Binding Summary 00:02:02
- Understanding View Encapsulation 00:05:00
- More on View Encapsulation 00:02:43
- Using Local References in Templates 00:04:36
- Getting Access to the Template & DOM with @ViewChild 00:05:02
- Projecting Content into Components with ng-content 00:03:22
- Understanding the Component Lifecycle 00:04:54
- Seeing Lifecycle Hooks in Action 00:11:55
- Lifecycle Hooks and Template Access 00:02:33
- Getting Access to ng-content with @ContentChild 00:03:01
- Wrap Up 00:00:50
Chapter 6 : Course Project - Components & Databinding
- Introduction 00:00:50
- Adding Navigation with Event Binding and ngIf 00:07:32
- Passing Recipe Data with Property Binding 00:04:44
- Passing Data with Event and Property Binding (Combined) 00:10:32
- Allowing the User to Add Ingredients to the Shopping List 00:07:23
Chapter 7 : Directives Deep Dive
- Module Introduction 00:01:23
- ngFor and ngIf Recap 00:03:36
- ngClass and ngStyle Recap 00:02:57
- Creating a Basic Attribute Directive 00:06:56
- Using the Renderer to build a Better Attribute Directive 00:07:05
- Using HostListener to Listen to Host Events 00:03:00
- Using HostBinding to Bind to Host Properties 00:03:17
- Binding to Directive Properties 00:06:44
- What Happens behind the Scenes on Structural Directives? 00:03:05
- Building a Structural Directive 00:06:14
- Understanding ngSwitch 00:02:49
Chapter 8 : Course Project – Directives
- Building and Using a Dropdown Directive 00:06:26
Chapter 9 : Using Services & Dependency Injection
- Module Introduction 00:01:40
- Why would you Need Services? 00:02:04
- Creating a Logging Service 00:03:33
- Injecting the Logging Service into Components 00:06:22
- Creating a Data Service 00:06:41
- Understanding the Hierarchical Injector 00:02:41
- How many Instances of Service Should It Be? 00:02:13
- Injecting Services into Services 00:04:24
- Using Services for Cross-Component Communication 00:04:07
Chapter 10 : Course Project - Services & Dependency Injection
- Introduction 00:01:24
- Setting up the Services 00:01:15
- Managing Recipes in a Recipe Service 00:04:08
- Using a Service for Cross-Component Communication 00:05:07
- Adding the Shopping List Service 00:05:04
- Using Services for "Push Notifications" 00:03:09
- Adding Ingredients to Recipes 00:03:42
- Passing Ingredients from Recipes to the Shopping List (via a Service) 00:07:04
Chapter 11 : Changing Pages with Routing
- Module Introduction 00:01:27
- Why do we need a Router? 00:01:16
- Setting up and Loading Routes 00:08:02
- Navigating with Router Links 00:05:18
- Understanding Navigation Paths 00:04:54
- Styling Active Router Links 00:05:02
- Navigating Programmatically 00:03:28
- Using Relative Paths in Programmatic Navigation 00:05:10
- Passing Parameters to Routes 00:03:11
- Fetching Route Parameters 00:04:02
- Fetching Route Parameters Reactively 00:07:26
- An Important Note about Route Observables 00:02:43
- Passing Query Parameters and Fragments 00:05:53
- Retrieving Query Parameters and Fragments 00:03:16
- Practicing and some Common Gotchas 00:06:08
- Setting up Child (Nested) Routes 00:04:28
- Using Query Parameters – Practice 00:05:37
- Configuring the Handling of Query Parameters 00:01:50
- Redirecting and Wildcard Routes 00:04:36
- Outsourcing the Route Configuration 00:04:40
- An Introduction to Guards 00:01:46
- Protecting Routes with canActivate 00:08:55
- Protecting Child (Nested) Routes with canActivateChild 00:02:52
- Using a Fake Auth Service 00:01:43
- Controlling Navigation with canDeactivate 00:12:28
- Passing Static Data to a Route 00:05:56
- Resolving Dynamic Data with the resolve Guard 00:09:54
- Understanding Location Strategies 00:04:44
- Wrap Up 00:00:51
Chapter 12 : Course Project – Routing
- Planning the General Structure 00:01:36
- Setting up Routes 00:07:58
- Adding Navigation to the App 00:01:42
- Marking Active Routes 00:01:31
- Fixing Page Reload Issues 00:02:51
- Child Routes: Challenge 00:01:54
- Adding Child Routing Together 00:04:22
- Configuring Route Parameters 00:06:22
- Passing Dynamic Parameters to Links 00:03:01
- Styling Active Recipe Items 00:01:15
- Adding Editing Routes 00:03:44
- Retrieving Route Parameters 00:03:19
- Programmatic Navigation to the Edit Page 00:04:47
- One Note about Route Observables 00:00:52
Chapter 13 : Understanding Observables
- Module Introduction 00:04:26
- Analysing a Built-in Angular Observable 00:04:11
- Building & Using a First Simple Observable 00:03:10
- Building & Using a Custom Observable from Scratch 00:06:30
- Unsubscribe! 00:03:33
- Where to learn more 00:01:32
- Using Subjects to Pass AND Listen to Data 00:06:23
- Understanding Observable Operators 00:02:32
- Wrap Up 00:01:22
Chapter 14 : Handling Forms in Angular Apps
- Improving the Reactive Service with Observables (Subjects) 00:03:52
Chapter 15 : Course Project – Forms
- Module Introduction 00:01:19
- Why do we Need Angular's Help? 00:02:22
- Template-Driven (TD) vs Reactive Approach 00:01:16
- An Example Form 00:01:33
- TD: Creating the Form and Registering the Controls 00:05:43
- TD: Submitting and Using the Form 00:06:16
- TD: Understanding Form State 00:02:29
- TD: Accessing the Form with @ViewChild 00:03:04
- TD: Adding Validation to check User Input 00:04:14
- TD: Using the Form State 00:04:27
- TD: Outputting Validation Error Messages 00:02:24
- TD: Set Default Values with ngModel Property Binding 00:02:16
- TD: Using ngModel with Two-Way-Binding 00:02:49
- TD: Grouping Form Controls 00:03:30
- TD: Handling Radio Buttons 00:03:27
- TD: Setting and Patching Form Values 00:04:42
- TD: Using Form Data 00:04:44
- TD: Resetting Forms 00:01:48
- Introduction to the Reactive Approach 00:00:40
- Reactive: Setup 00:02:26
- Reactive: Creating a Form in Code 00:04:07
- Reactive: Syncing HTML and Form 00:03:58
- Reactive: Submitting the Form 00:02:16
- Reactive: Adding Validation 00:02:51
- Reactive: Getting Access to Controls 00:03:47
- Reactive: Grouping Controls 00:03:47
- Reactive: Arrays of Form Controls (FormArray) 00:07:31
- Reactive: Creating Custom Validators 00:06:11
- Reactive: Using Error Codes 00:03:20
- Reactive: Creating a Custom Async Validator 00:04:38
- Reactive: Reacting to Status or Value Changes 00:02:11
- Reactive: Setting and Patching Values 00:02:10
Chapter 16 : Course Project – Forms
- Introduction 00:01:00
- TD: Adding the Shopping List Form 00:03:43
- Adding Validation to the Form 00:02:22
- Allowing the Selection of Items in the List 00:04:25
- Loading the Shopping List Items into the Form 00:03:02
- Updating existing Items 00:03:16
- Resetting the Form 00:02:35
- Allowing the the User to Clear (Cancel) the Form 00:01:17
- Allowing the Deletion of Shopping List Items 00:02:53
- Creating the Template for the (Reactive) Recipe Edit Form 00:05:00
- Creating the Form for Editing Recipes 00:05:06
- Syncing HTML with the Form 00:03:52
- Adding Ingredient Controls to a Form Array 00:05:39
- Adding new Ingredient Controls 00:03:39
- Validating User Input 00:05:10
- Submitting the Recipe Edit Form 00:07:31
- Adding a Delete and Clear (Cancel) Functionality 00:04:47
- Redirecting the User (after Deleting a Recipe) 00:01:47
- Adding an Image Preview 00:01:48
- Providing the Recipe Service Correctly 00:01:59
- Deleting Ingredients and Some Finishing Touches 00:03:35
Chapter 17 : Using Pipes to Transform Output
- Introduction & Why Pipes are Useful 00:02:02
- Using Pipes 00:03:28
- Parametrizing Pipes 00:02:11
- Where to learn more about Pipes 00:01:57
- Chaining Multiple Pipes 00:02:20
- Creating a Custom Pipe 00:06:42
- Parametrizing a Custom Pipe 00:02:36
- Example: Creating a Filter Pipe 00:07:02
- Pure and Impure Pipes (or: How to "fix" the Filter Pipe) 00:04:46
- Understanding the "async" Pipe 00:04:04
Chapter 18 : Making Http Requests
- Introduction & How Http Requests Work in SPAs 00:01:59
- Example App & Backend Setup 00:03:08
- Sending Requests (Example: POST Request) 00:09:11
- Adjusting Request Headers 00:02:38
- Sending GET Requests 00:05:42
- Sending a PUT Request 00:01:43
- Transform Responses Easily with Observable Operators (map()) 00:03:30
- Using the Returned Data 00:02:30
- Catching Http Errors 00:03:41
- Using the "async" Pipe with Http Requests 00:04:05
Chapter 19 : Course Project – Http
- Introduction 00:01:21
- Setting up Firebase as a Dummy Backend 00:02:54
- Sending PUT Requests to Save Data 00:08:11
- GETting Back the Recipes 00:04:22
- Transforming Response Data to Prevent Errors 00:04:36
Chapter 20 : Authentication & Route Protection in Angular Apps
- Module Introduction 00:00:58
- How Authentication Works in Single-Page-Applications 00:05:01
- Creating a Signup Page and Route 00:06:32
- Setting up the Firebase SDK 00:04:05
- Signing Users Up 00:03:23
- Signin Users In 00:05:03
- Requiring a Token (on the Backend) 00:02:32
- Sending the Token 00:06:09
- Checking and Using Authentication Status 00:02:39
- Adding a Logout Button 00:02:10
- Route Protection and Redirection Example 00:04:14
- Wrap Up 00:00:57
Chapter 21 : Using Angular Modules & Optimizing Apps
- Module Introduction 00:01:03
- The Idea behind Modules 00:01:41
- Understanding the App Module 00:05:47
- Understanding Feature Modules 00:02:06
- Creating a Recipe Feature Module 00:09:55
- Registering Routes in a Feature Module 00:04:47
- Understanding Shared Modules 00:00:58
- Creating a Shared Module 00:05:07
- Creating a Shopping List Feature Module 00:04:09
- Loading Components via Selectors vs Routing 00:03:19
- A Common Gotcha 00:01:36
- Creating the Auth Feature Module 00:04:35
- Understanding Lazy Loading 00:01:56
- Adding Lazy Loading to the Recipes Module 00:08:20
- How Modules and Services Work Together 00:05:47
- Understanding the Core Module 00:00:53
- Creating a Basic Core Module 00:05:37
- Restructuring Services to use the Child Injector 00:04:32
- Using Ahead-of-Time Compilation 00:05:38
- How to use AoT Compilation with the CLI 00:03:18
- Preloading Lazy Loaded Routes 00:04:11
- Wrap Up 00:00:31
Chapter 22 : Deploying an Angular App
- Module Introduction 00:00:41
- Deployment Preparations and Important Steps 00:04:06
- Example: Deploying to AWS S3 00:06:36
Chapter 23 : Bonus: The HttpClient
- Module Introduction 00:00:56
- The Documentation 00:01:49
- Unlocking 00:06:36
- Request Configuration and Response 00:06:09
- Requesting Events 00:04:53
- Settings Headers 00:03:11
- Http Parameters 00:02:51
- Progress 00:05:45
- Interceptors 00:08:56
- Modifying Requests in Interceptors 00:04:50
- Multiple Interceptors 00:04:58
- Wrap Up 00:00:36
Chapter 24 : Bonus: Working with NgRx in our Project
- Module Introduction 00:02:07
- State Challenges 00:08:29
- Getting Started with Reducers 00:08:28
- Adding Actions 00:03:57
- Finishing the First Reducer 00:03:11
- Registering the Application Store 00:01:56
- Selecting Data from State 00:04:17
- Dispatch Actions 00:05:24
- More Actions and Adding Ingredients 00:07:53
- Dispatching Update and Deleting Shopping List Actions 00:06:55
- Expanding App State 00:05:01
- Editing the Shopping-List via NgRx 00:07:21
- Managing all Relevant State 00:03:56
- Authentication and Side Effects – Introduction 00:02:52
- Setting up the Auth Store Files 00:06:05
- The Reducer 00:03:51
- Adding Reducer Logic & Actions 00:02:36
- Adjusting the App Module Setup 00:02:54
- Using Authentication 00:05:18
- Dispatch Actions 00:04:23
- Getting State Access in Http Interceptor 00:06:25
- Handling the Auth Token 00:01:58
- Only React to Actions Once via take(1) 00:02:47
- A r Look at Effects 00:03:21
- Auth Effects and Actions 00:03:03
- Effects - How they Work 00:04:59
- Adding Auth Signup 00:09:19
- Adding Auth Signin 00:04:47
- Navigation as a Side Effect 00:01:22
- Handling Logout via NgRx 00:02:13
- Additional Fixes 00:01:20
- Redirecting Upon Logout 00:02:03
- What's Next? 00:03:11
- The Router Store Package 00:01:46
- Store Devtools 00:05:54
- Lazy Load and Dynamic Injection 00:07:54
- Adding Recipe Actions 00:04:23
- Adding Recipe Reducers 00:05:39
- Dispatching and Selecting State 00:04:46
- Viewing and Deleting Recipes via NgRx 00:07:39
- Editing and Updating Recipes via NgRx 00:05:44
- Recipes Side Effects - Fetching from Server 00:09:49
- Recipes Side Effects - Storing Recipes on Server 00:04:59
- Cleaning Up 00:03:12
- Wrap Up 00:01:08
Chapter 25 : Bonus: Angular Universal
- Module Introduction 00:03:04
- A Look at the Prequisites 00:02:54
- Creating the Server Main File (main.server.ts) 00:06:13
- Working on the tsconfig Configuration 00:05:15
- Handling SSR as a New App (in .angular-cli.json) 00:06:18
- Creating the Server 00:14:27
- Wrap Up 00:01:43
Chapter 26 : Angular Animations
- Introduction 00:01:04
- Setting up the Starting Project 00:00:53
- Animations Triggers and State 00:07:12
- Switching between States 00:02:04
- Transitions 00:01:55
- Advanced Transitions 00:05:22
- Transition Phases 00:03:57
- The "void" State 00:06:11
- Using Keyframes for Animations 00:05:32
- Grouping Transitions 00:02:11
- Using Animation Callbacks 00:02:38
Chapter 27 : A Basic Introduction to Unit Testing in Angular Apps
- Introduction 00:01:19
- Why Unit Tests? 00:02:13
- Analysing the Testing Setup (as created by the CLI) 00:08:01
- Running Tests (with the CLI) 00:02:00
- Adding a Component and some fitting Tests 00:06:15
- Testing Dependencies: Components and Services 00:06:56
- Simulating Async Tasks 00:09:42
- Using "fakeAsync" and "tick" 00:02:14
- Isolated vs Non-Isolated Tests 00:06:10
Chapter 28 : Course Roundup
- Introduction 00:01:33
Chapter 29 : Custom Project & Workflow Setup
- Introduction 00:00:44
- Initializing the Project 00:00:48
- Setting up the Basic Project Files 00:03:17
- Installing the Core Dependencies 00:02:15
- Filling the Project Files with Some Life 00:09:35
- index.html & Polyfills 00:02:06
- Installing Development Dependencies 00:01:46
- Setting up a Development Workflow 00:11:13
- Finishing & Using the Development Workflow 00:01:30
- Setting up a Production Workflow 00:09:49
- Adding Types & Fixing Bugs 00:03:48
- Finishing Touches 00:02:56