Angular (Full App) with Angular Material, Angularfire & NgRx
Use Angular, Angular Material, Angularfire (+ Firebase with Firestore) and NgRx to build a real Angular App
Así estudias: curso autodidacta
- Autodidacta y 100% en línea: contenido disponible 24/7.
- Avanzas a tu ritmo: la plataforma guarda tu progreso.
- Sin tutor ni clases en vivo: el curso está diseñado para estudiarse por tu cuenta.
- Te evalúas con actividades automáticas, sin entregas a un tutor.
Lo que serás capaz de hacer
Angular is an amazing frontend JavaScript & TypeScript framework with which you can build powerful web applications. There are many 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! Please note that this course was recorded with an older version of Angular & Angular Material. The code shown in the videos might not always work with the latest versions of these packages. The general concepts & solution steps still apply, of course.
- 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!
Temario
UNIDAD 1 - Getting Started · 6 leccionesUNIDAD 1 - Getting Started
UNIDAD 1 - Getting Started
- Welcome & Introduction
- What's Inside the Course?
- Join our Online Learning Community
- How To Get The Most Out Of This Course
- Planning the App
- MUST READ: Angular & Angular Material Versions
UNIDAD 2 - A Brief Angular Refresher (OPTIONAL) · 13 leccionesUNIDAD 2 - A Brief Angular Refresher (OPTIONAL)
UNIDAD 2 - A Brief Angular Refresher (OPTIONAL)
- Module Introduction
- What is Angular?
- Project Setup with the Angular CLI
- How an Angular App Starts and Works
- Adding Components
- Template Syntax
- Using Directives like ngFor and ngIf
- Custom Property & Event Binding
- Forms
- Understanding Services & Dependency Injection
- Angular Routing
- Where to Dive Deeper
- Useful Resources & Links
UNIDAD 3 - Angular Material · 19 leccionesUNIDAD 3 - Angular Material
UNIDAD 3 - Angular Material
- Module Introduction
- Understanding Angular Material Components
- Adding Angular Material to a Project
- Stay Up To Date!
- Our First Angular Material Component - The Button
- Why Do We Have To Import Everything Separately?
- Creating the Course App Structure
- Working on The Signup Form
- Flexbox - A Quick Refresher
- Controlling the Layout with @angular/flex-layout
- Adding & Configuring the Submit Button
- Implementing Hints and Validation Errors (on Forms)
- Adding a Datepicker
- Restricting Pickable Dates
- Adding a Checkbox
- Finishing the Form with Style
- Time to Practice - Angular Material
- Wrap Up
- Useful Resources & Links
UNIDAD 4 - Diving Deeper into Angular Material · 18 leccionesUNIDAD 4 - Diving Deeper into Angular Material
UNIDAD 4 - Diving Deeper into Angular Material
- Module Introduction
- Adding Navigation & a Sidenav
- Working on the Sidenav and Toolbar
- Styling the Sidenav
- Making the Page Responsive
- Adding Navigation Items
- Splitting the Navigation Into Components
- Working on the Welcome Screen
- Adding a Tabs Component
- Adding some "Cards"
- Adding a Dropdown Menu
- Adding a Spinner to the Training Screen
- Adding a Nice Exercise Timer
- Adding a Cancel Dialog Screen
- Passing Data to the Dialog
- Adding "Exit" and "Continue" Options
- Wrap Up
- Useful Resources & Links
UNIDAD 5 - Working with Data and Angular Material · 23 leccionesUNIDAD 5 - Working with Data and Angular Material
UNIDAD 5 - Working with Data and Angular Material
- Module Introduction
- Important: RxJS 6
- IMPORTANT: Install rxjs-compat
- Code without rxjs-compat
- Implementing Authentication
- Time to Practice - Angular Material & Data
- Routing & Authentication
- Route Protection
- Preparing the Exercise Data
- Injecting & Using the Training Service
- Setting an Active Exercise
- Controlling the Active Exercise
- Adding a Form to the Training Component
- Handling the Active Training via a Service
- RxJS 6 Update
- Handling "Complete" and "Cancel" Events
- Adding the Angular Material Data Table
- Adding Sorting to the Data Table
- Adding Filtering to the Data Table
- Data Table Filtering++
- Adding Pagination to the Data Table
- Wrap Up
- Useful Resources & Links
UNIDAD 6 - Using Angularfire & Firebase · 22 leccionesUNIDAD 6 - Using Angularfire & Firebase
UNIDAD 6 - Using Angularfire & Firebase
- Module Introduction
- What is Firebase?
- Getting Started with Firebase
- What is Angularfire?
- RxJS Observables Refresher
- Diving into Firebase
- Listening to Value Changes (of Firestore)
- Operators & RxJS 6
- Listening to Snapshot Changes (of Firestore, incl. Metadata)
- Restructuring the Code
- How Firebase Manages Subscriptions
- Storing Completed Exercises on Firestore
- Connecting the Data Table to Firestore
- Working with Documents
- Adding Real Authentication (Sign Up)
- Adding User Login
- Understanding Authentication in SPAs
- Configuring Firestore Security Rules
- Managing Firestore Subscriptions
- Reorganizing the Code
- Wrap Up
- Useful Resources & Links
UNIDAD 7 - Optimizing the App · 15 leccionesUNIDAD 7 - Optimizing the App
UNIDAD 7 - Optimizing the App
- Module Introduction
- Style Improvements & Error Handling
- Adding a Spinner
- Time to Practice - Optimizations
- Adding a Re-Usable Snackbar (Notification)
- Improving Error Handling
- Splitting the App Into Modules
- Time to Practice - Modules
- Optimizing Subscriptions
- Creating a SharedModule
- Splitting Up Routes
- Loading a Module Lazily
- Moving the Auth Guard
- Wrap Up
- Useful Resources & Links
UNIDAD 8 - Using NgRx for State Management · 19 leccionesUNIDAD 8 - Using NgRx for State Management
UNIDAD 8 - Using NgRx for State Management
- Module Introduction
- What is Redux - An Overview
- NgRx Core Concepts - A First Example
- Working with Multiple Reducers & Actions
- Dispatching Actions & Selecting State Slices
- Time to Practice - NgRx
- What's Up with the RxJS Import Syntax?
- Adding an Auth Reducer (and Actions)
- Adding Auth Subscriptions
- Adding the Training Reducer and Actions with Payloads
- Lazy Loaded State
- Dispatching Training Actions
- Selecting Training State
- Selecting Single Values Correctly
- Connecting the Data Table
- Cleaning the Project Up
- Adding a small Bugfix
- Wrap Up
- Useful Resources & Links
UNIDAD 9 - Deploying the App · 3 leccionesUNIDAD 9 - Deploying the App
UNIDAD 9 - Deploying the App
- Introduction & Preparation
- Deploying the App to Firebase Hosting
- Useful Resources & Links
UNIDAD 10 - BONUS: Angular Material Themes · 5 leccionesUNIDAD 10 - BONUS: Angular Material Themes
UNIDAD 10 - BONUS: Angular Material Themes
- Module Introduction
- Understanding Angular Material Themes
- Adding the Theme with Angular 6
- Customising an Angular Material Theme
- Useful Resources & Links
UNIDAD 11 - Round Up · 2 leccionesUNIDAD 11 - Round Up
UNIDAD 11 - Round Up
- Course Roundup
- Bonus: More Content!
Certificado con validez SEP: lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
11 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
5 cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Academind by Maximilian Schwarzmüller.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 11 unidades · 145 lecciones · 55 h
- 12 meses de acceso
- 5 cuestionarios de evaluación
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Academind by Maximilian Schwarzmüller; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
¿El curso tiene validez SEP?
Sí. Al completar el curso recibes un certificado emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
¿El curso tiene tutor o clases en vivo?
No. Es un curso autodidacta: estudias por tu cuenta, a tu ritmo, sin tutor ni sesiones en vivo.
¿Cómo se evalúa?
Te evalúas con actividades automáticas, sin entregas a un tutor.
Cursos relacionados
Incluido en la Membresía Educativa
Este curso forma parte de los 647 cursos autodidactas con certificado que incluye la membresía, por un solo pago anual.
Membresía Educativa: cursos en línea con validez SEP
