Show Sidebar
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Angular 4: Beginner to Pro
Getting Started (30m)
1- Introduction (2:51)
2- What is Angular (2:00)
3- Architecture of Angular Apps (3:48)
4- Setting Up the Development Environment (2:40)
5- Your First Angular App (2:25)
6- Structure of Angular Projects (6:54)
7- Webpack (3:15)
8- Angular Version History (3:34)
9- Course Structure (3:46)
10- Making a Promise (0:48)
11- Follow Me Around
12- Learning Paths
TypeScript and Object-oriented Programming Fundamentals (1h)
1- Introduction (0:41)
2- What is TypeScript (2:24)
3- Your First TypeScript Program (3:00)
4- Declaring Variables (4:49)
5- Types (5:43)
6- Type Assertions (2:47)
7- Arrow Functions (1:44)
8- Interfaces (3:54)
9- Classes (4:31)
10- Objects (4:09)
11- Constructors (2:52)
12- Access Modifiers (2:56)
13- Access Modifiers in Constructor Parameters (1:41)
14- Properties (5:18)
15- Modules (4:31)
16- Exercise
17- Solution (8:48)
Angular Fundamentals (45m)
1- Introduction (0:19)
2- Building Blocks of Angular Apps (3:41)
3- Creating Components (9:38)
4- Creating Components Using Angular CLI (4:41)
5- Templates (2:28)
6- Directives (3:27)
7- Services (4:29)
8- Dependency Injection (7:20)
9- Generating Services Using Angular CLI (2:11)
10- Exercise- Authors (0:32)
11- Solution (6:17)
A Quick Note
Displaying Data and Handling Events (1h5m)
1- Introduction (0:24)
2- Property Binding (3:16)
3- Attribute Binding (3:35)
4- Adding Bootstrap (4:53)
5- Class Binding (1:47)
6- Style Binding (1:19)
7- Event Binding (4:30)
8- Event Filtering (1:50)
9- Template Variables (1:53)
10- Two-way Binding (8:05)
11- Pipes (6:38)
12- Custom Pipes (6:16)
13- Exercise- Favorite Component (1:22)
14- Solution- Favorite Component (5:05)
15- Exercise- TitleCase (1:17)
16- Solution- Title Case (10:25)
Building Re-usable Components (1h)
1- Introduction (0:26)
2- Component API (4:22)
3- Input Properties (4:44)
4- Aliasing Input Properties (4:22)
5- Output Properties (3:22)
6- Passing Event Data (5:51)
7- Aliasing Output Properties (2:05)
8- Templates (2:41)
9- Styles (5:10)
10- View Encapsulation (9:11)
11- ngContent (4:56)
12- ngContainer (2:34)
13- Exercise- LikeComponent (1:38)
14- Solution- LikeComponent (4:51)
A Quick Note
Directives (1h)
1- Introduction (0:31)
2- ngIf (6:11)
3- Hidden Property (3:25)
4- ngSwitchCase (6:36)
5- ngFor (4:18)
6- ngFor and Change Detection (3:28)
7- ngFor and TrackBy (5:47)
8- The Leading Asterisk (1:47)
9- ngClass (1:51)
10- ngStyle (2:31)
11- Safe Traversal Operator (2:45)
12- Creating Custom Directives (9:52)
13- Exercise- Zippy (1:06)
14- Solution- Zippy (7:56)
Template-driven Forms (1h)
1- Introduction (0:26)
2- Building a Basic Bootstrap Form (4:05)
3- Types of Forms (3:21)
4- ngModel (5:30)
5- Adding Validation (3:17)
6- Specific Validation Errors (4:20)
7- Styling Invalid Input Fields (1:26)
8- Cleaner Templates (1:52)
9- ngForm (5:05)
10- ngModelGroup (2:38)
11- Control Classes and Directives (1:47)
12- Disabling the Submit Button (1:08)
13- Working with Check Boxes (2:18)
14- Working with Drop-down Lists (6:02)
15- Working with Radio Buttons (2:55)
16- Exercise- Create Course Form (1:08)
17- Solution- Course Form (11:34)
Reactive Forms (1h15m)
1- Introduction (1:15)
2- Building a Bootstrap Form (0:50)
3- Creating Controls Programatically (6:14)
4- Adding Validation (7:07)
5- Specific Validation Errors (2:33)
6- Implementing Custom Validation (7:01)
7- Async Operations (5:13)
8- Async Validators (8:04)
9- Displaying a Loader Image (1:37)
10- Validating Upon Submitting the Form (4:58)
11- Nested FormGroups (2:40)
12- FormArray (8:43)
13- FormBuilder (3:59)
14- Quick Recap (1:16)
15- Exercise- Change Password Form (1:27)
16- Solution- Change Password Form (15:17)
Consuming HTTP Services (1h50m)
1- Introduction (1:03)
2- JSONPlaceHolder (1:52)
3- Getting Data (8:17)
4- Creating Data (7:59)
5- Updating Data (5:05)
6- Deleting Data (1:59)
7- OnInit Interface (3:54)
8- Separation of Concerns (3:41)
9- Extracting a Service (7:09)
10- Handling Errors (3:21)
11- Handling Unexpected Errors (2:27)
12- Handling Expected Errors (4:28)
13- Throwing Application-specific Errors (8:32)
14- Code Review (2:59)
15- Importing Observable Operators and Factory Methods (3:08)
16- Global Error Handling+ (7:03)
17- Extracting a Reusable Error Handling Method (3:35)
18- Extracting a Reusable Data Service (7:39)
19- The Map Operator (4:27)
20- Optimistic vs Pessimistic Updates (6:25)
21- Observables vs Promises (6:44)
22- Exercise (1:15)
23- Solution (5:31)
Routing and Navigation (1h5m)
1- Introduction (0:30)
2- Routing in a Nutshell (1:04)
3- Configuring Routes (6:47)
4- RouterOutlet (2:29)
5- RouterLink (5:41)
6- RouterLinkActive (1:52)
7- Accessing Route Parameters (5:23)
8- Why Route Parameters Are Observables (8:57)
9- Routes with Multiple Parameters (1:48)
10- Query Parameters (4:28)
11- Subscribing to Multiple Observables (4:45)
12- The SwitchMap Operator (7:59)
13- Programmatic Navigation (2:16)
14- Exercise-Blog Archives (2:01)
15- Solution (8:23)
Authentication and Authorization (1h)
1- Introduction (0:46)
2- Application Overview (2:29)
3- Architecture (3:02)
4- JSON Web Tokens (5:47)
5- The Starter Code (8:02)
6- Implementing the Login (6:08)
7- Implementing the Logout (1:47)
8- Showing : Hiding Elements (6:40)
9- Showing - Hiding Elements Based on the User's Role (4:15)
10- Getting the Current User (0:49)
11- CanActivate Interface (5:35)
12- Redirecting the Users After Logging In (4:34)
13- Protecting Routes Based on the User's Role (5:45)
14- Accessing Protected API Resources (7:27)
15- Quick Recap (1:54)
Deployment (1h12m)
1- Introduction (0:36)
2- Preparing for Deployment (5:36)
3- JIT vs AOT Compilation (5:29)
4- Angular Compiler in Action (3:34)
5- Building Applications with Angular CLI (6:40)
6- Environments (4:27)
7- Adding a Custom Environment (3:10)
8- Linting with Angular CLI (4:45)
9- Linting in VSCode (1:59)
10- Other Deployment Options (3:59)
11- Deploying to GitHub Pages (7:29)
12- Deploying to Firebase (7:03)
13- Heroku (1:44)
14- Deploying to Heroku (8:04)
15- Engines (1:28)
16- Exercise (0:20)
Building Real-time Apps with Firebase (56m)
1- Introduction (1:16)
2- What is Firebase? (2:20)
3- Your First Firebase Project (0:41)
4- Working with Firebase Databases (4:58)
5- Installing Firebase (5:08)
6- Reading Lists (7:17)
7- A Real-time Database (1:32)
8- Observables and Memory Leaks (2:53)
9- Unsubscribing from Subscriptions (4:08)
10- Async Pipe (2:40)
11- Reading an Object (3:26)
12- As Keyword (2:21)
13- Adding an Object (8:00)
14- Updating an Object (5:06)
15- Deleting an Object (2:12)
16- Additional Resources (2:49)
Angular Animations (1h30m)
1- Introduction (0:44)
2- Examples of Animations (2:23)
3- Different Ways to Create Animations (4:32)
4- Angular Animations (4:08)
5- Importing Animations Module and Polyfill (2:44)
6- Implementing a fadeIn Animation (7:11)
7- Implementing a fadeOut Animation (1:58)
8- States (3:12)
9- Transitions (2:10)
10- Creating Re-usable Triggers (2:12)
11- Exercise- Slide Animation (0:52)
12- Solution (3:42)
13- Easings (5:34)
14- Keyframes (5:27)
15- Creating Re-usable Animations (7:53)
16- Parameterizing Re-usable Animations (8:12)
17- Animation Callbacks (2:45)
18- Querying Child Elements (5:32)
19- Animating Child Elements (3:02)
20- Running Parallel Animations (3:01)
21- Staggering Animations (7:24)
22- Working with Custom States (10:01)
23- Multi-step Animations (2:16)
24- Separation of Concerns (3:31)
Angular Material (2h30m)
1- Introduction (0:42)
2- What is Angular Material (4:31)
3- Installing Angular Material (7:30)
4- CheckBoxes (4:28)
5- RadioButtons (5:43)
6- Selects (5:07)
7- Inputs (7:31)
8- Text Areas (1:49)
9- DatePickers (9:37)
10- Icons (3:40)
11- Buttons (4:50)
12- Chips (5:45)
13- Progress Spinner (7:31)
14- Tooltips (2:18)
15- Tabs (2:24)
16- Dialogs (8:39)
17- Passing Data to Dialogs (10:47)
18- Other Components
19- Creating a Reusable Module (5:51)
20- Themes (4:20)
21- SASS (8:46)
22- Creating a Custom Theme (9:10)
23- Using Angular Material's Typography (3:01)
24- Customizing Typography (6:31)
25- An Important Note
Redux (1h19m)
01- Introduction (0:34)
02- What is Redux (6:33)
03- Building Blocks of Redux (3:29)
04- Pure Functions (4:13)
05- Installing Redux (6:26)
06- Working with Actions (7:56)
07- The Select Pattern (6:31)
08- Avoiding Object Mutations (5:03)
09- Using Immutable Objects (5:41)
10- Exercise (1:52)
11- Redux DevTools (8:45)
12- Calling APIs (9:06)
13- Refactoring Fat Case Statements (2:33)
14- Dealing with Complex Domains (8:56)
Unit Testing (1h)
01- Introduction (1:12)
02- What is Automated Testing (7:27)
03- Types of Tests (6:04)
04- Unit Testing Fundamentals (7:44)
05- Working with Strings and Arrays (3:14)
06- Setup and Tear Down (6:05)
07- Working with Forms (3:30)
08- Working with Event Emitters (2:51)
09- Working with Spies (6:56)
10- Interaction Testing (6:26)
11- Working with Confirmation Boxes (3:09)
12- Limitations of Unit Tests (1:31)
13- Code Coverage (3:30)
Integration Testing (1h20m)
01- Introduction - Integration Testing (0:44)
02- The Setup Code (4:41)
03- Genertaing the Setup Code (4:53)
04- Testing Property and Class Bindings (7:55)
05- Testing Event Bindings (4:59)
06- Providing Dependencies (2:37)
07- Getting the Dependencies (5:48)
08- Providing Stubs (7:11)
09- Testing the Navigation (4:02)
10- Dealing with Route Params (6:33)
11- Testing RouterOutlet Components (7:05)
12- Shallow Component Tests (4:54)
13- Testing Attribute Directives (4:30)
14- Dealing with Asynchronous Operations (5:41)
Project: Set Up (1h5m)
1- Introduction (4:57)
2- Accesing the Source Code
3- Challenge (2:41)
4- Creating a New Project (5:16)
5- Installing Bootstrap (4:54)
6- Extracting a NavBar Component (1:59)
7- Defining the Routes (7:51)
8- Adding a Drop-down Menu (6:44)
9- Cleaning Up the NavBar (2:26)
10- Fixing a Few Minor Issues (3:02)
11- Deployment (2:51)
Project: Authentication and Authorization (1h7m)
1- Introduction (2:06)
2- Implementing Google Login (8:27)
3- Implementing the Logout (3:12)
4- Displaying the Current User (2:20)
5- Using the Async Pipe (4:42)
6- Extracting a Service (7:57)
7- Protecting Routes (6:25)
8- Redirecting the Users After Login (8:27)
9- Storing Users in Database (5:51)
10- Defining Roles (5:47)
11- Protecting the Admin Routes (11:13)
12- Showing or Hiding the Admin Links (8:05)
13- Fixing a Bug (1:32)
Project: Product Management (1h35m)
1- Introduction (2:00)
2- Building a Bootstrap Form (7:35)
3- Populating Categories Drop-down List (8:57)
4- Saving a Product in Firebase (7:24)
5- Implementing Validation (5:32)
6- Adding Custom Validation (4:42)
7- Adding a Bootstrap Card (7:10)
8- Rendering the List of Products (4:05)
9- Editing a Product (10:30)
10- Updating a Product (4:09)
11- Deleting a Product (3:59)
12- Searching for Products (9:26)
13- Extracting an Interface (1:20)
14- Adding a Data Table Component (5:07)
15- Configuring the Data Table (4:32)
16- Feeding the Data Table (8:04)
17- Filtering with the Data Table (3:18)
18- Fixing a Bug with Redirecting Users (2:52)
19- Cleaning Up the Product Form (1:36)
Project: Product Catalog (50m)
1- Introduction (1:20)
2- Displaying All the Products (7:54)
3- Displaying the Categories (3:37)
4- Filtering Products by Category (8:09)
5- Dealing with Multiple Asynchronous Operations (4:54)
6- Refactoring- Extracting ProductFilterComponent (7:54)
7- Refactoring- Extracting ProductCardComponent (8:32)
8- Improving the Product Card (2:31)
9- Making Categories Sticky (2:24)
10- Wrap Up (0:36)
Project: Shopping Cart (2h)
1- Introduction (2:59)
2- Creating a Shopping Cart (8:59)
3- Refactoring- Moving the Responsibility to the Service (7:38)
4- Adding a Product to Shopping Cart (7:28)
5- Refactoring the addToCart Method (6:10)
6- Displaying the Quantity (9:41)
7- Improving the Card Footer (4:36)
8- Implement the Change Quantity Buttons (6:59)
9- Displaying the Number of Shopping Cart Items in Navbar (9:10)
10- Refactoring: Creating a Rich Model (9:03)
11- Building a Simple Shopping Cart Page (6:11)
12- Fixing a Design Issue (4:56)
13- Displaying the Total Price (5:43)
14- Refactoring: Extracting ProductQuantityComponent (8:33)
15- Discovering a Design Issue (6:18)
16- Flattening Shopping Cart Items (8:40)
17- Better Object Initialization (4:47)
18- Clearing the Shopping Cart (3:21)
19- Fixing a Bug with Updating Quantity (1:36)
20- Improving the Layout (2:41)
21- Adding a Thumbnail (3:20)
22- More Refactoring (8:11)
Project: Check Out Module (1h30m)
1- Introduction (2:00)
2- Adding the Check Out Button (2:43)
3- Building a Shipping Form (1:14)
4- Saving the Order in Firebase (8:39)
5- Associating the Order with the Current User (2:10)
6- Refactoring- Extracting a Rich Model (4:29)
7- Redirecting the User (2:54)
8- Clearing the Shopping Cart (2:52)
9- Transactions
10- Adding an Order Summary Widget (8:47)
11- Refactoring (9:15)
12- Displaying the Orders (3:07)
13- Fixing a Bug (1:11)
14- Processing the Payments
Project: Modularization and Final Improvements (1h)
1- Introduction (1:02)
2- Modules (5:54)
3- Essential TypeScript Plugins (4:12)
4- Moving Files and Folders (5:35)
5- Creating the Shared Module (5:55)
6- Creating the Admin Module (9:27)
7- Creating the Shopping Module (4:52)
8- Creating the Core Module (5:26)
9- Importing and Exporting Modules (6:22)
10- Adding Icons (2:29)
11- Aligning the NavBar Items (3:34)
12- Defining a Theme (5:38)
Wrap Up
11- Aligning the NavBar Items
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock