Links, links everywhere!
An application can have a lot of internal linking. The more the application grows, the more the internal linking setup grows. Inevitably you run into situations where you repeat yourself a lot, creating the same long URL over and over. To make things even worse, if for some reason, the path for one of your features changes, you have to find all the places in your app that link to that feature, and change them. That is not fun!
Good to know before jumping in
This solution applies mainly to an Angular setup, but can be adapted to any framework out there. This is purely a subjective approach. We're all different, we all see things in a different way. This is not a tutorial.
The SiteNavigationService. No, this thing does not exist, YET. But we'll create it together.
Now, what do we want from it?
- We want a service available everywhere
- That can give us links to different features within our app(and not only)
- That can handle dynamic links as well(with parameters, query parameters etc.)
- That is easy to test
Now, let's take these in order:
A Service that's available everywhere
Well, this is an easy one. We have to make sure we mark the service with
providedIn: root and Angular will take care of the rest.
Something like this:
This way, Angular will create the service and make sure it's available the first time it's needed. Angular will also make the service a singleton. Again, nice 👍.
A Service that gives us links do different features
Now, how would we use this service? Ideally, there would be a method that returns the path that we need. Let's say for example, in several places we need the link to the logged-in user dashboard. A solution would be something like this:
That's about it. Whenever we need a link to the user dashboard, we call this method, and we have it.
A Service that can handle dynamic links
What if we need the link to the user public profile. Well, this can't be a static link anymore, since we have(hopefully) many users on our platform. Easy to solve though; we introduce parameters.
Again, pretty straight forward. We receive the dynamic part as a parameter and use that when building the URL.
A Service that is easy to test
If you followed my previous articles, you probably already have the tests written(TDD baby). If not, you can start here: test driven development in an angular world.
For the above code, the tests are quite easy, which adds to the appeal of this solution. They could look something like this:
It's so easy, it feels like cheating.
Just for argument’s sake, let's make it a bit more complicated
What if your website has localized links. So, the link for UK would be 'account/dashboard', but the link for Spain would be 'cuenta/tablero'(sorry, I used Google Translate on this one 😅).
Well, since everything is centralized, this is also easy to solve, since we need to change only one place: SiteNavigationService
There's a bit of information here, so let's unpack.
First, we have a new type
Country which is a Union type.
Then, we have the
UrlSegmentMap which allows us to create objects that have a specific property for each country. We then use this to create the
accountMap and the
After all this is done, it's simply a matter of using the maps instead of the hardcoded string in the already existing methods. That's about it.
How do you use this service
In order to use this magnificent service we created, we need 2 parts. The first part is injecting it into the component where we need it:
And then, in the HTML:
That's it. Enjoy your navigations! ⛵️
If you want to know more about this, or something doesn't make any sense, please let me know.
Also, if you have questions, you know where to find me… On the internet!
Be kind to each other! 🧡
Over and out
⛵️ A solution to losing track of URLs within your Angular app, and how to centralize them in a reusable and testable way. https://catalincodes.com/posts/centralized-navigation #Angular #Typescript #Testing