Angular Architecture How to Build Scalable Web Applications

Build a scalable and maintainable applications with Angular 9 (NgRx, Firebase, SCSS, Angular Material)
Angular Architecture How to Build Scalable Web Applications
File Size :
2.31 GB
Total length :
7h 31m



Danil Chigirev


Last update




Angular Architecture How to Build Scalable Web Applications

What you’ll learn

Organization of a clean project structure
Strict Data Models
Project and environment settings
File structure for styles and markup
Correct organization of Shared components
Using dictionaries to store commonly used values
Configuring Authentication
File upload and image processing
Create complex compound forms using multiple files
Working with lists of values in a store

Angular Architecture How to Build Scalable Web Applications


Basic programming skills
Basic knowledge of Angular


The main goal of the course is to learn how to make scalable applications that will be easy to maintain, and on which you can conveniently work as a team.You will see that a correctly chosen architecture allows you to concentrate on the tasks of business logic and saves time if you are developing a large project.If your application has become confusing and hard to maintain, or if you know the elements of Angular, but you are not sure how they can be combined in the best way, this course is for you.We will use strong TypeScript data-models, NgRx to store data, Firebase as a backend, SCSS and BEM-methodology for styles, Angular Material as a core of Shared controls. And of course RxJS to make all these things work together.The course is designed for students who have already had [already have] experience in developing with Angular, at least at the level of creating Tour of Heroes from the official site and familiarization with the Angular documentation.During this course, we will create the CourseApp application, which is a platform for posting resumes and jobs.The final application will be quite large, because it is impossible to show complex architecture on a simple application. But each section is accompanied by ready-made code that you can use.


Section 1: Beginning

Lecture 1 Course Preview

Lecture 2 How to work with the course

Lecture 3 Installation

Lecture 4 THEORY: General Structure of Web Applications

Lecture 5 THEORY: Border between Angular and Typescript

Section 2: Settings

Lecture 6 Preview

Lecture 7 Default Settings

Lecture 8 Tsconfig

Lecture 9 Environments

Lecture 10 Packages

Lecture 11 THEORY: Firebase

Lecture 12 Firebase Control Panel

Lecture 13 Firebase config

Lecture 14 Adding Firebase in Module and Component

Lecture 15 Firestore

Lecture 16 Speed Optimization

Lecture 17 Removing Default page

Section 3: Styles

Lecture 18 THEORY: Styles

Lecture 19 Tools

Lecture 20 THEORY: SCSS

Lecture 21 THEORY: BEM

Lecture 22 THEORY: Component Styles

Lecture 23 THEORY: Styles Structure

Lecture 24 Styles Folder

Lecture 25 Header Component

Lecture 26 Demo Section

Lecture 27 Ending

Section 4: Shared

Lecture 28 THEORY: Review basic Angular Elements

Lecture 29 THEORY: Division into Modules and Elements Grouping

Lecture 30 THEORY: When does a Component become a Module?

Lecture 31 Intro

Lecture 32 THEORY: Shared

Lecture 33 Angular Material Folders

Lecture 34 Shared Folders

Lecture 35 THEORY: Moving Components to Shared

Lecture 36 Button

Lecture 37 THEORY: Form Controls

Lecture 38 Input

Lecture 39 THEORY: Validation

Lecture 40 Form-field

Lecture 41 Form-field Validators

Lecture 42 Password

Lecture 43 THEORY: Frontend Models

Lecture 44 Frontend Models

Lecture 45 THEORY: Why use a Shared Component if you already have a Material Component?

Lecture 46 Select

Lecture 47 Checkboxes

Lecture 48 Radios

Lecture 49 Date

Lecture 50 DateRange

Lecture 51 Autocomplete Preview

Lecture 52 Autocomplete

Lecture 53 Form Buttons

Lecture 54 Demo Actions Section

Lecture 55 Spinner

Lecture 56 THEORY: Services

Lecture 57 Notification

Lecture 58 Ending

Section 5: Data Models

Lecture 59 Preview

Lecture 60 THEORY: Data Models

Lecture 61 Deleting Test DB

Lecture 62 Backend Models

Lecture 63 Firebase Collections

Lecture 64 Ending

Section 6: Dictionaries

Lecture 65 Form Items

Lecture 66 THEORY: NgRx

Lecture 67 NgRx DevTools

Lecture 68 Basic Files

Lecture 69 Models

Lecture 70 Actions and Reducer

Lecture 71 THEORY: RxJS

Lecture 72 Effects

Lecture 73 Root Registration

Lecture 74 Selectors

Lecture 75 Store App Module

Lecture 76 Redux Tool

Lecture 77 Flags

Lecture 78 Assets

Lecture 79 Countries

Lecture 80 Ending

Section 7: Authentication

Lecture 81 Preview

Lecture 82 Enable Firebase Auth

Lecture 83 User Store: Structure

Lecture 84 User Store: Models

Lecture 85 User Store: Actions

Lecture 86 User Store: Reducer

Lecture 87 Effects: SignUp

Lecture 88 Effects: SignIn

Lecture 89 Effects: SignOut

Lecture 90 Selectors

Lecture 91 Auth Forms Intro

Lecture 92 Auth Page Structure

Lecture 93 Header Links

Lecture 94 App Routing

Lecture 95 Registration: Form Validation

Lecture 96 Registration: Template

Lecture 97 Registration: Loading

Lecture 98 Registration: Dispatch

Lecture 99 Registration: test

Lecture 100 Registration: Store Data

Lecture 101 Registration: Firebase Redirect

Lecture 102 Email Confirm

Lecture 103 Init User Intro

Lecture 104 Store: Init

Lecture 105 Sign Out

Lecture 106 Log In

Lecture 107 Ending

Section 8: Static

Lecture 108 Intro

Lecture 109 Structure

Lecture 110 Markup and Styles

Section 9: Files Upload

Lecture 111 Preview

Lecture 112 Intro

Lecture 113 Structure

Lecture 114 Directive

Lecture 115 Directive + Demo

Lecture 116 Template

Lecture 117 Dropzone Directive

Lecture 118 OnDrop

Lecture 119 Select and Dropzone Test

Lecture 120 Upload Component

Lecture 121 Firebase Storage

Lecture 122 FileSize Pipe

Lecture 123 URL Paths to Demo

Lecture 124 Cropper

Lecture 125 Ending

Section 10: Profile

Lecture 126 Intro

Lecture 127 THEORY: Profile

Lecture 128 Structure

Lecture 129 Profile Link

Lecture 130 Form Markup

Lecture 131 THEORY: Stepper

Lecture 132 Stepper [part 1]

Lecture 133 Stepper [part 2]

Lecture 134 Stepper [part 3]

Lecture 135 Stepper [part 4]

Lecture 136 Stepper [part 5]

Lecture 137 Stepper [part 6]

Lecture 138 Stepper [part 7]

Lecture 139 Dictionaries Intro

Lecture 140 Dictionaries Import

Lecture 141 THEORY: Form Models

Lecture 142 THEORY: Form Tasks

Lecture 143 Personal Modules

Lecture 144 Personal

Lecture 145 UserPhoto Module

Lecture 146 Professional [part 1]

Lecture 147 Professional [part 2]

Lecture 148 Professional Roles

Lecture 149 Recruiter Form

Lecture 150 Employee Form

Lecture 151 Experiences

Lecture 152 Utils Control

Lecture 153 Employee Controls

Lecture 154 Store: User Create and Update

Lecture 155 Init Form Store

Lecture 156 Store: Form

Lecture 157 Resolver

Lecture 158 Mapper [part 1]

Lecture 159 Mapper [part 2]

Lecture 160 Mapper [part 3]

Lecture 161 Form Testing

Lecture 162 Firebase Testing

Lecture 163 Form Finishing

Lecture 164 Store: Display

Lecture 165 Display [part 1]

Lecture 166 Display [part 2]

Lecture 167 Testing in Redux Tool

Lecture 168 Firebase Rules

Lecture 169 Dictionaries Request

Lecture 170 Ending

Section 11: Employees

Lecture 171 Intro

Lecture 172 Structure

Lecture 173 Store

Lecture 174 Root Module

Lecture 175 Employees Component

Lecture 176 Employee Component

Lecture 177 Demo

Section 12: Jobs

Lecture 178 Intro

Lecture 179 Structure

Lecture 180 Store Models and Actions

Lecture 181 @angular/entity Intro

Lecture 182 Reducer

Lecture 183 Effects

Lecture 184 Selectors

Lecture 185 Jobs Component

Lecture 186 Adding Nested Components

Lecture 187 Job Component

Lecture 188 Form Module

Lecture 189 isEditable

Section 13: Guards

Lecture 190 THEORY: Guards

Lecture 191 Demo

Lecture 192 Structure

Lecture 193 Auth and Unauth Guards

Lecture 194 Role Guard

Lecture 195 Demo Guards

Lecture 196 Application Guards

Section 14: Deployment

Lecture 197 Dev/Prod Building

Lecture 198 Firebase Hosting

Lecture 199 Redirect

Section 15: Ending of the Course

Lecture 200 Congratulations!

Angular Developers

Course Information:

Udemy | English | 7h 31m | 2.31 GB
Created by: Danil Chigirev

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top