Please enable JavaScript.
Coggle requires JavaScript to display documents.
Fireship - Angular & Firebase - Coggle Diagram
Fireship - Angular & Firebase
Project Intro
Build a high-performance PWA with Angular and Firebase from scratch.
https://fireship.io/courses/angular/
Video Points
Broken down into three core features
User Module
Sign in with Google auth
Email Password auth
Learn real time data and reactive forms
Drag and drop kanban feature
Angular material CDK
Connect to the backend Firestore db
SSR and SEO
Build a customer list
SSR - Angular Universal
with NestJS
Deploy it to Google Cloud Run
Prerendering
JAM Stack
Live working demo
https://firestarter.fireship.io/
Angular Beginner Project
Code
https://github.com/fireship-io/angular-tic-tac-toe
Recommended Lessons
Testing Angular Apps
https://fireship.io/lessons/angular-testing-guide-including-firebase
Material Datatables
https://fireship.io/lessons/material-data-tables-with-firestore
Reactive Forms Basics
https://fireship.io/lessons/basics-reactive-forms-in-angular
Kitchen Sink
https://fireship.io/tags/angular
Page link
https://fireship.io/courses/angular/start-angular-beginner-tutorial/
Intro
Resources
Packages
Nodejs
nvm
VS Code
Links
Source code
https://github.com/codediodeio/angular-firestarter
Angular Docs
https://angular.io/
Supplementary
Typescript Basics
https://youtu.be/ahCwqrYpIuM
RxJS Top Ten Concepts
https://youtu.be/ewcoEYS85Co
CLI
Commands
Create a new Angular project
$ npx
angular/cli
new <project-name>
Create a new Angular Component - SFC
$ npx ng g c <component-name> -m app --inline-template --inline-style
Others in package.json
ng lint
ng test
Add angular material
$ npx ng add
angular/material
Anatomy
tslint.json
rules for code quality
tsconfig
how to compile ts to js
package.json
all dependencies
prod
dev
scripts to run to build, test etc
karma config
config for test runner
browserlist
config for different browsers to target
angular.json
customise behaviour of the cli commands
assets, files and script, ssr etc can be configured
gitignore
src
source code
index.html
root entry
seo
additional links like cdn
styles.css
global css file
environments
dev vs prod variables
assets
static images or raw files
app
where the code gets generated when you run cli commands
components, modules and services
node modules
code gets downloaded when you run npm install
dont modify it
it gets modified everytime you install a new package
e2e
end to end test
dist
final build code for deployments
ng build or serve
Components
like lego pieces
augury for debugging
binding
attribute
html properties
events
interpolation
using component <component-name>
or router-outlet
popup or modal
angular elements
directives
ngIf
ngFor
ngClass
custom directives
pipes
change data forms
takes in a value and gives another value
custom pipes
async pipe
observables to normal data to be rendered in html
Never touch the DOM
component lifecycle
constructor only dependency
ngOnInit
ngOnDestroy
AfterView
change detection
ngDoCheck
used for debug
underneath its zone.js
checks for changes
smart component vs dumb component
dumb only for UI, smart logic or fetching data
Bonus video
Sharing data between components 4 ways
https://youtu.be/I317BhehZKM
Output
shared services
Input
ViewChild
one component can be injected onto another
Should be used with AfterView lifecycle method
Dependency injection
Share data and functions between components
DRY
Separation of concerns
Service can be injected into any component
Global data
Stateful service
Data can be shared
Stateless service
Only exposes helper methods
Components only focus on UI and service for logic
Services have to be injected in the component constructor
private service is only available in the component .ts file
public services are available in the component .html file
Modules
ngModule
three things
declarations
Components defined in this module
export
Components used in this module
import
Components that can be imported by other modules
Entry components and providers
Organize the code
Improves performance by lazy loading
declarations array in module file
Components in this module
By default Components in the module can be used only within the module, not even in the root module
To make a new module know to root, import it in app.module.ts file and to use the component we have to export in the sub module file
Main App
App Overview
user module
user authentication
user profile
shared module
ui elements that are common between multiple features
Buttons
Nav bar
services
kanban module
true angular feature module
collection of boards
board list
dialogs
customers module
ssr
angular universal
search engine and social media bots
:check: Generate a new project
Meet Angular Material
Ionic
Mobile
CDK
Own styles
Pre built directives to add interactivity
Infinite scroll - Fireship video on youtube
https://youtu.be/Ppl64MY6FFc
:check: 1. Install angular material
:check: 1. Use custom theme option
:check: 2. HammerJS - Yes
:check: 3. Browser animations - Yes
:check: Delete all boilerplate code in index.html
Add a button
Import from angular material
Leave router outlet
:check: Customize in styles.scss
Colour
Material design colour generator
Font - Google fonts
custom typography
light and dark theme
Schematics
Shared Module
App Navigation Shell
Routing
Firebase Setup
Users
Google signin
Email password auth
Lazy loaded login feature
Auth guard
Kanban
CDK drag and drop
Drag and drop animation
Database service
Dialogs
Firestore data model
Delete button
Kanban module
Server-side rendering
Angular Universal with NestJS
Prerendering
SEO Service
Angular Universal on Google Cloud Run
SSR What? Why?