Image by Aphinya Dechalert.
Titled: Red Monster learning Angular19 Things You Need to Learn to Become an Effective Angular DeveloperA comprehensive guide on how to become a pro at AngularAphinya DechalertBlockedUnblockFollowFollowingMay 31A todo app is the equivalent of a ‘Hello world’ application for front-end development.
While it covers the CRUD aspect of creating an app, it often only scratches the surface of what a framework or library can do.
Angular seems to always be changing and updating — but in reality, there are certain things that remain the same.
There’s a lot to learn when it comes to Angular and a lot of us get stuck in the beginner’s circle simply because we don’t know where to go or what to search up.
This is a comprehensive guide (and a quick summary of Angular itself) I wished I had when I first started out with Angular 2+.
Modular Angular ArchitectureIn theory, you can put all your Angular code on one page and into one massive function, but it’s not recommended, nor is it an efficient way to structure your code and defeats the purpose of Angular’s existence.
Angular uses the concept of modules heavily as part of the framework’s architecture.
This is in reference to the collection of code that has a single reason for existing.
Your Angular app is essentially made up of modules — some stand alone and some shared.
There are multiple ways to structure your modules within your application and digging into the different architectural structures can also help determine how you’ll scale your app as it grows.
It can also help isolate your code and prevent code coupling from occurring.
What to Google:Angular architecture patternsScalable angular application architecture2.
One-way Dataflow and ImmutabilityWay back in Angular 1, two-way binding captured the hearts of many front-end developers.
It was essentially one of Angular’s original selling point.
However, over time it started to pose problems in terms of performance when the application started to become more complex.
It turns out you don’t actually need two-way binding everywhere.
Two-way binding is still possible in Angular 2+, but only when it is explicitly requested by the developer — thus forcing the person behind the code to think about the direction and flow of their data.
It also allows the application to become more flexible with data by determining how data should flow.
What to Google:Angular data flow best practices,Uni-directional flow in Angular,Advantages of one way binding3.
Attribute and Structural DirectivesA directive is an extension of HTML through custom elements.
Attribute directives let you alter the properties of an element.
Structural directives change the layout by adding or removing elements from the DOM.
For example, ngSwitch and ngIf are structural directives because it evaluates the parameters and determines if parts of the DOM should exist or not.
Attribute directives are custom behaviors attached to the element, component or other directives.
Learning how to use these two directives can extend your app’s capabilities and reduce the amount of duplicate code in your project.
Attribute directives can also help with centralizing certain behaviors that are used across different parts of the app.
What to Google:Angular attribute directives,Angular structural directivesAngular structural directive patterns4.
Component Life Cycle HooksEvery piece of software has its own life cycle that determines how something is created, renders and then removed.
Angular has a component life-cycle that goes something like this:create → render → render children → check when data-bound properties change → destroy → remove from DOMWe have the ability to hook into key moments within this cycle and target it at specific moments in time or event.
This allows us to create appropriate responses and configure behaviors according to the different phases of the component’s existence.
For example, you may need to load some data before the page gets rendered.
You can do this through ngOnInit() .
Or perhaps you need to disconnect from a database.
This can be done through ngOnDestroy().
What to Google:Angular life cycle hooksComponent life cycle5.
Http and Observable ServicesThis isn’t really an Angular specific feature but rather something from ES7.
Observable services are patterns that allow you to effectively deal with data — allowing you to parse, modify and maintain data in an event-based system.
You can’t really escape Http and Observables because everything is data.
Smart/Dumb Component ArchitectureWhen writing our Angular apps, we tend to put everything into the component.
However, that’s not exactly the best practice.
The idea of smart/dumb components in Angular is something that needs to be talked about more, especially in beginner circles.
Whether a component is smart/dumb determines its role in the grand scheme of the application.
Dumb components are often stateless with behaviors that are easy to predict and understand.
Make your component dumb whenever possible.
Smart components are harder to grasp because inputs and outputs are involved.
To properly leverage Angular’s capabilities, look into smart/dumb component architecture.
It will give you patterns and mindsets on how to approach your code and its relationships with each other.
What to Google:Smart/dumb Angular componentsStateless dumb componentsPresentational componentsSmart components in Angular7.
Application Structure and Best PracticesThe CLI can only take you so far when it comes to structure and best practices.
Building an Angular app (or any application in general) is like building a house.
There are set processes that are optimized by the community over the years that will result in the most effective and efficient application.
Angular is no exception.
Most complaints towards Angular by those trying to learn it is often due to lack of structural knowledge; the syntax is easy to pick up and it is definite and clear cut.
Application structural knowledge, however, requires an understanding of context, requirements and how it all fits together on a conceptual and practical level.
Learning the different potential application structures for Angular and their best practices will give you perspective on how to build your application.
What to Google:Single repo Angular appsAngular libraries, Angular packagesAngular bundlesAngular micro appsMonorepo8.
It is also one of the reasons for existing in the first place.
Angular’s template binding syntax acts as the facilitator between these two technologies.
Once you’ve learned how and when to use them, turning a once static page into something interactive becomes much easier and less annoying.
Look into the different scenarios for binding such as property binding, events, interpolation, and two-way binding.
What to Google:Angular property bindingAngular event bindingAngular two-way binding, Angular interpolationAngular passing constants9.
Feature Modules and RoutingFeature modules are underrated when it comes to Angular.
It is actually a really fantastic way to organize and ring-fence sets of business requirements.
It restricts responsibilities and helps prevent code pollution in the long run.
There are five types of feature modules (domain, routed, routing, service, and widget) and each deals with a certain type of functionality.
Learning to use feature modules in conjunction with routing can help create discrete sets of functionality and apply good and clear separation of concerns for your application.
What to Google:Angular feature modulesShared feature structures in AngularFeature module providersLazy loading with routing and feature modules10.
Forms and Validation (Reactive Forms and Validators)Forms are an inescapable part of any front-end development.
And with forms comes validation.
There are different ways to construct smart, data-driven forms when it comes to Angular.
The most popular iteration of forms is reactive forms.
However, there are other options out there, namely template-driven and custom validators.
Learning how validators work in conjunction with CSS will help speed up your workflow and turn your application into an error-handling ready space.
What to Google:Angular form validationTemplate driven validationReactive form validationSync and async validators in AngularBuilt-in validatorsAngular custom validatorsCross-field validation11.
Content ProjectionAngular has a thing called content projection, which is the ability to pass data from parent to child components effectively.
While this may sound complicated, it’s actually the act of putting views within views to generate a master view.
We often understand content projection on a surface level — when we nest child views inside a parent view.
However, to expand our understanding, we need to also understand how data is passed between different views.
This is where understanding content projection comes in handy.
Understanding content projection can help you determine the flow of your application’s data and where its mutability occurs.
What to Google:Angular content projectionAngular parent-child view relationshipAngular view data relationships12.
onPush Change DetectionBy default, Angular uses a default change detection strategy.
This means that components will always be checked.
While there’s nothing wrong with using the default, it can be an inefficient way to detect change.
For small applications, speed and performance are alright.
However, once your application gets to a certain size, things can become quite cumbersome to run, especially in older browsers.
onPush change detection strategy will speed up the application significantly as it depends on specific triggers to occur rather than a constant check to see if anything has happened.
What to Google:Angular onPush change detection13.
Route Guards, Pre-loads, Lazy-loadingIf you have a login of some sort, you’re going to need route guards.
The idea that you can protect certain views from unauthorized views is a must-have requirement in many applications.
Route guards act as an interface between your router and the requested route.
It is the decision maker that determines if a certain route is allowed access or not.
There’s a lot in the world of route guards to be explored — namely routing decisions based on things like token expiration, user roles authentications, and route securities.
Pre-loads and lazy-loading can also enhance your user’s experience by speeding up your application’s load time.
It is also good to note that pre-loads and lazy-loading are more than just deciding if you’re going to load a particular set of images or not.
It can also enhance your bundled architectures and load different parts of your application which may exist on different scopes and domains.
What to Google:Angular route guards,Angular authentication patternsAngular preloading and lazy-loading modulesAngular secured route patterns14.
Custom PipesFormatting data has never been easier with Angular pipes.
While a lot of the pre-configured and out the box pipes covers a lot of things like dates, currency, percentages and character casing, it doesn’t cover everything that you’ll ever need.
That’s where custom pipes come in handy.
You can create your own filters easily and transform data formats to your liking.
It’s really easy to make so go and check it out.
What to Google:Angular custom pipes15.
@viewChild and @ContentChild DecoratorsviewChild and contentChild are ways your component can talk to one another.
The point of Angular is that you have multiple components that are compiled together like a jigsaw puzzle, but that puzzle can’t really do much if the pieces are isolated from one another.
That’s where viewChild and contentChild comes in.
Learning to use these two decorators gives you the ability to access related components.
This makes the task of data sharing easier and transferring data and events triggered by associated components possible.
What to Google:Angular decoratorsviewchild and contentchild in AngularAngular component data sharing16.
Dynamic Components and ng-templateComponents are the building blocks of Angular.
However, not all components are fixed and need to be created on the fly rather than precompiled beforehand.
Dynamic components allow for the app to create certain components on the fly.
Static components assume that things will not change.
It is predictable with expected inputs and outputs.
Dynamic components, however, are rendered on an as-required basis.
They become quite handy when constructing an app that may be listening out for external sources and their updates or are reactions to actions that occurred on the page.
What to Google:Dynamic components in AngularDynamic components an ng-templating17.
@Host @Hostingbinding and exportAs@Host, @Hostingbinding and exportAs are Angular directive decorators that extend the parameters it is attached to.
It also gives you the ability to create concise templates to export for consumption within the application.
If the above sounds confusing, you should start by looking up Angular directives and their purpose for existing.
@Host, @Hostingbinding and exportAs are features of directives that help make it what it is.
What to Google:Angular directives patterns,@Host, @Hostingbinding and exportAs in Angular18.
State Management with RxJsThe state of your application ultimately determines the data that is displayed to your user.
If your state is a mess of spaghetti, chances are that your entire data structure will turn flaky and crumble against any changes.
When you start to understand how states work in Angular, you will understand how and why your data behaves the way it is.
While Angular has its own state management system, RxJs is a fantastic method for centralizing states and its associated data.
Data can get lost in the chain of parent-child relationships.
RxJs decouples this by creating a centralized store.
What to Google:Angular RxJsFlux/Redux principlesAngular state management principles19.
Dependency Injection and ZonesDependency injection is a massive concept in general, so if you’re not too well versed in the idea, this is one of the things you really need to look up.
There are multiple ways to cleanly create dependency injections within Angular, mostly achieved through the constructor.
It’s a way to import only the things that you need and therefore increase the efficiency of your application rather than loading everything under the sun.
Like dependency injection, zones is also an idea that’s also not exclusive to Angular.
It is a way for the application to detect asynchronous tasks from start to finish.
This is important because these async tasks have the power to alter the internal states of the application, and therefore the view.
Zones facilitate the change detection process.
What to Google:Angular zonesDependency injectionsAngular DIFinal wordsAngular is a massive topic.
While building Angular apps may help the learning process, sometimes you just don’t know what you don’t know.
It’s hard to know the unknown when you’re starting out and hopefully, this short guide has given you some enlightenment beyond your usual Angular tutorials, along with a bigger and more comprehensive look at Angular in general.