Angular Architecture. How to Build Scalable Web Applications

Name: Angular Architecture. How to Build Scalable Web Applications
Price: 12.75 USD
Availability: InStock
Rating: 5 (1 reviews)

7h 34m 45s

English

Paid

March 16, 2024

This course shows you how to build scalable Angular apps that stay clear and easy to change. You will learn how good architecture helps you focus on real features. You will also see how structure makes teamwork smooth.

What You Will Learn

You will learn how to put Angular parts together in a clean way. This helps you fix messy code and avoid confusing project growth. You will see how each choice affects long-term work on your app.

Tools You Will Use

You will work with strong TypeScript models and NgRx for app state. You will use Firebase as your backend. You will write styles with SCSS and BEM. You will use Angular Material for shared UI parts. You will also use RxJS to connect these tools.

Who This Course Is For

This course is for you if you know the basics of Angular. You should be able to build the Tour of Heroes app and read core Angular docs. If you feel unsure about how to shape a larger app, this course will help you.

What You Will Build

You will build CourseApp. It is a platform where users can post resumes and jobs. The app is not small, because simple apps cannot show real architecture needs.

How You Will Learn

Each section has ready code you can run and study. You can use this code as a base for your own projects.

About the Author: Udemy

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 200 lessons

0:00

#1: Course Preview

All Course Lessons (200)

#	Lesson Title	Duration
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

Course content

200 lessons · 7h 34m 45s

Show all 200 lessons

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

Related courses

React Query: Server State Management in React
Sources: Udemy
React Query has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to ke
7 hours 39 minutes 49 seconds
Free
100 Angular Challenge
Sources: Udemy
Build 100 Components, Services, Directives, Pipes in Angular and Much More! We will master all Angular has to offer by building 100 re-usable and…
12 hours 23 minutes 17 seconds 5 / 5
Demystifying Reactivity with Angular Signals
Sources: Fullstack.io
Welcome to an insightful journey into building modern Angular applications with signals. This article aims to shed light on the relatively untapped potential of
1 hour 44 minutes 15 seconds

Frequently asked questions

What is Angular Architecture. How to Build Scalable Web Applications about?

This course shows you how to build scalable Angular apps that stay clear and easy to change. You will learn how good architecture helps you focus on real features. You will also see how structure makes teamwork smooth. What You Will Learn…

Who teaches Angular Architecture. How to Build Scalable Web Applications?

Angular Architecture. How to Build Scalable Web Applications is taught by Udemy. You can find more courses by this instructor on the corresponding source page.

How long is Angular Architecture. How to Build Scalable Web Applications?

Angular Architecture. How to Build Scalable Web Applications contains 200 lessons with a total runtime of 7 hours 34 minutes. All lessons are available to watch online at your own pace.

Is Angular Architecture. How to Build Scalable Web Applications free to watch?

Angular Architecture. How to Build Scalable Web Applications is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.

Where can I watch Angular Architecture. How to Build Scalable Web Applications online?

Angular Architecture. How to Build Scalable Web Applications is available to watch online on CourseFlix at https://courseflix.net/course/angular-architecture-how-to-build-scalable-web-applications. The page hosts every lesson with the integrated video player; no download is required.