angularjs using variables in templateUrl

Question

I'm trying to use $scope in my templateUrl like this:

app.config(['$routeProvider',
function ($routeProvider) {
    $routeProvider.
        when('/blog', {
                templateUrl: 'themes/{{ mainCtrl.site_theme }}/view/home.html',
                controller: 'BlogMain',
        }).
        otherwise({
            redirectTo: '/blog'
        })
}]);

When trying to use:

root/themes/<theme_name>/view/home.html as the template file. It currently gives me the error GET http://www.url.com/themes/%7B%7B%20mainCtrl.site_theme%20%7D%7D/view/home.html 404 (Not Found)

NOTE: it works fine if I type the theme name normally

Any help will be appreciated :D thanks in advance

Answer 1

OPTION ONE

You can set a variable (in your case the theme name) in the url and then access it in your routes:

.when('/blog/:themeName', {
     templateUrl: function(params) {
         return 'themes/'+ params.themeName +'/view/home.html',
     }

This probably less suited to your situation though as it isn't ideal passing your theme name via the URL. I'd recommend option two...

OPTION TWO

You can use a provider to allow the setting of the theme name:

app.provider('themeConfig', function() {
    this.name = 'Default';
    this.$get = function() {
        var name = this.name;
        return name;
    };
    this.setName = function(name) {
        this.name = name;
    };
});

You can now inject the provider into your application config, set the theme and then use it in your routes.

app.config(['$routeProvider', 'themeConfigProvider', 
   function ($routeProvider, themeConfigProvider) {

      themeConfigProvider.setName('mytheme');

      $routeProvider
          .when( '/this', { templateUrl: themeConfigProvider.name + '-this.html' })
          .when( '/that', { templateUrl: themeConfigProvider.name +'-that.html' })
          .when( '/other', { templateUrl: themeConfigProvider.name +'-other.html' })
          .otherwise( { redirectTo: '/this' });
}]);

Working jsfiddle here: http://jsfiddle.net/3B5Sk/

Answer 2

During the configuration phase you can only ask for providers ($routeProvider, $locationProvider etc.) it means you cannot inject $scope instance. you can always inject any instance in the run phase.

example:

// configuration
app.config(function($routeProvider) {

});

//inject any instance 
 app.run(function($rootScope) {
      //your logic here
});

Take a look at the following stackoverflow answer.

Answer 3

app.config(['$routeProvider', 'themeStateProvider',
function ($routeProvider, themeStateProvider) {
    function getUrl(){
         return 'themes/' + themeStateProvider.currentTheme + '/view/home.html'
    }
    $routeProvider.
        when('/blog', {
                templateUrl: getUrl,
                controller: 'BlogMain',
        }).
        otherwise({
            redirectTo: '/blog'
        })
}]);

Then in controller you can inject themeState and update currentTheme property. This should work. currentTheme should property of the same object shared between provider and service.