Angular Architecture. How to Build Scalable Web Applications

7h 34m 45s
English
Paid

Course description

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.

Read more about the course

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.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 200 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Angular Architecture. How to Build Scalable Web Applications

0:00
/
#1: Course Preview

All Course Lessons (200)

#Lesson TitleDurationAccess
1
Course Preview Demo
04:26
2
How to work with the course
00:55
3
Installation
01:34
4
THEORY: General Structure of Web Applications
03:49
5
THEORY: Border between Angular and Typescript
02:28
6
Preview
00:21
7
Default Settings
01:52
8
Tsconfig
01:51
9
Environments
04:56
10
Packages
00:37
11
THEORY: Firebase
01:50
12
Firebase Control Panel
01:20
13
Firebase config
00:48
14
Adding Firebase in Module and Component
01:42
15
Firestore
02:41
16
Speed Optimization
01:04
17
Removing Default page
00:25
18
THEORY: Styles
01:25
19
Tools
01:03
20
THEORY: SCSS
01:34
21
THEORY: BEM
03:20
22
THEORY: Component Styles
00:45
23
THEORY: Styles Structure
01:19
24
Styles Folder
06:45
25
Header Component
02:02
26
Demo Section
05:41
27
Ending
00:20
28
THEORY: Review basic Angular Elements
04:41
29
THEORY: Division into Modules and Elements Grouping
05:27
30
THEORY: When does a Component become a Module?
02:41
31
Intro
01:01
32
THEORY: Shared
03:35
33
Angular Material Folders
00:13
34
Shared Folders
01:35
35
THEORY: Moving Components to Shared
03:32
36
Button
03:04
37
THEORY: Form Controls
03:02
38
Input
06:38
39
THEORY: Validation
00:44
40
Form-field
08:05
41
Form-field Validators
04:18
42
Password
05:45
43
THEORY: Frontend Models
01:20
44
Frontend Models
02:12
45
THEORY: Why use a Shared Component if you already have a Material Component?
01:25
46
Select
07:17
47
Checkboxes
06:09
48
Radios
03:21
49
Date
07:05
50
DateRange
06:12
51
Autocomplete Preview
00:15
52
Autocomplete
10:14
53
Form Buttons
03:37
54
Demo Actions Section
01:00
55
Spinner
03:42
56
THEORY: Services
02:32
57
Notification
06:29
58
Ending
00:51
59
Preview
00:30
60
THEORY: Data Models
03:28
61
Deleting Test DB
00:18
62
Backend Models
04:35
63
Firebase Collections
02:25
64
Ending
00:25
65
Form Items
00:33
66
THEORY: NgRx
04:18
67
NgRx DevTools
00:27
68
Basic Files
01:15
69
Models
00:54
70
Actions and Reducer
04:02
71
THEORY: RxJS
06:25
72
Effects
06:09
73
Root Registration
00:41
74
Selectors
02:03
75
Store App Module
02:26
76
Redux Tool
00:19
77
Flags
00:39
78
Assets
01:15
79
Countries
02:42
80
Ending
00:26
81
Preview
00:31
82
Enable Firebase Auth
00:31
83
User Store: Structure
00:33
84
User Store: Models
00:49
85
User Store: Actions
01:39
86
User Store: Reducer
01:33
87
Effects: SignUp
03:16
88
Effects: SignIn
02:05
89
Effects: SignOut
00:35
90
Selectors
01:25
91
Auth Forms Intro
00:08
92
Auth Page Structure
02:25
93
Header Links
00:12
94
App Routing
00:26
95
Registration: Form Validation
03:58
96
Registration: Template
03:05
97
Registration: Loading
00:55
98
Registration: Dispatch
00:44
99
Registration: test
00:27
100
Registration: Store Data
00:33
101
Registration: Firebase Redirect
00:29
102
Email Confirm
01:11
103
Init User Intro
00:20
104
Store: Init
03:29
105
Sign Out
02:39
106
Log In
03:27
107
Ending
00:31
108
Intro
00:19
109
Structure
02:35
110
Markup and Styles
01:00
111
Preview
00:26
112
Intro
00:46
113
Structure
01:35
114
Directive
00:58
115
Directive + Demo
02:08
116
Template
01:15
117
Dropzone Directive
02:04
118
OnDrop
02:27
119
Select and Dropzone Test
01:30
120
Upload Component
06:13
121
Firebase Storage
01:07
122
FileSize Pipe
01:05
123
URL Paths to Demo
02:05
124
Cropper
05:00
125
Ending
00:18
126
Intro
01:06
127
THEORY: Profile
03:37
128
Structure
02:16
129
Profile Link
00:54
130
Form Markup
00:17
131
THEORY: Stepper
02:09
132
Stepper [part 1]
01:29
133
Stepper [part 2]
02:21
134
Stepper [part 3]
01:05
135
Stepper [part 4]
01:16
136
Stepper [part 5]
01:40
137
Stepper [part 6]
01:04
138
Stepper [part 7]
07:45
139
Dictionaries Intro
00:38
140
Dictionaries Import
01:00
141
THEORY: Form Models
01:44
142
THEORY: Form Tasks
02:11
143
Personal Modules
00:39
144
Personal
07:05
145
UserPhoto Module
03:07
146
Professional [part 1]
01:26
147
Professional [part 2]
02:08
148
Professional Roles
00:52
149
Recruiter Form
03:16
150
Employee Form
03:33
151
Experiences
06:52
152
Utils Control
01:14
153
Employee Controls
04:42
154
Store: User Create and Update
05:13
155
Init Form Store
01:13
156
Store: Form
02:41
157
Resolver
02:07
158
Mapper [part 1]
01:38
159
Mapper [part 2]
05:53
160
Mapper [part 3]
03:55
161
Form Testing
02:23
162
Firebase Testing
00:26
163
Form Finishing
01:45
164
Store: Display
04:08
165
Display [part 1]
04:29
166
Display [part 2]
03:07
167
Testing in Redux Tool
01:22
168
Firebase Rules
00:31
169
Dictionaries Request
01:39
170
Ending
00:45
171
Intro
00:12
172
Structure
01:11
173
Store
05:35
174
Root Module
00:23
175
Employees Component
00:48
176
Employee Component
02:02
177
Demo
00:52
178
Intro
00:27
179
Structure
01:02
180
Store Models and Actions
02:09
181
@angular/entity Intro
00:44
182
Reducer
02:16
183
Effects
02:20
184
Selectors
01:50
185
Jobs Component
00:32
186
Adding Nested Components
00:57
187
Job Component
01:34
188
Form Module
04:28
189
isEditable
01:30
190
THEORY: Guards
02:18
191
Demo
02:30
192
Structure
01:08
193
Auth and Unauth Guards
02:08
194
Role Guard
01:58
195
Demo Guards
03:13
196
Application Guards
02:02
197
Dev/Prod Building
01:42
198
Firebase Hosting
02:51
199
Redirect
01:11
200
Congratulations!
00:14

Unlock unlimited learning

Get instant access to all 199 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Zero to Full Stack Hero

Zero to Full Stack Hero

Sources: papareact.com
PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
101 hours 29 minutes 59 seconds
Angular - The Complete Guide

Angular - The Complete Guide

Sources: Academind Pro
Angular is one of the most popular web development frameworks you can learn these days - especially in the enterprise landscape. It offers amazing...
26 hours 25 minutes 26 seconds
AWS & Typescript Masterclass - CDK V2, Serverless, React

AWS & Typescript Masterclass - CDK V2, Serverless, React

Sources: udemy
AWS and Typescript are 2 of the most demanded technologies in today's IT market. AWS Cloud Development Kit - CDK brings a great new development experience. Now
10 hours 48 minutes 18 seconds
Master Custom React Hooks with TypeScript

Master Custom React Hooks with TypeScript

Sources: fullstack.io
Welcome to the course "Creating a Custom React Hook npm Package using React and TypeScript"! In this course, we will be developing...
2 hours 21 minutes 3 seconds