Before going ahead, I assume you have a basic understanding of angular if not please check this course from Dan Wahlin.
Angular is a front-end framework to build web applications that can be work across multiple platforms.
Angular has a steep learning curve composing a lot of software terms and that makes it harder for beginners but the good part is you don't have to know everything about those topics to get started because the angular team did a good job hiding much complexity away to make you focus on building rather than learning.
In this article, I will show you from my experience what you have to learn to master angular.
Directives are one of the core features of Angular. They allow an Angular developer to write new, application-specific HTML syntax. In actual, directives are functions that are executed by the Angular compiler when the same finds them in the DOM.
There are three kinds of directives in Angular:
- Components—directives with a template.
- Structural directives—change the DOM layout by adding and removing DOM elements.
- Attribute directives—change the appearance or behavior of an element, component, or another directive.
Learning the difference between those kinds, how to use it properly and how to create a custom one
If you work with angular for awhile, you for sure noticed this wired syntax which is called decorators or annotations. Angular used it a lot internal and in your code, you can go deep and learn how to build one from scratch or learn what angular provide
Type of decorators in angular
- Class decorators, e.g.
- Property decorators for properties inside classes, e.g.
- Method decorators for methods inside classes, e.g.
- Parameter decorators for parameters inside class constructors, e.g.
There are more than 15 decorators available in angular you can check them all here Exploring the Various Decorators in Angular.
Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them.
( angular.io )
Layout Composition is a way to composing different blocks like component, directives, pipes, and service to solve the business need
- Advanced Component Patterns
- A Philosophy for Designing Components with Composition - Jeremy Elbourn | ng-conf
Change detection is the mechanism designed to track changes in an application state and render the updated state on the screen. It ensures that the user interface always stays in sync with the internal state of the program.
Angular uses ZoneJS to intercept events that occurred in the application and run a change detection cycle automatically.
For learning how change detections work and how to optimize it, read this article Change detections rules in angular which I wrote it before
The previous mention topics earlier are the basic building blocks for any angular apps, but there are many topics not related to angular by itself so I will mention them here with good resources to learn it 😍
1. Object-Oriented Programming
It is one of the most popular programming paradigms in the software industry and it is basically a way to structure your app based on objects and the relations between them so it is called object-oriented. Learn object-oriented is a great way to succeed in the software industry and a great bounce for mastering angular. Mosh Hamedani did a good job explaining object-oriented programming with nice Illustrations (My Prefer way to learn) don't miss it out Object-oriented Programming in 7 minutes
- Object Oriented vs Functional Programming with TypeScript
- Typescrpt offical docs
- TypeScript Tutorial - The net ninja
- Dynamic Static Typing In TypeScript
- 10 Insights from Adopting TypeScript at Scale
- Deep Dive into the Angular Compiler - Alex Rickabaugh | AngularConnect
ReactiveX: Reactive programming combines the Observer pattern with the Iterator pattern and functional programming with collections to fill the need for an ideal way of managing sequences of events. (rxjs-dev)
RxJS = Observables + Operators + Schedulers + Observer + Subscription those are the main building blocks in rxjs to achive reactive programming paradigms which are based on events or what we call event-driven. First, differentiate between cold and hot observables, Second differentiate between Subject, BehaviorSubject, ReplaySubject, and AsyncSubject, Finaly, learn the oberators esbacailly the most common used.
- RxJS: Observables, Observers and Operators Introduction
- RxJS Quick Start with Practical Examples - Fireship
- Top 7 RxJS Concepts for Angular Developers - Fireship
- RxJS Top Ten - Code This, Not That
- Why Should You Care About RxJS Higher-order Mapping Operators? - Deborah Kurata | ng-conf
Learning those topics will make you fluent in angular and make you more productive with a lot of confidence.