English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 11 Hours | 1.84 GB
Use Angular, Angular Material, Angularfire (+ Firebase with Firestore) and NgRx to build a real Angular App
Angular is an amazing frontend framework with which you can build powerful web applications.
There are a lot of courses that dive deeply into Angular but sometimes you just want to build an entire app and see how it all works in practice. And you want to use all these great third-party packages that can add a lot of awesome functionalities to your Angular app!
This course covers exactly that!
We’ll build an entire, realistic app which looks absolutely beautiful, uses Google’s Material Design and is extremely fast! Thanks to Firebase and Angularfire, we’ll add real-time database functionalities and see our updates almost before we make them!
Behind the scenes, NgRx will be used – a Redux-inspired state management solution that can greatly enhance your Angular app.
What are you waiting for, this is what you’ll get in detail:
- A brief refresher on Angular, just in case you forgot how it works (or never learned it)
- A detailed introduction into Angular Material, its docs and its usage
- A realistic app that uses many Angular Material components
- Examples for components like Datepickers, Sidenavs or the Material Data Table (incl. sorting, filtering and live updating!)
- A real-time database connection powered by Firebase (using Firestore) and Angularfire
- A better understanding of RxJS observables
- State-of-the-art state management with the help of NgRx
- And so much more!
This course is for you if you want to practice Angular, want to see it in action or want to learn it with the help of a 100% practical project!
Table of Contents
Getting Started
1 Welcome & Introduction
2 What’s Inside the Course
3 How To Get The Most Out Of This Course
4 Planning the App
A Brief Angular Refresher (OPTIONAL)
5 Useful Resources & Links
6 Template Syntax
7 Using Directives like ngFor and ngIf
8 Custom Property & Event Binding
9 Forms
10 Understanding Services & Dependency Injection
11 Angular Routing
12 Where to Dive Deeper
13 Module Introduction
14 What is Angular
15 Project Setup with the Angular CLI
16 How an Angular App Starts and Works
17 Adding Components
Angular Material
18 Time to Practice – Angular Material
19 Useful Resources & Links
20 Why Do We Have To Import Everything Separately
21 Module Introduction
22 Understanding Angular Material Components
23 Adding Angular Material to a Project
24 Stay Up To Date!
25 Our First Angular Material Component – The Button
26 Creating the Course App Structure
27 Working on The Signup Form
28 Flexbox – A Quick Refresher
29 Adding & Configuring the Submit Button
30 Implementing Hints and Validation Errors (on Forms)
31 Adding a Datepicker
32 Restricting Pickable Dates
33 Adding a Checkbox
34 Finishing the Form with Style
35 Wrap Up
Diving Deeper into Angular Material
36 Useful Resources & Links
37 Module Introduction
38 Adding Navigation & a Sidenav
39 Working on the Sidenav and Toolbar
40 Styling the Sidenav
41 Making the Page Responsive
42 Adding Navigation Items
43 Splitting the Navigation Into Components
44 Working on the Welcome Screen
45 Adding a Tabs Component
46 Adding some Cards
47 Adding a Dropdown Menu
48 Adding a Spinner to the Training Screen
49 Adding a Nice Exercise Timer
50 Adding a Cancel Dialog Screen
51 Passing Data to the Dialog
52 Adding Exit and Continue Options
53 Wrap Up
Working with Data and Angular Material
54 Data Table Filtering++
55 Useful Resources & Links
56 Time to Practice – Angular Material & Data
57 Module Introduction
58 Implementing Authentication
59 Routing & Authentication
60 Route Protection
61 Preparing the Exercise Data
62 Injecting & Using the Training Service
63 Setting an Active Exercise
64 Controlling the Active Exercise
65 Adding a Form to the Training Component
66 Handling the Active Training via a Service
67 Handling Complete and Cancel Events
68 Adding the Angular Material Data Table
69 Adding Sorting to the Data Table
70 Adding Filtering to the Data Table
71 Adding Pagination to the Data Table
72 Wrap Up
Using Angularfire & Firebase
73 Useful Resources & Links
74 Module Introduction
75 What is Firebase
76 Getting Started with Firebase
77 What is Angularfire
78 RxJS Oservables Refresher
79 Observables in Action
80 Listening to Value Changes (of Firestore)
81 Listening to Snapshot Changes (of Firestore, incl. Metadata)
82 Restructuring the Code
83 How Firebase Manages Subscriptions
84 Storing Completed Exercises on Firestore
85 Connecting the Data Table to Firestore
86 Working with Documents
87 Adding Real Authentication (Sign Up)
88 Adding User Login
89 Understanding Authentication in SPAs
90 Configuring Firestore Security Rules
91 Managing Firestore Subscriptions
92 Reorganizing the Code
93 Wrap Up
Optimizing the App
94 Useful Resources & Links
95 Time to Practice – Optimizations
96 Time to Practice – Modules
97 Module Introduction
98 Style Improvements & Error Handling
99 Adding a Spinner
100 Adding a Re-Usable Snackbar (Notification)
101 Improving Error Handling
102 Splitting the App Into Modules
103 Optimizing Subscriptions
104 Creating a SharedModule
105 Splitting Up Routes
106 Loading a Module Lazily
107 Moving the Auth Guard
108 Wrap Up
Using NgRx for State Management
109 Useful Resources & Links
110 Time to Practice – NgRx
111 What’s Up with the RxJS Import Syntax
112 NgRx Core Concepts – A First Example
113 Working with Multiple Reducers & Actions
114 Dispatching Actions & Selecting State Slices
115 Adding an Auth Reducer (and Actions)
116 Adding Auth Subscriptions
117 Adding the Training Reducer and Actions with Payloads
118 Lazy Loaded State
119 Dispatching Training Actions
120 Selecting Training State
121 Selecting Single Values Correctly
122 Connecting the Data Table
123 Cleaning the Project Up
124 Adding a small Bugfix
125 Wrap Up
126 Module Introduction
127 What is Redux – An Overview
Deploying the App
128 Useful Resources & Links
129 Introduction & Preparation
130 Deploying the App to Firebase Hosting
BONUS Angular Material Themes
131 Useful Resources & Links
132 Module Introduction
133 Understanding Angular Material Themes
134 Customising an Angular Material Theme
Round Up
135 Course Roundup
Resolve the captcha to access the links!