Custom Routes in UI Router Angular JS (URL Shortcuts) - angularjs

Question

I have some states which look like this:
.state('patient.patient-login', {
abstract: true,
template: '<ui-view></ui-view>'
})
.state('patient.patient-login.practiceID', {
url: "/patient-login/:practiceID",
scope: true,
templateUrl: "views/patient-login.html"
})
The problem is the :practiceID variable can be quite long and not user friendly, I want to give a user the ability to create a custom URL which is tied to the practice ID, for example on Facebook when you create an account you start out with a profile URL like this: http://facebook.com/123456789 but then you can change it to http://facebook.com/whateveryouwant
So essentially I want to accomplish something like this:
POINTER
http://domain.com/companyname > http://domain.com/#/patient-login/companyid
ANOTHER EXAMPLE
http://domain.com/ladentist > http://domain.com/#/patient-login/-85k3jfGEioltold
I was able to allow a user to set their unique url but I'm not sure how to even start to setup the routing like that?

Answer 1

Not sure what the rest of your project looks like but you could update your state to handle both id's and unique urls in the resolve property. Which would roughly look like this:
.state('patient.patient-login.practiceID', {
url: "/patient-login/:practice",
scope: true,
templateUrl: "views/patient-login.html",
resolve: {
patientData: [
'$stateParams',
'practiceSvc', // replace practiceSvc with however you are fetching data from your server
function($stateParams, practiceSvc) {
// check if the :practice param is an id or unique url
if ($stateParams.practice === /* id check */) {
// Call to API - get practice by ID
return practiceSvc.getByID($stateParams.practice);
} else {
// Call to API - get practice by unique url
return practiceSvc.getBySlug($stateParams.practice);
}
}
]
}
})
This assumes you can tell the difference between a unique url and an id. If you can't do that you could update it to check for the id first then the unique url if no practice is found.