Angular (Full App) with Angular Material, Angularfire & NgRx

Focused View

Academind by Maximilian Schwarzmüller,Maximilian Schwarzmüller

10:32:46

102 View

01 - Getting Started

001 Welcome & Introduction.mp4

02:14

002 Whats Inside the Course.mp4

02:24

003 Join our Online Learning Community.html

004 How To Get The Most Out Of This Course.mp4

02:15

005 Planning the App.mp4

01:37

02 - A Brief Angular Refresher (OPTIONAL)

001 Module Introduction.mp4

00:46

002 What is Angular.mp4

04:22

003 MUST READ Angular CLI - Latest Version.html

004 Project Setup with the Angular CLI.mp4

04:23

005 How an Angular App Starts and Works.mp4

05:39

006 Adding Components.mp4

05:46

006 ng-refresh-01-first-component.zip

007 Template Syntax.mp4

07:00

007 ng-refresh-02-template-bindings.zip

008 Using Directives like ngFor and ngIf.mp4

04:22

008 ng-refresh-03-directives.zip

009 Custom Property & Event Binding.mp4

07:13

009 ng-refresh-04-custom-bindings.zip

010 Forms.mp4

04:17

010 ng-refresh-05-forms.zip

011 Understanding Services & Dependency Injection.mp4

11:10

011 ng-refresh-06-services-di.zip

012 Angular Routing.mp4

06:52

012 ng-refresh-07-routing.zip

013 Where to Dive Deeper.mp4

00:30

014 Useful Resources & Links.html

014 ng-refresh-01-first-component.zip

014 ng-refresh-02-template-bindings.zip

014 ng-refresh-03-directives.zip

014 ng-refresh-04-custom-bindings.zip

014 ng-refresh-05-forms.zip

014 ng-refresh-06-services-di.zip

014 ng-refresh-07-routing.zip

03 - Angular Material

001 Module Introduction.mp4

03:17

002 Understanding Angular Material Components.mp4

03:03

003 Adding Angular Material to a Project.mp4

13:13

004 Stay Up To Date!.mp4

00:52

005 Our First Angular Material Component - The Button.mp4

10:11

005 ng-mat-01-first-components.zip

006 Why Do We Have To Import Everything Separately.html

007 Creating the Course App Structure.mp4

07:54

008 Working on The Signup Form.mp4

05:05

009 Flexbox - A Quick Refresher.mp4

09:43

009 ng-mat-02-flexbox-demo.zip

010 Controlling the Layout with @angularflex-layout.mp4

06:05

010 ng-mat-03-flex-layout.zip

011 Adding & Configuring the Submit Button.mp4

05:06

012 Implementing Hints and Validation Errors (on Forms).mp4

09:38

012 ng-mat-04-form-validation.zip

013 Adding a Datepicker.mp4

09:18

014 Restricting Pickable Dates.mp4

03:27

014 ng-mat-05-datepicker.zip

015 Adding a Checkbox.mp4

04:28

016 Finishing the Form with Style.mp4

02:31

016 ng-mat-06-signup-component.zip

017 Wrap Up.mp4

01:26

018 Useful Resources & Links.html

018 ng-mat-01-first-components.zip

018 ng-mat-02-flexbox-demo.zip

018 ng-mat-03-flex-layout.zip

018 ng-mat-04-form-validation.zip

018 ng-mat-05-datepicker.zip

018 ng-mat-06-signup-component.zip

04 - Diving Deeper into Angular Material

001 Module Introduction.mp4

00:39

002 Adding Navigation & a Sidenav.mp4

09:13

003 Working on the Sidenav and Toolbar.mp4

05:13

003 ng-mat-adv-01-toolbar-sidenav.zip

004 Styling the Sidenav.mp4

09:09

005 Making the Page Responsive.mp4

05:08

005 ng-mat-adv-02-responsiveness.zip

006 Adding Navigation Items.mp4

09:39

007 Splitting the Navigation Into Components.mp4

09:39

007 ng-mat-adv-03-refactored-sidenav.zip

008 Working on the Welcome Screen.mp4

04:37

008 welcome-screen-html.zip

009 Adding a Tabs Component.mp4

04:40

009 ng-mat-adv-05-tabs.zip

010 Adding some Cards.mp4

06:20

010 ng-mat-adv-06-basic-card.zip

011 Adding a Dropdown Menu.mp4

06:00

012 Adding a Spinner to the Training Screen.mp4

09:16

013 Adding a Nice Exercise Timer.mp4

03:21

014 Adding a Cancel Dialog Screen.mp4

06:12

015 Passing Data to the Dialog.mp4

06:34

016 Adding Exit and Continue Options.mp4

03:07

016 ng-mat-adv-07-dialog.zip

017 Wrap Up.mp4

01:12

018 Useful Resources & Links.html

018 ng-mat-adv-01-toolbar-sidenav.zip

018 ng-mat-adv-02-responsiveness.zip

018 ng-mat-adv-03-refactored-sidenav.zip

018 ng-mat-adv-04-navigation-styling.zip

018 ng-mat-adv-05-tabs.zip

018 ng-mat-adv-06-basic-card.zip

018 ng-mat-adv-07-dialog.zip

05 - Working with Data and Angular Material

001 Module Introduction.mp4

00:48

002 Important RxJS 6.mp4

01:11

003 IMPORTANT Install rxjs-compat.html

004 Code without rxjs-compat.html

005 Implementing Authentication.mp4

18:37

005 data-01-auth.zip

006 Routing & Authentication.mp4

04:39

007 Route Protection.mp4

06:54

007 data-02-route-protection.zip

008 Preparing the Exercise Data.mp4

04:12

008 exercise-data.zip

009 Injecting & Using the Training Service.mp4

04:34

009 data-04-advanced-service.zip

010 Setting an Active Exercise.mp4

03:14

011 Controlling the Active Exercise.mp4

04:35

012 Adding a Form to the Training Component.mp4

03:21

013 Handling the Active Training via a Service.mp4

04:54

014 RxJS 6 Update.html

015 Handling Complete and Cancel Events.mp4

06:10

015 data-04-advanced-service.zip

016 Adding the Angular Material Data Table.mp4

14:07

016 data-05-data-table.zip

017 Adding Sorting to the Data Table.mp4

06:08

018 Adding Filtering to the Data Table.mp4

05:20

019 Data Table Filtering++.html

020 Adding Pagination to the Data Table.mp4

05:33

020 data-06-sorting-filtering-pagination.zip

021 Wrap Up.mp4

00:51

022 Useful Resources & Links.html

022 data-01-auth.zip

022 data-02-route-protection.zip

022 data-03-training-service.zip

022 data-04-advanced-service.zip

022 data-05-data-table.zip

022 data-06-sorting-filtering-pagination.zip

06 - Using Angularfire & Firebase

001 Module Introduction.mp4

00:59

002 What is Firebase.mp4

04:41

003 Getting Started with Firebase.mp4

02:26

004 What is Angularfire.mp4

02:08

005 RxJS Observables Refresher.mp4

06:24

006 Diving into Firebase.mp4

07:36

006 ng-fire-01-basic-example.zip

007 Listening to Value Changes (of Firestore).mp4

12:24

008 Operators & RxJS 6.html

009 Listening to Snapshot Changes (of Firestore, incl. Metadata).mp4

07:21

010 Restructuring the Code.mp4

06:27

011 How Firebase Manages Subscriptions.mp4

02:52

012 Storing Completed Exercises on Firestore.mp4

03:56

012 ng-fire-02-improved-usage.zip

013 Connecting the Data Table to Firestore.mp4

07:35

013 ng-fire-03-subscribe-data-table.zip

014 Working with Documents.mp4

05:03

015 Adding Real Authentication (Sign Up).mp4

05:38

016 Adding User Login.mp4

01:51

017 Understanding Authentication in SPAs.mp4

04:02

018 Configuring Firestore Security Rules.mp4

04:15

018 ng-fire-04-basic-auth.zip

019 Managing Firestore Subscriptions.mp4

05:31

019 ng-fire-05-cancel-subscriptions.zip

020 Reorganizing the Code.mp4

04:22

020 ng-fire-06-finish-auth.zip

021 Wrap Up.mp4

01:02

022 Useful Resources & Links.html

022 ng-fire-01-basic-example.zip

022 ng-fire-02-improved-usage.zip

022 ng-fire-03-subscribe-data-table.zip

022 ng-fire-04-basic-auth.zip

022 ng-fire-05-cancel-subscriptions.zip

022 ng-fire-06-finish-auth.zip

07 - Optimizing the App

001 Module Introduction.mp4

00:50

002 Style Improvements & Error Handling.mp4

05:26

003 Adding a Spinner.mp4

10:28

004 Adding a Re-Usable Snackbar (Notification).mp4

03:05

004 optimizations-01-snackbar-spinner.zip

005 Improving Error Handling.mp4

06:07

005 optimizations-02-error-handling.zip

006 Splitting the App Into Modules.mp4

07:00

006 optimizations-03-auth-module.zip

007 Optimizing Subscriptions.mp4

03:26

008 Creating a SharedModule.mp4

04:40

008 optimizations-04-shared-module.zip

009 Splitting Up Routes.mp4

03:33

010 Loading a Module Lazily.mp4

10:19

011 Moving the Auth Guard.mp4

02:37

011 optimizations-05-finished.zip

012 Wrap Up.mp4

01:58

013 Useful Resources & Links.html

013 optimizations-01-snackbar-spinner.zip

013 optimizations-02-error-handling.zip

013 optimizations-03-auth-module.zip

013 optimizations-04-shared-module.zip

013 optimizations-05-finished.zip

08 - Using NgRx for State Management

001 Module Introduction.mp4

04:04

002 What is Redux - An Overview.mp4

01:59

003 NgRx Core Concepts - A First Example.mp4

14:40

003 ngrx-01-basic-setup.zip

004 Working with Multiple Reducers & Actions.mp4

12:35

004 ngrx-02-reducers-actions.zip

005 Dispatching Actions & Selecting State Slices.mp4

04:37

006 Whats Up with the RxJS Import Syntax.html

007 Adding an Auth Reducer (and Actions).mp4

09:51

008 Adding Auth Subscriptions.mp4

08:09

008 ngrx-03-auth.zip

009 Adding the Training Reducer and Actions with Payloads.mp4

12:14

009 ngrx-04-training-store-actions.zip

010 Lazy Loaded State.mp4

04:34

011 Dispatching Training Actions.mp4

05:16

012 Selecting Training State.mp4

06:33

013 Selecting Single Values Correctly.mp4

07:30

014 Connecting the Data Table.mp4

03:14

015 Cleaning the Project Up.mp4

03:40

015 ngrx-05-training-store-finish.zip

016 Adding a small Bugfix.mp4

00:55

016 ngrx-06-bugfix.zip

017 Wrap Up.mp4

01:02

018 Useful Resources & Links.html

018 ngrx-01-basic-setup.zip

018 ngrx-02-reducers-actions.zip

018 ngrx-03-auth.zip

018 ngrx-04-training-store-actions.zip

018 ngrx-05-training-store-finish.zip

018 ngrx-06-bugfix.zip

09 - Deploying the App

001 Introduction & Preparation.mp4

01:43

002 Deploying the App to Firebase Hosting.mp4

04:10

002 deployment.zip

003 Useful Resources & Links.html

003 deployment.zip

10 - BONUS Angular Material Themes

001 Module Introduction.mp4

00:23

002 Understanding Angular Material Themes.mp4

01:38

003 Adding the Theme with Angular 6.html

004 Customising an Angular Material Theme.mp4

05:48

004 custom-theme.zip

005 Useful Resources & Links.html

005 custom-theme.zip

11 - Round Up

001 Course Roundup.mp4

00:55

002 Bonus More Content!.html

Description

Use Angular, Angular Material, Angularfire (+ Firebase with Firestore) and NgRx to build a real Angular App

What You'll Learn?

Build amazing Angular apps with modern tools like Material, NgRx and Angularfire
Build real-time apps that not only work great but also look awesome!

Who is this for?

Students who want to dive deeper into Angular and who want to build a real app with it

Students who want to practice Angular

Students who want a practical guide towards building Angular apps

Students interested in using Firebase, NgRx and/ or Angular Material

More details

Description
Angular is an amazing frontend JavaScript &Â TypeScript 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!
Who this course is for:
Students who want to dive deeper into Angular and who want to build a real app with it
Students who want to practice Angular
Students who want a practical guide towards building Angular apps
Students interested in using Firebase, NgRx and/ or Angular Material

User Reviews

Rating

average 0

Total votes0

Focused display

Angular

Academind by Maximilian Schwarzmüller

Instructor's Courses

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.We've taught more than 2,000,000 students on a broad variety of topics. We'd love to teach you as well! :)Keep learning!

Maximilian Schwarzmüller

Instructor's Courses

Experience as (Web) DeveloperStarting out at the age of 12 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!I also build full-stack applications and acquired expert DevOps and cloud computing knowledge - proven by the many AWS certifications I hold (incl. the top-level Solutions Architect Professional certification).As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.Experience as InstructorAs a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses and more than 2,000,000 students on Udemy is the best proof for that.Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 2,000,000 students.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.