Angular Architecture. How to Build Scalable Web Applications

7h 34m 45s
English
Paid
March 16, 2024

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.

More

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 Angular Architecture. How to Build Scalable Web Applications

Join premium to watch
Go to premium
# Title Duration
1 Course Preview 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

Similar courses to Angular Architecture. How to Build Scalable Web Applications

TypeScript Bootcamp: Zero to Mastery

TypeScript Bootcamp: Zero to Mastery

Duration 9 hours 31 minutes 59 seconds
NFT Marketplace in React, Typescript & Solidity - Full Guide

NFT Marketplace in React, Typescript & Solidity - Full Guide

Duration 16 hours 20 minutes 55 seconds
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
Desktop apps with Angular, Firestore and Electron

Desktop apps with Angular, Firestore and Electron

Duration 11 hours 28 minutes 39 seconds
Demystifying Reactivity with Angular Signals

Demystifying Reactivity with Angular Signals

Duration 1 hour 44 minutes 15 seconds
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Duration 22 hours 41 minutes 56 seconds
Build an app with ASPNET Core and Angular from scratch

Build an app with ASPNET Core and Angular from scratch

Duration 29 hours 51 minutes 36 seconds
Angular Interview Hacking

Angular Interview Hacking

Duration 5 hours 23 minutes 20 seconds
NativeScript + Angular: Build Native iOS, Android & Web Apps

NativeScript + Angular: Build Native iOS, Android & Web Apps

Duration 20 hours 11 minutes 23 seconds
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2

Duration 26 hours 51 minutes 3 seconds