Mastering Angular: From Basics to Advanced Development

Name: Mastering Angular: From Basics to Advanced Development
Rating: 4.6 (77 reviews)

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

Created bySelfcode Academy

Last updated 1/2025

English

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.

Course content

6 sections • 94 lectures • 29h 22m total length

1.1 Understanding the Basics of Angular18:30
1.2.1 Setting Up Your Development Environment30:12
1.2.2 Exploring project structure generated by Angular CLI27:29
Explore how to structure an Angular app with core, feature, and shared modules to improve maintainability. Understand the build process and ahead-of-time versus just-in-time compilation in the Angular CLI workflow.
1.3 Introduction to Components in Angular37:58
1.4.1 Data Binding in Angular38:24
Discover Angular data binding across interpolation, property binding, style binding, class binding, and attribute binding, plus two-way binding with forms module and ngModel to synchronize model and view.
1.4.2 Databinding - Component communication23:10
1.5.1 Directives in Angular32:05
1.5.2 Directives in Angular Part-213:33
1.5.3 Custom directives20:23
1.6.1 Project -1 Personal Portfolio Website5:11
1.6.2 Project Solution- Personal Portfolio Website21:43
Create a standalone angular portfolio project, generate a portfolio component, and configure bootstrap for a responsive UI, then run ng serve to preview on localhost.

2.1.1 Form Handeling- Introduction15:00
2.1.2 Form Handeling- Template Driven Forms- Lab Session26:34
2.1.3 Form Handeling- Template Driven Forms- Lab Session Part-223:19
2.1.4 Form Handeling- Reactive Forms28:00
2.1.5 Custom Validators19:57
2.2.1 Component Lifecycle21:23
2.2.2 Component Lifecycle - Lab Session54:27
2.3.1 Dependency injection -services18:37
2.3.2 Hierarchial Injector and injector tree10:44
Explore dependency injection in Angular by wiring services through the constructor, configure providers in app modules, and enable data sharing across parent and child components via the hierarchical injector tree.
2.3.3 Services for data sharing8:25
2.4.1 Routing and Navigation11:38
2.4.2 Routing and Navigation Lab Session20:45
2.4.3 Route configuration9:58
2.4.4 Navigate route pragmatically9:01
2.4.5 Route Parameters and Query Parameters23:02
Learn to use route parameters and query parameters in Angular routing, retrieve values with activated route and param map, and navigate with router link and navigate.
2.4.6 Router Fragments9:53
2.4.7 Child Routes18:43
2.4.8 Route Guards7:31
2.4.9 Route Guards - canActivate13:26
2.4.10 Route Guards - canActivateChild6:47
2.4.11 Route Guards - canDeactivate8:41
2.4.12 Route Guards - Resolve8:28
2.4.13 Route Guards - Updates on new version12:43
2.5.1 Project - 2 Task Management Application3:47
Build a task management app in Angular to practice task services, forms (reactive or template-driven), routing and navigation, with components for listing, creating, and detailing tasks.
2.5.2 Project 2 Solution7:51

3.1.1 Creating Custom Structural Directives19:10
3.1.2 Using host listener and host binding6:41
3.1.3 ElementRef and Renderer2 for DOM manipulation12:09
3.2.1 Introdcution to RXJS20:28
3.2.2 Rxjs observables for handling async7:49
3.2.3 Operators18:20
3.2.4 Operators -lab31:42
Mastering Angular lab demonstrates RxJS observables and core operators such as filter, tap, switchMap, map, takeUntil, catchError, and reduce, via a service-based fetch data workflow with merging and delay.
3.2.5 Chaining and combining observables14:25
3.2.6 Promises12:10
Learn promises as a fundamental JavaScript tool for single asynchronous operations, including resolve and reject, error handling, and converting promises to observables with from or of.
3.2.7 Subjects20:49
3.2.8 Subjects - Continued8:12
3.3.1 View child and contentChild14:54
Explore advanced component techniques in Angular with viewChild and contentChild decorators to access child components and projected content, plus lifecycle hooks after view init and after content init.
3.3.2 Dynamic component loading14:44
3.3.3 Communication between sibilings19:29
3.3.4 Http client integration34:25
3.3.5 CRUD21:03
Mastering Angular: students learn to implement crud operations with the http client, distinguish put and patch for full versus partial updates, and use ids to update or delete posts.
3.3.6 Interceptor17:37
3.4.1 Project 3 -Introduction4:50
3.4.2 Project 3 -Lab45:44

4.1 State Mangement with Ngrx15:34
4.2 Mange application with Ngrx34:15
4.3 Application with Ngrx devtools6:50
Install ng store dev tools to instrument the store and debug state and actions in your angular app. Use redux dev tools to monitor actions and state changes.
4.4 Asynchronous state mgmt with Ngrx effects42:05
4.5.1 Deployment and Optimization5:37
Learn deployment and optimization for an angular app: build, transfer necessary files, configure environment, use ng build --prod with tree shaking and AOT, and select hosting like Firebase or Netlify.
4.5.2 Deploying Angular application13:55
4.6 Optimizing Angular Application16:39
4.7.1 Unit testing intro15:36
4.7.2 Unit testing with jasmin karma31:01
4.8 E2E testing29:01
4.9 Project 4-Introduction2:51
4.10 Project 4- Project Lab 145:14
4.11 Project 4- Project Lab 234:01
4.12 Project 4- Project Lab 329:13
Implement effects for auth and login, connect login component to the auth service, dispatch login actions, handle token on success and errors on failure, and configure routing and http client.
4.13 Project 4- Project Lab 443:30
Debug a broken login by adding express.json and analyzing api errors with caudium, then scaffold a register flow with angular components, routing, and mongodb-backed state management.
4.14 Project 4- Project Lab 540:23
Fix timeouts and enhance login/register forms with bootstrap, then build a blogging page in Angular using routing and NgRx store to load and display blogs from an API.
4.15 Project 4- Project Lab 636:20

5.1.1 Internationalization and localization5:55
5.1.2 Angular pipes5:06
5.1.3 Ngx translate22:13
Explore ngx translate for multi-language support in Angular apps, configure the HTTP loader, create en and es JSON files, and implement translation pipes and language switching.
5.2.1 Lazy Loading9:35
Master lazy loading to load modules on demand, reduce initial load time and bundle size, and leverage code splitting, tree shaking, and aot compilation for faster Angular apps.
5.2.2 Treeshaking and code splitting9:09
5.2.3 AOT compilation6:15
5.3.1 XSS abd CSRF23:15
5.3.2 Authentication and Authorization12:45
5.3.2.1 JWT example37:57
5.3.3.1 Securely storing sensitive data and API keys- 18:29
5.3.3.2 Securely storing sensitive data and API keys- 23:34
5.4.1 Nested routing and child route22:47
5.4.2 Route Resolver12:58
5.4.3 Preloading Strategies8:49
5.5 Extra Content11:10
5.6 Project 5 - Introduction2:49
5.7.1 Project 5 - Explanation- 17:35
5.7.2 Project 5 - Explanation- 224:37
5.7.3 Project 5 - Explanation- 317:01
Develop a dynamic product grid by iterating a JSON array with Ng4, binding image, title, and price, applying pipes and router links to navigate to a product detail page.
5.7.4 Project 5 - Explanation- 435:05

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 Learn

Module 1: Introduction to Angular Basics
Learn 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 Concepts
Delve 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 Topics
Explore 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 Deployment
Understand 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 Practices
Learn 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 Project
Apply 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!

Who this course is for:

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.

Mastering Angular: From Basics to Advanced Development

What you'll learn

Explore related topics

Course content

Module 1: Introduction to Angular Basics11 lectures • 4hr 29min

Module 2: Advanced Angular Concepts25 lectures • 6hr 39min

Module 3: Advanced Angular Topics19 lectures • 5hr 45min

Module 4: State Management and Deployment17 lectures • 7hr 22min

Module 5: Advanced Topics and Best Practices20 lectures • 4hr 47min

Module 6: Final Project2 lectures • 21min

Requirements

Description

Who this course is for: