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