Angular Advanced MasterClass & FREE E-Book

Build Your Own Library, Learn Advanced Angular Features

4.22 (1266 reviews)
Udemy
platform
English
language
Web Development
category
Angular Advanced MasterClass & FREE E-Book
10,756
students
7 hours
content
Apr 2024
last update
$84.99
regular price

What you will learn

Code in Github repository with downloadable ZIP files per section

Learn the most advanced features of Angular

learn how to how to build open source Angular libraries

Component API Design

Component Styling best practices

Templates and Template Outlets, ng-content, ng-container, style isolation and customization

AOT, global events, debugging with the CLI, @ViewChildren, @ContentChildren

Light DOM vs Shadow DOM, @HostBinding, @HostListener, dynamic components

Directives, handling keyboard events, testing, animations and more

Why take this course?

Would You Like to Build Your Own Open Source Library?
Probably all of us developers have thought at some point in time to build our own library and contribute to the overall open source community. The goal of this course is to give you all the tools necessary for you to be able to do your own open source Angular Library.

We will build a series of small open source libraries of progressively increasing difficulty, and we will learn a large number of Angular advanced features in a very fun and practical way.

What Is The Best Way To Learn Advanced Angular Features?
The best way to learn Angular and its most advanced features is to simply take and use it to build something very concrete, like for example an application or a library - and do it in a step-by-step way, as there is no replacement for that experience.

In order to understand a technology, we really need to build something non-trivial with it - blog posts and docs will only get us so far.

This is of course very time-consuming to do without any help because we will have to learn everything by ourselves along the way as we build something, gluing together an endless number of blog posts, documentation and Stackoverflow answers.

So because of this, in order to really dive deep into Angular we will be using it to build a series of small reusable libraries. The goal is to create a practice scenario, and learn the advanced features of Angular in their original use cases, where they make the most sense and so are easier to learn.

What Libraries Will We Build In This Course?
We will be building the following libraries, and learn how to publish them on NPM using the Angular Package Format: We will start by doing a Font Awesome customizable Input Box and learn the advantages of designing our components using content projection over a more input/output based design. At this stage we will also introduce the Angular Testing ecosystem.

Then we will progressively increase the difficulty of each library: we will build a dynamic tab container that allows to receive a template as a component input, effectively allowing to override parts of the component template while keeping a default look and feel for the component.

We will then build a reusable dynamic modal component with customizable content. This component have its contents configurable via either content projection or an input template, and will introduce the notion of Structural Directives.

We will also learn how directives and components of a given module can interact in a transparent way, independently of the place where they are used in the template, using a shared library service. We will then build a Input mask directive, where we will cover some advanced keyboard handling behavior.

At the end of the course, we are going to take all the components and directives that we built in previous sections, and we are going to build one larger example using them: A Payment Modal Widget!

We will then introduce the Angular Animations module, and use it to animate the modal widget, we will see how to define animations that can be reused across components.

What Will you Learn In this Course?
We will learn how to create an AOT compatible library in the Angular Package Format, how to define a library module, how to isolate the styles of a component but still make them customizable, how to design components and directives to make them easier to maintain - making them customizable while at the same time giving the components great default behavior.

We will cover all of the more advanced features of Angular, including Component API Design, Component Styling best practices, Templates and Template Outlets, ng-content, ng-container, style isolation and customization, AOT, global events, debugging with the CLI, @ViewChildren, @ContentChildren, Light DOM vs Shadow DOM, @HostBinding, @HostListener, dynamic components, directives, handling keyboard events, testing, animations and more (this is a non-extensive list).

But more than presenting the features in isolation, we will use them in real use cases which will make the features much easier to learn.

What Will You Be Able to do at the End Of This Course?
By the end of this course you will know many of the most advanced features of Angular, but most of all you will know when to use them and why. You will know how to build open source Angular libraries, and know how to make them available to the open source community on NPM.

With this advanced course, you will have a rock-solid foundation on Angular: you will very likely be able to tackle the more advanced Angular development tasks that you will come across in your day to day job or personal projects.

Have a look at the course free lessons below, and please enjoy the course!

Screenshots

Angular Advanced MasterClass & FREE E-Book - Screenshot_01Angular Advanced MasterClass & FREE E-Book - Screenshot_02Angular Advanced MasterClass & FREE E-Book - Screenshot_03Angular Advanced MasterClass & FREE E-Book - Screenshot_04

Our review

Based on the feedback provided, it's clear that the course has both strengths and areas for improvement. Here's a summary of the key points: **Strengths:** - The course offers advanced knowledge and takes learners' understanding to the next level. (Several reviews) - The instructor provides clear explanations in some sections. (Several reviews) - It covers a wide range of Angular capabilities that are valuable for current projects. (Several reviews) - Good content overall with helpful insights. (Review) - Useful for those who already have some familiarity with Angular and want to deepen their knowledge. (Review) **Areas for Improvement:** - The course is outdated, particularly with references to Angular version 7 while the latest versions are 11 or 12. (Multiple reviews) - Deprecated code and practices, such as direct DOM manipulation and keycode usage, are still present in the course content, which may lead to errors or deprecation warnings. (Multiple reviews) - The course lacks up-to-date code examples and exercises, which could hinder practical application and learning. (Several reviews) - There are issues with compatibility due to outdated package versions and instructions that no longer apply, such as the need to downgrade Node.js or fix errors related to `@angular/cli` and other dependencies. (Multiple reviews) - The absence of downloadable code snippets could make it harder for learners to follow along. (Review) - Some sections could benefit from visual aids, like diagrams, to aid understanding. (Review) - The course description should accurately reflect the current state of the course content and version compatibility. (Multiple reviews) - The author should update the course and address the issues in the quickstart library. (Review) **Recommendations for Course Improvement:** 1. **Update the Content:** Ensure that all examples, exercises, and explanations are up to date with the latest versions of Angular (currently Angular 13). 2. **Revise the Code:** Remove any deprecated code and practices from the course material. 3. **Improve Version Management:** Provide clear instructions on managing different Node.js and npm versions, especially when they conflict with the project's requirements. 4. **Increase Practical Application:** Include more exercises and real-world examples to help learners apply what they've learned. 5. **Provide Code Snippets:** Offer downloadable code snippets for learners to reference and use. 6. **Enhance Visual Explanations:** Add diagrams or visual aids where necessary to improve understanding. 7. **Maintain Course Description Accuracy:** Make sure the course description matches the content and reflects current best practices in Angular development. 8. **Respond to Learner Questions:** Ensure that the instructor or support team actively engages with learners' questions and provides timely assistance. Overall, while there are challenges with the course's current state, many users find the advanced concepts and overall content valuable, suggesting that with updates and improvements, it could be a highly beneficial resource for Angular developers.

Charts

Price

Angular Advanced MasterClass & FREE E-Book - Price chart

Rating

Angular Advanced MasterClass & FREE E-Book - Ratings chart

Enrollment distribution

Angular Advanced MasterClass & FREE E-Book - Distribution chart

Related Topics

1204590
udemy ID
5/4/2017
course created date
8/13/2019
course indexed date
Bot
course submited by