English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 29.5 Hours | 3.83 GB
The most comprehensive Angular 4 (Angular 2+) course. Build a real e-commerce app with Angular, Firebase and Bootstrap 4
Angular is one of the most popular frameworks for building client apps with HTML, CSS and TypeScript. If you want to establish yourself as a front-end or a full-stack developer, you need to learn Angular.
If you’ve been confused or frustrated jumping from one Angular 4 tutorial to another, you’ve come to the right place. In this course, Mosh, author of several best-selling courses on Udemy, takes you on a fun and pragmatic journey to master Angular 4.
By the end of watching this course, you’ll be able to:
- Build real client apps with Angular on your own
- Troubleshoot common compile-time and run-time errors
- Write clean and maintainable code like a professional
- Apply best practices when building Angular apps
Right from the beginning, you’ll jump in and build your first Angular app within minutes. Say goodbye to boring tutorials and courses with rambling instructors and useless theories!
Angular 2+ has been written in TypeScript. So, in section 2, you’ll learn the fundamentals of TypeScript and object-oriented programming to better understand and appreciate this powerful framework.
Over the next 8 hours, you’ll learn the essentials of building client apps with Angular:
- Displaying data and handling events
- Building re-usable components
- Manipulating the DOM using directives
- Formatting data using pipes
- Building template-driven and reactive forms
- Consuming HTTP services
- Handling HTTP errors properly
- Using Reactive Extensions and observables
- Adding routing and navigation
- Implementing authentication and authorization using JSON Web Tokens (JWT)
- Deploying your applications to GitHub Pages, Firebase and Heroku
So, if you’re a busy developer with limited time and want to quickly learn how to build and deploy client apps with Angular, you can stop here.
If you’re more adventurous and want to learn more, there is far more content for you! Over the following sections, you’ll learn about more advanced topics:
- Building real-time, server-less apps with Firebase
- Animating DOM elements using Angular animations
- Building beautiful UIs using Angular Material
- Implementing the Redux architecture
- Writing unit and integration tests
All that covers just over 21 hours of high-quality content. This is equivalent to a book with more than a thousand pages! But the kind of book that every line is worth reading, not a book that you want to skim! If you have taken any of Mosh’s courses before, you know he is very clear and concise in his teaching and doesn’t waste a single minute of your precious time!
Finally, at the end of the course, you’ll build and deploy a real-time e-commerce application with Angular 4, Firebase 4 and Bootstrap 4. This application exhibits patterns that you see in a lot of real-world applications:
- Master/detail
- CRUD operations
- Forms with custom validation
- Searching, sorting and pagination
- Authentication and authorization
- And a lot more!
Table of Contents
Introduction
1 Introduction
2 What is Angular
3 Architecture of Angular Apps
4 Setting Up the Development Environment
5 Your First Angular App
6 Structure of Angular Projects
7 Webpack
8 Angular Version History
9 Course Structure
10 Making a Promise
11 Your Questions
TypeScript Fundamentals
12 Introduction
13 What is TypeScript
14 Your First TypeScript Program
15 Declaring Variables
16 Types
17 Type Assertions
18 Arrow Functions
19 Interfaces
20 Classes
21 Objects
22 Constructors
23 Access Modifiers
24 Access Modifiers in Constructor Parameters
25 Properties
26 Modules
27 Exercise
28 Solution
29 A Problem with the Current Implementation
Angular Fundamentals
30 Introduction
31 Building Blocks of Angular Apps
32 Components
33 Generating Components Using Angular CLI
34 Templates
35 Directives
36 Services
37 Dependency Injection
38 Generating Services Using Angular CLI
Displaying Data and Handling Events
39 Introduction
40 Property Binding
41 Attribute Binding
42 Adding Bootstrap
43 Class Binding
44 Style Binding
45 Event Binding
46 Event Filtering
47 Template Variables
48 Two-way Binding
49 Pipes
50 Custom Pipes
Building Re-usable Components
51 Introduction
52 Component API
53 Input Properties
54 Aliasing Input Properties
55 Output Properties
56 Passing Event Data
57 Aliasing Output Properties
58 Templates
59 Styles
60 View Encapsulation
61 ngContent
62 ngContainer
Directives
63 Introduction
64 ngIf
65 Hidden Property
66 ngSwitchCase
67 ngFor
68 ngFor and Change Detection
69 ngFor and Trackby
70 The Leading Asterisk
71 ngClass
72 ngStyle
73 Safe Traversal Operator
74 Creating Custom Directives
Template-driven Forms
75 Introduction
76 Building a Bootstrap Form
77 Types of Forms
78 ngModel
79 Adding Validation
80 Specific Validation Errors
81 Styling Invalid Input Fields
82 Cleaner Templates
83 ngForm
84 ngModelGroup
85 Control Classes and Directives
86 Disabling the Submit Button
87 Working with Check Boxes
88 Working with Drop-down Lists
89 Working with Radio Buttons
Reactive Forms
90 Introduction
91 Building a Bootstrap Form
92 Creating Controls Programmatically
93 Adding Validation
94 Specific Validation Errors
95 Implementing Custom Validation
96 Asynchronous Operations
97 Asynchronous Validators
98 Showing a Loader Image
99 Validating the Form Input Upon Submit
100 Nested FormGroups
101 FormArray
102 FormBuilder
103 Quick Recap
Consuming HTTP Services
104 Introduction
105 JSONPlaceHolder
106 Getting Data
107 Creating Data
108 Updating Data
109 Deleting Data
110 OnInit Interface
111 Separation of Concerns
112 Extracting a Service
113 Handling Errors
114 Handling Unexpected Errors
115 Handling Expected Errors
116 Throwing Application-specific Errors
117 Handling Bad Request Errors
118 Importing Observable Operators and Factory Methods
119 Global Error Handling
120 Extracting a Reusable Error Handling Method
121 Extracting a Reusable Data Service
122 The Map Operator
123 Optimistic vs Pessimistic Updates
124 Observables vs Promises
Routing and Navigation
125 Introduction
126 Routing in a Nutshell
127 Configuring Routes
128 RouterOutlet
129 RouterLink
130 RouterLinkActive
131 Getting the Route Parameters
132 Why Route Parameters Are Observables
133 Routes with Multiple Parameters
134 Query Parameters
135 Subscribing to Multiple Observables
136 The SwitchMap Operator
137 Programmatic Navigation
Authentication and Authorization
138 Introduction
139 Application Overview
140 Architecture
141 JSON Web Tokens
142 Starter Code
143 Implementing Login
144 Implementing Logout
145 Showing or Hiding Elements
146 Showing or Hiding Elements based on the Users Role
147 Getting the Current User
148 CanActivate Interface
149 Redirecting Users After Logging In
150 Protecting Routes Based on the Users Role
151 Accessing Protected API Resources
152 Quick Recap
Deployment
153 Introduction
154 Preparing for Deployment
155 JIT vs AOT Compilation
156 Angular Compiler in Action
157 Building Applications with Angular CLI
158 Environments
159 Adding Custom Environments
160 Linting with Angular CLI
161 Linting in VSCode
162 Other Deployment Options
163 Deploying to GitHub Pages
164 Deploying to Firebase
165 Heroku
166 Deploying to Heroku
167 Engines
168 Exercise
Building Real-time Server-less Apps with Firebase
169 Introduction
170 What is Firebase
171 Your First Firebase Project
172 Working with Firebase Databases
173 Installing Firebase
174 Reading Lists
175 A Real-time Database
176 Observables and Memory Leaks
177 Unsubscribing from Subscriptions
178 Async Pipe
179 Reading an Object
180 As Keyword
181 Adding an Object
182 Updating an Object
183 Removing an Object
184 Additional Resources
Animations
185 Introduction
186 Examples of Animations
187 Different Ways to Create Animations
188 Angular Animations
189 Importing the Animations Module and Polyfills
190 Implementing a Fade-in Animation
191 Implementing a Fade-out Animation
192 States
193 Transitions
194 Animatable Properties
195 Creating Reusable Triggers
196 Easings
197 Keyframes
198 Creating Reusable Animations with animation
199 Parameterizing Reusable Animations
200 Animation Callbacks
201 Querying Child Elements with query
202 Animating Child Elements with animateChild
203 Running Parallel Animations with group
204 Staggering Animations with stagger
205 Working with Custom States
206 Multi-step Animations
207 Separation of Concerns
Angular Material 2
208 Introduction
209 What is Angular Material
210 Installing Angular Material
211 Check Boxes
212 Radio Buttons
213 Selects
214 Inputs
215 Text Areas
216 Date Pickers
217 Icons
218 Buttons
219 Chips
220 Progress Spinners
221 Tooltips
222 Tabs
223 Dialogs
224 Passing Data to Dialogs
225 Other Components
226 Creating a Reusable Module
227 Themes
228 SASS
229 Creating a Custom Theme
230 Using Angular Materials Typography
231 Customizing Typography
232 An Important Note
Redux
233 Introduction
234 What is Redux
235 Building Blocks of Redux
236 Pure Functions
237 Installing Redux
238 Working with Actions
239 The Select Decorator
240 Avoiding State Mutation
241 Using Immutable.js
242 Exercise
243 Redux DevTools
244 Calling Backend APIs
245 Refactoring Fat Case Statements
246 Dealing with Complex Domains
Unit Testing
247 Introduction
248 What is Automated Testing
249 Types of Tests
250 Unit Testing Fundamentals
251 Working with Strings and Arrays
252 Set Up and Tear Down
253 Working with Forms
254 Working with Event Emitters
255 Working with Spies
256 Interaction Testing
257 Working with Confirmation Boxes
258 Limitations of Unit Tests
259 Code Coverage
260 Exercises
Integration Testing
261 Introduction
262 The Setup
263 Generating the Setup Code
264 Testing Property Bindings
265 Testing Event Bindings
266 Providing Dependencies
267 Getting the Dependencies
268 Providing Stubs
269 Testing the Navigation
270 Dealing with Route Params
271 Testing RouterOutlet Components
272 Shallow Component Tests
273 Testing Attribute Directives
274 Dealing with Asynchronous Operations
Project Getting Started
275 Introduction
276 Challenge
277 Accessing the Source Code
278 Creating a New Project
279 Installing Bootstrap 4
280 Extracting NavBar Component
281 Defining the Routes
282 Adding a Drop-down Menu
283 Cleaning Up the NavBar
284 Fixing a Few Minor Issues
285 Deployment
Project Authentication and Authorization
286 Introduction
287 Implementing Google Login
288 Implementing the Logout
289 Displaying the Current User
290 Using the Async Pipe
291 Extracting a Service
292 Protecting the Routes
293 Redirecting after Logging In
294 Storing Users in Firebase
295 Defining Admins
296 Protecting the Admin Routes
297 Showing or Hiding the Admin Links
298 Fixing a Bug
Project Product Management Module
299 Introduction
300 Building a Bootstrap Form
301 Populating the Categories Drop-down List
302 Saving the Product in Firebase
303 Implementing Validation
304 Adding Custom Validation
305 Adding a Bootstrap Card
306 Displaying the List of Products
307 Editing a Product
308 Updating a Product
309 Deleting a Product
310 Searching for Products
311 Extracting an Interface
312 Adding a Data Table Component
313 Configuring the Data Table
314 Feeding the Data Table
315 Filtering with the Data Table
316 Fixing a Bug with Redirecting Users
317 Cleaning Up the Product Form
Project Product Catalog Module
318 Introduction
319 Displaying All the Products
320 Displaying the Categories
321 Filtering Products by Category
322 Dealing with Multiple Asynchronous Operations
323 Refactoring Extracting ProductFilterComponent
324 Refactoring Extracting ProductCardComponent
325 Improving the Product Card
326 Making Categories Sticky
327 Wrap Up
Project Shopping Cart Module
328 Introduction
329 Creating a Shopping Cart
330 Refactoring Moving the Responsibility to the Service
331 Adding a Product to the Shopping Cart
332 Refactoring the addToCart Method
333 Displaying the Quantity
334 Improving the Card Footer
335 Implementing the Change Quantity Buttons
336 Displaying the Number of Shopping Cart Items in NavBar
337 Refactoring Creating a Rich Model
338 Building the Shopping Cart Page
339 Fixing a Design Issue
340 Displaying the Total Price
341 Refactoring Extracting ProductQuantityComponents
342 Discovering a Design Issue
343 Flattening Shopping Cart Item Objects
344 Better Object Initialization
345 Clearing the Shopping Cart
346 Fixing a Bug with Updating the Quantity
347 Improving the Layout
348 Adding a Thumbnail
349 More Refactoring
Project Check Out Module
350 Introduction
351 Adding the Check Out Button
352 Building a Shipping Form
353 Saving the Order in Firebase
354 Associating the Order with the Current User
355 Refactoring Extract an Order Model
356 Redirecting the User to the Order Success Page
357 Clearing the Shopping Cart
358 Transactions
359 Adding an Order Summary Widget
360 Refactoring Extract ShippingFormComponent
361 Displaying the Orders
362 Fixing a Bug
363 What about Processing Payments
Project Modularization and Final Improvements
364 Introduction
365 Modules
366 Essential TypeScript Plugins
367 Moving Files and Folders
368 Creating the Shared Module
369 Creating the Admin Module
370 Creating the Shopping Module
371 Creating the Core Module
372 Importing and Exporting Modules
373 Adding Icons
374 Aligning the NavBar Items
375 Defining a Theme
376 Coupon to My Other Courses
Resolve the captcha to access the links!