Angular Architecture. How to Build Scalable Web Applications

Focused View

Danil Chigirev

7:31:40

93 View

1 - Beginning

1 - Course Preview.mp4

04:25

2 - How to work with the course.mp4

00:54

3 - Installation.mp4

01:33

4 - THEORY General Structure of Web Applications.mp4

03:48

5 - THEORY Border between Angular and Typescript.mp4

02:27

2 - Settings

6 - Preview.mp4

00:20

7 - Default Settings.mp4

01:51

8 - Tsconfig.mp4

01:50

9 - Environments.mp4

04:55

10 - Packages.mp4

00:36

11 - THEORY Firebase.mp4

01:49

12 - Firebase Control Panel.mp4

01:20

13 - Firebase config.mp4

00:47

14 - Adding Firebase in Module and Component.mp4

01:41

15 - Firestore.mp4

02:40

16 - Speed Optimization.mp4

01:03

17 - 2.Settings.zip

17 - Removing Default page.mp4

00:24

3 - Styles

18 - THEORY Styles.mp4

01:24

19 - Tools.mp4

01:02

20 - THEORY SCSS.mp4

01:33

21 - THEORY BEM.mp4

03:19

22 - THEORY Component Styles.mp4

00:44

23 - THEORY Styles Structure.mp4

01:18

24 - Styles Folder.mp4

06:44

25 - Header Component.mp4

02:01

26 - Demo Section.mp4

05:40

27 - 3.Styles.zip

27 - Ending.mp4

00:19

4 - Shared

28 - THEORY Review basic Angular Elements.mp4

04:40

29 - THEORY Division into Modules and Elements Grouping.mp4

05:26

30 - THEORY When does a Component become a Module.mp4

02:40

31 - Intro.mp4

01:00

32 - THEORY Shared.mp4

03:34

33 - Angular Material Folders.mp4

33 - Angular Material Folders DV.mp4

00:12

34 - Shared Folders.mp4

01:34

35 - THEORY Moving Components to Shared.mp4

03:31

36 - Button.mp4

03:03

37 - THEORY Form Controls.mp4

03:01

38 - Input.mp4

06:37

39 - THEORY Validation.mp4

00:43

40 - Formfield.mp4

08:04

41 - Formfield Validators.mp4

04:17

42 - Password.mp4

05:44

43 - THEORY Frontend Models.mp4

01:19

44 - Frontend Models.mp4

02:11

45 - THEORY Why use a Shared Component if you already have a Material Component.mp4

01:24

46 - Select.mp4

07:16

47 - Checkboxes.mp4

06:08

48 - Radios.mp4

03:20

49 - Date.mp4

07:04

50 - DateRange.mp4

06:11

51 - Autocomplete Preview.mp4

00:14

52 - Autocomplete.mp4

10:14

53 - Form Buttons.mp4

03:36

54 - Demo Actions Section.mp4

00:59

55 - Spinner.mp4

03:41

56 - THEORY Services.mp4

02:31

57 - Notification.mp4

06:28

58 - 4.Shared.zip

58 - Ending.mp4

00:50

5 - Data Models

59 - Preview.mp4

00:29

60 - THEORY Data Models.mp4

03:27

61 - Deleting Test DB.mp4

00:17

62 - Backend Models.mp4

04:34

63 - Firebase Collections.mp4

02:24

64 - 5.Data-Models.zip

64 - Ending.mp4

00:24

6 - Dictionaries

65 - Form Items.mp4

00:32

66 - THEORY NgRx.mp4

04:17

67 - NgRx DevTools.mp4

00:26

68 - Basic Files.mp4

01:14

69 - Models.mp4

00:53

70 - Actions and Reducer.mp4

04:01

71 - THEORY RxJS.mp4

06:24

72 - Effects.mp4

06:08

73 - Root Registration.mp4

00:40

74 - Selectors.mp4

02:02

75 - Store App Module.mp4

02:25

76 - Redux Tool.mp4

00:18

77 - Flags.mp4

00:38

78 - Assets.mp4

01:14

79 - Countries.mp4

02:41

80 - 6.Dictionaries.zip

80 - Ending.mp4

00:25

7 - Authentication

81 - Preview.mp4

00:30

82 - Enable Firebase Auth.mp4

00:30

83 - User Store Structure.mp4

00:32

84 - User Store Models.mp4

00:48

85 - User Store Actions.mp4

01:38

86 - User Store Reducer.mp4

01:32

87 - Effects SignUp.mp4

03:15

88 - Effects SignIn.mp4

02:04

89 - Effects SignOut.mp4

00:34

90 - Selectors.mp4

01:24

91 - Auth Forms Intro.mp4

00:07

92 - Auth Page Structure.mp4

02:24

93 - Header Links.mp4

00:12

94 - App Routing.mp4

00:25

95 - Registration Form Validation.mp4

03:57

96 - Registration Template.mp4

03:04

97 - Registration Loading.mp4

00:54

98 - Registration Dispatch.mp4

00:43

99 - Registration test.mp4

00:26

100 - Registration Store Data.mp4

00:32

101 - Registration Firebase Redirect.mp4

00:28

102 - Email Confirm.mp4

01:10

103 - Init User Intro.mp4

00:19

104 - Store Init.mp4

03:29

105 - Sign Out.mp4

02:38

106 - Log In.mp4

03:26

107 - 7.Authentication.zip

107 - Ending.mp4

00:30

8 - Static

108 - Intro.mp4

00:18

109 - Structure.mp4

02:34

110 - 8.Static.zip

110 - Markup and Styles.mp4

00:59

9 - Files Upload

111 - Preview.mp4

00:25

112 - Intro.mp4

00:45

113 - Structure.mp4

01:34

114 - Directive.mp4

00:57

115 - Directive Demo.mp4

02:07

116 - Template.mp4

01:14

117 - Dropzone Directive.mp4

02:03

118 - OnDrop.mp4

02:26

119 - Select and Dropzone Test.mp4

01:29

120 - Upload Component.mp4

06:12

121 - Firebase Storage.mp4

01:06

122 - FileSize Pipe.mp4

01:04

123 - URL Paths to Demo.mp4

02:04

124 - Cropper.mp4

04:59

125 - 9.Files-Upload.zip

125 - Ending.mp4

00:17

10 - Profile

126 - Intro.mp4

01:05

127 - THEORY Profile.mp4

03:36

128 - Structure.mp4

02:15

129 - Profile Link.mp4

00:53

130 - Form Markup.mp4

00:16

131 - THEORY Stepper.mp4

02:08

132 - Stepper part 1.mp4

01:28

133 - Stepper part 2.mp4

02:21

134 - Stepper part 3.mp4

01:04

135 - Stepper part 4.mp4

01:15

136 - Stepper part 5.mp4

01:39

137 - Stepper part 6.mp4

01:03

138 - Stepper part 7.mp4

07:44

139 - Dictionaries Intro.mp4

00:37

140 - Dictionaries Import.mp4

00:59

141 - THEORY Form Models.mp4

01:44

142 - THEORY Form Tasks.mp4

02:10

143 - Personal Modules.mp4

00:38

144 - Personal.mp4

07:05

145 - UserPhoto Module.mp4

03:06

146 - Professional part 1.mp4

01:25

147 - Professional part 2.mp4

02:07

148 - Professional Roles.mp4

00:51

149 - Recruiter Form.mp4

03:15

150 - Employee Form.mp4

03:32

151 - Experiences.mp4

06:51

152 - Utils Control.mp4

01:13

153 - Employee Controls.mp4

04:42

154 - Store User Create and Update.mp4

05:13

155 - Init Form Store.mp4

01:12

156 - Store Form.mp4

02:41

157 - Resolver.mp4

02:06

158 - Mapper part 1.mp4

01:37

159 - Mapper part 2.mp4

05:52

160 - Mapper part 3.mp4

03:54

161 - Form Testing.mp4

02:23

162 - Firebase Testing.mp4

00:25

163 - Form Finishing.mp4

01:44

164 - Store Display.mp4

04:07

165 - Display part 1.mp4

04:28

166 - Display part 2.mp4

03:06

167 - Testing in Redux Tool.mp4

01:21

168 - Firebase Rules.mp4

00:30

169 - Dictionaries Request.mp4

01:38

170 - 10.Profile.zip

170 - Ending.mp4

00:44

11 - Employees

171 - Intro.mp4

00:11

172 - Structure.mp4

01:10

173 - Store.mp4

05:35

174 - Root Module.mp4

00:22

175 - Employees Component.mp4

00:48

176 - Employee Component.mp4

02:02

177 - 11.Employees.zip

177 - Demo.mp4

00:51

12 - Jobs

178 - Intro.mp4

00:26

179 - Structure.mp4

01:01

180 - Store Models and Actions.mp4

02:08

181 - angularentity Intro.mp4

00:43

182 - Reducer.mp4

02:15

183 - Effects.mp4

02:19

184 - Selectors.mp4

01:49

185 - Jobs Component.mp4

00:31

186 - Adding Nested Components.mp4

00:56

187 - Job Component.mp4

01:33

188 - Form Module.mp4

04:27

189 - 12.Jobs.zip

189 - isEditable.mp4

01:29

13 - Guards

190 - THEORY Guards.mp4

02:18

191 - Demo.mp4

02:29

192 - Structure.mp4

01:07

193 - Auth and Unauth Guards.mp4

02:07

194 - Role Guard.mp4

01:57

195 - Demo Guards.mp4

03:12

196 - 13.Guards.zip

196 - Application Guards.mp4

02:01

14 - Deployment

197 - DevProd Building.mp4

01:41

198 - Firebase Hosting.mp4

02:50

199 - Redirect.mp4

01:10

15 - Ending of the Course

200 - Congratulations.mp4

00:13

Description

Build a scalable and maintainable applications with Angular 9 (NgRx, Firebase, SCSS, Angular Material)

What You'll Learn?

Modularity
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

Who is this for?

Angular Developers

More details

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.
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.
Who this course is for:
Angular Developers

User Reviews

Rating

average 0

Total votes0

Focused display

I’m a web developer with focus on the frontend. I've been working with Angular since AngularJS 1.3 and I've seen how real projects get drowned in bugs and slow down due to misuse of the framework or lack of a clear application architecture. I want to help students get around the pitfalls on the way of building scalable and maintainable applications.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.