Angular UI Router - Dynamic TemplateURL - angularjs

Question

I am building a static HTML website with angular UI router for navigation. I basically have one ui-view with multiple (10+) html templates (pages) to load into that view. All my template pages are in a directory called 'pages'.
So i basically want to know if we can define just one state in the $stateProvider to assign multiple template urls dynamically instead of writing different states for each HTML template page (like mentioned below).
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/home.html',
controller: 'homeController',
controllerAs: 'home'
})
.state('viz', {
url: '/viz',
templateUrl: 'pages/viz.html',
controller: 'vizController',
controllerAs: 'viz'
})
.state('about', {
url: '/about',
templateUrl: 'pages/about.html',
controller: 'aboutController',
controllerAs: 'about'
})....
Any help is much appreciated.

Answer 1

That should not be so difficult, check for example this:
Angular UI-Router dynamic routing based on slug from API Ajax Call. Load view based on slug
We can use $stateParams and templateProvider to
.state('general', {
url: '/{type}',
//templateUrl: 'pages/home.html',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest)
{
var tplName = "pages/" + $stateParams.type + ".html";
return $templateRequest(tplName);
}
],
// general controller instead of home
//controller: 'homeController',
controller: 'generalController',
controllerAs: 'ctrl'
We can also restrict the parameter type to be just one of the expected values, see:
url: '/{type:(?:home|viz|about)}',
Angular js - route-ui add default parmeter
There is also very similar Q & A with working plunker and more details:
AngularJS ui-router - two identical route groups
Another examples could be found here:
Trying to Dynamically set a templateUrl in controller based on constant
Angular UI-router and using dynamic templates