Angular 6 (formerly Angular 2) - The Complete Guide (2018)

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