Angular 4 – Beginner to Pro from Mosh Hamedani

Angular 4 – Beginner to Pro from Mosh Hamedani

Sale Page

---

Angular is one of the most popular frameworks for building client apps with HTML, CSS and TypeScript.

Put simply, Angular is a must-have on your resume. Lucky for you, this course is a full-on, deep-dive into Angular that will give you the competitive edge you’re looking for.

Highly technical with a perfect mix of theory and practice. It covers absolutely every detail you could possibly need to take you from beginner Angular developer to expert .

I share tips from several years’ experience using Angular, including the do’s and don’ts, best practices, common mistakes and practical shortcuts that every professional Angular developer needs to know.

Beginner to Advanced
Lifetime Access
370 Lessons
30 Hours of Video
Exercises and Solutions
Downloadable
Subtitles
Access on Mobile/TV
Certificate

Hi! I’m Mosh and I’m gonna help you master Angular!

Here are a few reasons to buy this course

By the end of this course, you’ll be able to…

Build and deploy fast and interactive Angular apps with confidence
Troubleshoot common errors
Write clean, maintainable code
Apply best practices

What You’l Learn…

Right from the beginning, you’ll jump in and build your first Angular 4 app within minutes. There’s no boring, long introductions, we’ll get straight into the nuts and bolts!

Display data and handle events
Build re-usable components
Manipulate the DOM using directives
Format data using pipes
Build template-driven and reactive forms
Consume HTTP services
Use Reactive Extensions and observables
Implement routing and navigation
Implement authentication and authorization
Store data in Firebase
Deploy your applications
Unit test your Angular apps
Basics of the Redux architecture
Use Angular animations
Write clean, maintainable code like a pro
Shortcuts to write more code in less time
And much, much more!

Learn using real-world examples, assignments and a complete project, from setup to deployment!
It’s like having an experienced developer right next to you

I’ll share my 20 years of experience as a software engineer, giving you all the expert advice, tips and tricks you’ll need to become an Angular master. I’ll show you how to build a real e-commerce application with Angular 4, Firebase 4 and Bootstrap 4. There’s nothing like hands-on learning to fully understand all the concepts.

Who is this course for?

Anyone wanting to learn front-end development with Angular
Front-end developers familiar with other libraries such as React who want to add Angular to their toolbox
Back-end developers who want to transition to full-stack development

No prior knowledge needed

You don’t need familiarity with TypeScript or any previous versions of Angular. You just need some basic familiarity with HTML, CSS and JavaScript.
Join 45417 happy students!

“The course pace, examples, challenges and video quality are exceptional. I have watched and coded along with several tutorials from various sites but this course, so far, it absolutely one of the best if not the best. The project at the end of the course was also well done. I made plenty of mistakes as I coded along and learned a ton while trying to fix those errors.”

– AJ Speller

“Mosh is the best! Clear explanations and detailed discussions about great engineering practices. First class course. I can honestly say that if you want to learn and actually understand Angular well whilst becoming a better programmer then this is the only course you will need. Many thanks!”

– Paul Whitehouse

“I’ve never seen someone explain something so easy in such a short period of time and actually understand it. There are courses, which are longer and much more difficult to understand, this is not one of them.”

– Simon Cassar

“Mosh is a great teacher that explains every single line of code he’s writing. Exactly what I was looking for when I decided to programming with this framework.”

– Gabriel Rapone
Your Instructor

Mosh Hamedani
Mosh Hamedani

Hi! My name is Mosh Hamedani. I’m a software engineer with two decades of experience. I’ve taught millions of people how to code and how to become professional software engineers through my online courses and YouTube channel.

I believe coding should be fun and accessible to everyone.

Course Curriculum

Getting ed (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)

Follow Me Around

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)

Get immediately download Angular 4 – Beginner to Pro from Mosh Hamedani

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 er 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)

Get immediately download Angular 4 – Beginner to Pro from Mosh Hamedani

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

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)

Get immediately download Angular 4 – Beginner to Pro from Mosh Hamedani

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

---

Get immediately download Angular 4 – Beginner to Pro from Mosh Hamedani