AngularJS UI-Router URL renaming / beautify ui-sref

For making URLs nicer, it’s possible to write your own beautifier with intercepting the AngularJS ui-router.
In my case, I wanted to get rid of the spaces and replace them by dashes.

Register a custom type that transforms the data. UI urlMatcherFactory Docs here:$urlMatcherFactory
Define a custom type. Implement encode, decode, is and pattern and register it via $urlMatcherFactory:

In the template I’m using the productRename as the target: