Mastering Angular: From Basics To Advanced Development

Master Angular to build scalable web apps. Learn basics, advanced topics, RxJS, NGRX, routing, and deployment.

What you'll learn

Students will learn how to build dynamic and responsive web applications using Angular.

They will gain expertise in implementing advanced Angular concepts such as routing, state management, and RxJS.

Learners will understand how to optimize Angular applications for performance and deploy them to production environments.

The course will teach students to secure Angular applications through authentication, authorization, and following best practices.

Requirements

Basic knowledge of HTML, CSS, and JavaScript is recommended, but it is not mandatory.

Students will need a computer with internet access to install Angular and its related tools.

Description

This course is designed to guide you from Angular fundamentals to advanced concepts, equipping you with the skills to build scalable and dynamic web applications. Whether you're a beginner or an experienced developer, this course will help you master Angular and enhance your web development skills.Course Modules and What You’ll LearnModule 1: Introduction to Angular BasicsLearn the foundational concepts of Angular, including setting up the development environment, understanding project structure, and working with components.Key topics: Data binding, component communication, and directives.Project: Personal Portfolio Website.Module 2: Advanced Angular ConceptsDelve into advanced topics such as form handling (template-driven and reactive forms), component lifecycle, dependency injection, and routing.Key topics: Route guards, child routes, and data sharing through services.Project: Task Management Application.Module 3: Advanced Angular TopicsExplore more advanced features like custom structural directives, dynamic component loading, and HTTP client integration.Key topics: RxJS for asynchronous programming, operators, and managing state with subjects.Project: Advanced Angular features in action.Module 4: State Management and DeploymentUnderstand state management with NGRX and how to optimize and deploy Angular applications.Key topics: Unit testing, E2E testing, deploying Angular apps, and performance optimization.Project: Build a full Angular project using NGRX.Module 5: Advanced Topics and Best PracticesLearn about best practices in Angular development, including lazy loading, AOT compilation, and security practices.Key topics: Internationalization, secure storage of sensitive data, and advanced routing strategies.Extra Content: Learn about advanced features and strategies to make your Angular applications more robust and efficient.Module 6: Final ProjectApply everything you've learned in a comprehensive final project.Project: Build and deploy a fully-featured Angular application, showcasing the knowledge gained throughout the course.By the end of this course, you'll have a complete understanding of Angular, from basic to advanced, and be able to build professional-grade, production-ready applications. Let’s get started!

Overview

Section 1: Module 1: Introduction to Angular Basics

Lecture 1 1.1 Understanding the Basics of Angular

Lecture 2 1.2.1 Setting Up Your Development Environment

Lecture 3 1.2.2 Exploring project structure generated by Angular CLI

Lecture 4 1.3 Introduction to Components in Angular

Lecture 5 1.4.1 Data Binding in Angular

Lecture 6 1.4.2 Databinding - Component communication

Lecture 7 1.5.1 Directives in Angular

Lecture 8 1.5.2 Directives in Angular Part-2

Lecture 9 1.5.3 Custom directives

Lecture 10 1.6.1 Project -1 Personal Portfolio Website

Lecture 11 1.6.2 Project Solution- Personal Portfolio Website

Section 2: Module 2: Advanced Angular Concepts

Lecture 12 2.1.1 Form Handeling- Introduction

Lecture 13 2.1.2 Form Handeling- Template Driven Forms- Lab Session

Lecture 14 2.1.3 Form Handeling- Template Driven Forms- Lab Session Part-2

Lecture 15 2.1.4 Form Handeling- Reactive Forms

Lecture 16 2.1.5 Custom Validators

Lecture 17 2.2.1 Component Lifecycle

Lecture 18 2.2.2 Component Lifecycle - Lab Session

Lecture 19 2.3.1 Dependency injection -services

Lecture 20 2.3.2 Hierarchial Injector and injector tree

Lecture 21 2.3.3 Services for data sharing

Lecture 22 2.4.1 Routing and Navigation

Lecture 23 2.4.2 Routing and Navigation Lab Session

Lecture 24 2.4.3 Route configuration

Lecture 25 2.4.4 Navigate route pragmatically

Lecture 26 2.4.5 Route Parameters and Query Parameters

Lecture 27 2.4.6 Router Fragments

Lecture 28 2.4.7 Child Routes

Lecture 29 2.4.8 Route Guards

Lecture 30 2.4.9 Route Guards - canActivate

Lecture 31 2.4.10 Route Guards - canActivateChild

Lecture 32 2.4.11 Route Guards - canDeactivate

Lecture 33 2.4.12 Route Guards - Resolve

Lecture 34 2.4.13 Route Guards - Updates on new version

Lecture 35 2.5.1 Project - 2 Task Management Application

Lecture 36 2.5.2 Project 2 Solution

Section 3: Module 3: Advanced Angular Topics

Lecture 37 3.1.1 Creating Custom Structural Directives

Lecture 38 3.1.2 Using host listener and host binding

Lecture 39 3.1.3 ElementRef and Renderer2 for DOM manipulation

Lecture 40 3.2.1 Introdcution to RXJS

Lecture 41 3.2.2 Rxjs observables for handling async

Lecture 42 3.2.3 Operators

Lecture 43 3.2.4 Operators -lab

Lecture 44 3.2.5 Chaining and combining observables

Lecture 45 3.2.6 Promises

Lecture 46 3.2.7 Subjects

Lecture 47 3.2.8 Subjects - Continued

Lecture 48 3.3.1 View child and contentChild

Lecture 49 3.3.2 Dynamic component loading

Lecture 50 3.3.3 Communication between sibilings

Lecture 51 3.3.4 Http client integration

Lecture 52 3.3.5 CRUD

Lecture 53 3.3.6 Interceptor

Lecture 54 3.4.1 Project 3 -Introduction

Lecture 55 3.4.2 Project 3 -Lab

Section 4: Module 4: State Management and Deployment

Lecture 56 4.1 State Mangement with Ngrx

Lecture 57 4.2 Mange application with Ngrx

Lecture 58 4.3 Application with Ngrx devtools

Lecture 59 4.4 Asynchronous state mgmt with Ngrx effects

Lecture 60 4.5.1 Deployment and Optimization

Lecture 61 4.5.2 Deploying Angular application

Lecture 62 4.6 Optimizing Angular Application

Lecture 63 4.7.1 Unit testing intro

Lecture 64 4.7.2 Unit testing with jasmin karma

Lecture 65 4.8 E2E testing

Lecture 66 4.9 Project 4-Introduction

Lecture 67 4.10 Project 4- Project Lab 1

Lecture 68 4.11 Project 4- Project Lab 2

Lecture 69 4.12 Project 4- Project Lab 3

Lecture 70 4.13 Project 4- Project Lab 4

Lecture 71 4.14 Project 4- Project Lab 5

Lecture 72 4.15 Project 4- Project Lab 6

Section 5: Module 5: Advanced Topics and Best Practices

Lecture 73 5.1.1 Internationalization and localization

Lecture 74 5.1.2 Angular pipes

Lecture 75 5.1.3 Ngx translate

Lecture 76 5.2.1 Lazy Loading

Lecture 77 5.2.2 Treeshaking and code splitting

Lecture 78 5.2.3 AOT compilation

Lecture 79 5.3.1 XSS abd CSRF

Lecture 80 5.3.2 Authentication and Authorization

Lecture 81 5.3.2.1 JWT example

Lecture 82 5.3.3.1 Securely storing sensitive data and API keys- 1

Lecture 83 5.3.3.2 Securely storing sensitive data and API keys- 2

Lecture 84 5.4.1 Nested routing and child route

Lecture 85 5.4.2 Route Resolver

Lecture 86 5.4.3 Preloading Strategies

Lecture 87 5.5 Extra Content

Lecture 88 5.6 Project 5 - Introduction

Lecture 89 5.7.1 Project 5 - Explanation- 1

Lecture 90 5.7.2 Project 5 - Explanation- 2

Lecture 91 5.7.3 Project 5 - Explanation- 3

Lecture 92 5.7.4 Project 5 - Explanation- 4

Section 6: Module 6: Final Project

Lecture 93 6.1 Final Project -Introduction

Lecture 94 6.2 Final Project Explanation

This course is for frontend developers who want to expand their skills with Angular.,It is suitable for beginners who are interested in learning a modern web development framework.,Professionals aiming to build scalable and maintainable web applications will find this course valuable.,It is also ideal for anyone preparing for a career in web development or frontend engineering.