Skip to content

Instantly share code, notes, and snippets.

@felixmosh
Created November 26, 2016 14:54
Show Gist options
  • Save felixmosh/da19a6785de0bacc1270fe3ac2aab4b7 to your computer and use it in GitHub Desktop.
Save felixmosh/da19a6785de0bacc1270fe3ac2aab4b7 to your computer and use it in GitHub Desktop.
Use SEO friendly urls using angular 1.x and ui-router
// assuming you have constant that looks like that:
const serverSEOUrls = {
'super-seo-friendly-category-url': {type: 'category', id: 1},
'super-seo-friendly-tag-url': {type: 'tag', id: 24}
};
angular.module('app', [])
.config(($stateProvider, $urlMatcherFactoryProvider) => {
$urlMatcherFactoryProvider.type('dbType', {
encode: function (urlDef) {
return urlDef && _.findKey(serverSEOUrls, urlDef);
},
decode: function (url) {
return serverSEOUrls[url];
},
is: function (urlDef) {
return urlDef && _.findKey(serverSEOUrls, urlDef);
}
});
.state('front', {
url: '/{def:dbType}',
templateProvider: ($stateParams) => `<${urlTypeToComponent[$stateParams.def.type]}></${urlTypeToComponent[$stateParams.def.type]}>`
});
});
// Then you can use ui-sref with that
<a ui-sref="front({def: {type:'category', id:1}})">categorty</a>
// that will navigate to `super-seo-friendly-category-url`
// the controller of the component will get access to the object def by injecting $stateParams and accessing $stateParams.def.type for type or $stateParams.def.id for id.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment