To become an effective Angular developer, you need to learn 19 things in this article
To become an effective Angular developer, you need to learn 19 things in this article
A todo app is the equivalent of your 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. Here’s a run down of the core concepts you need to learn when it comes to Angular in order to properly leverage the JavaScript framework.
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 quick summary of Angular itself) I wished I had when I first started out with Angular 2+.
1. Modular Angular Architecture
In theory, you can put all your Angular code on one page and in 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 collection of code that is dedicated to 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 patterns, scalable angular application architecture
2. One-way Dataflow and Immutability
Way 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 binding
3. Attribute and Structural Directives
A directive is an extension of HTML through custom elements. Attribute directives lets you alter the properties of an element. Structural directives changes 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 directive.
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 directives, Angular structural directive patterns
4. Component Life-cycle Hooks
Every piece of software has its own life-cycles 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 DOM
We 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 hooks, component life cycle
5. Http and Observable Services
This isn’t really an Angular specific feature but something from ES7. Angular just happened to implement it as part of the framework’s support capabilities and understand this can also translate well to React, Vue and any JavaScript related library or framework.
Observable services is a pattern that allows 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 Eeverything is data.
What to Google:
JavaScript observable patterns, Angular http and observables, ES7 observable feature
6. Smart/Dumb Component Architecture
When 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.
The idea behind smart/dumb is determining what is a component’s 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 components, stateless dumb components, presentational components, smart components in Angular
7. Application Structure and Best Practices
The 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’s 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. Syntax is easy to pick up. It is definite and clear cut. Application structural knowledge, however, requires 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 apps, Angular libraries, Angular packages, Angular bundles, Angular micro apps, monorepo
8. Template Binding Syntax
Binding is the icing on the JavaScript framework. It is also one of the reasons for existing in the first place. Template binding bridges the space between static HTML and JavaScript. 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 binding, Angular event binding, Angular two-way binding, Angular interpolation, Angular passing constants
9. Feature Modules and Routing
Feature 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 modules, shared feature structures in Angular, feature module providers, lazy loading with routing and feature modules
10. Forms and Validation (Reactive Forms and Validators)
Forms is an inescapable part of any front end development. At some point, you’ll need to work with forms.
And with forms comes validation.
There are different ways to construct smart and 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 validation, template driven validation, reactive form validation, sync and async validators in Angular, built-in validators, Angular custom validators, cross field validation
11. Content Projection
Angular 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 project 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 projection, Angular parent child view relationship, Angular view data relationships
12. onPush Change Detection
By 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 is 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 as happened.
What to Google:
Angular onPush change detection
13. Route Guards, Preloads, Lazy-loading
If 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 is more than just deciding if you’re going to load a particular set or 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 patterns, Angular preloading and lazy loading modules, Angular secured route patterns
14. Custom Pipes
Formatting 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 comes 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 pipes
15. @viewChild and @ContentChild Decorators
viewChild 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 decorators, viewchild and contentchild in Angular, Angular component data sharing
16. Dynamic Components and ng-template
Components 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 assumes that things will not change. It is predictable with expected inputs and outputs.
Dynamic components however, are rendered on an as-required basis. Type come in 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 Angular, dynamic components a ng-templating
17. @Host @Hostingbinding and exportAs
@Host, @Hostingbinding and exportAs are Angular directive decorators that extends the parameters its 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 helps make it what it is.
What to Google:
Angular directives patterns, @Host, @Hostingbinding and exportAs in Angular
18. State Management with RxJs
The state of your application ultimately determines the data that is displayed to your user. If your state is in a spaghetti of a mess, 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 RxJs, Flux/Redux principles, Angular state management principles
19. Dependency Injection and Zones
Dependency 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 facilitates the change detection process.
What to Google:
Angular zones, dependency injections, Angular DI
Final words
Angular is a massive topic. While building a lot of 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.
Thank for reading! Please share if you liked it!
#javascript #devops #angular #angular-js
