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

Related courses

FreeUpdated 2y ago
NGRX Store + Effects
By: Ultimate Courses (Todd Motto)
You need predictable, maintainable and fast apps. You ll master Actions, Reducers, Data Structures with Entities, Memoized Selectors, the Redux pattern.
7h 44m5/5
Updated 2y ago
Loopback 4: Modern ways to Build APIs in Typescript & NodeJs
By: Udemy
LoopBack is a highly-extensible, open-source Node.js framework that enables you to create dynamic end-to-end REST APIs with little or no coding. LoopBack 4 is t
5h 14m
Updated 3y ago
Mastering Next.js 13 with TypeScript
By: Mosh Hamedani (Code with Mosh)
Clear. Concise. Comprehensive. Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's pe
5h 16m5/5

Frequently asked questions

What prerequisites are necessary before enrolling in this course?

You should have basic knowledge of Angular, such as the ability to build the Tour of Heroes app and understand core Angular documentation. This foundational knowledge is important as the course focuses on more advanced architectural concepts and integration tools like NgRx and Firebase.

What project will I build during the course?

You will build CourseApp, a platform where users can post resumes and jobs. This project is designed to demonstrate the architectural needs of a larger application, making it suitable for learning how to structure scalable web applications using Angular.

Who is the target audience for this course?

The course is aimed at developers who already have a basic understanding of Angular and are looking to expand their skills in building scalable web applications. It is particularly useful for those who feel uncertain about structuring larger applications and want to focus on long-term maintainability and team collaboration.

What is the scope of this course compared to similar courses?

This course focuses on building scalable Angular applications by integrating tools like TypeScript, NgRx, Firebase, and RxJS. It emphasizes architectural decisions and their impact on long-term maintainability. Unlike introductory courses, it covers advanced topics such as component modularization, state management, and the use of SCSS and BEM for styling.

What specific tools and technologies will I use in this course?

You will work with TypeScript models, NgRx for app state management, Firebase as the backend, SCSS and BEM for styling, Angular Material for UI components, and RxJS for tool connectivity. These tools are essential for building and maintaining scalable web applications.

What topics are not covered in this course?

The course does not cover basic Angular concepts or beginner-level coding practices. It assumes familiarity with Angular's core elements and focuses on advanced architectural strategies and tool integrations for scalability and maintainability.

How will this course help in advancing my career?

This course will enhance your ability to build and maintain scalable Angular applications, a valuable skill in web development. Understanding architecture and integration of tools like Firebase and NgRx will prepare you for roles that require managing larger codebases and collaborating effectively in teams, thus broadening your career opportunities in software development.