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

`'themes/{{ mainCtrl.site_theme }}/view/home.html'` should be `'themes/' + 'mainCtrl.site_theme' + '/view/home.html'`. Since this code won't execute as a template, `{{ }}` won't work, if I am correct. — mechanicious, Mar 24 '14 at 16:13
cheers for the reply, this just gives me another error `mainCtrl is not defined`. ive read somewhere that you cant use $scope variables in your app.config but surely theres a way around using it (or an alternative) — Ayce Allchorn, Mar 24 '14 at 16:20

score 3 · Accepted Answer · answered Apr 08 '14 at 10:57

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/

score 1 · Answer 2 · edited May 23 '17 at 11:54

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.

Alexander Boychenko · Answer 3 · 2014-03-26T07:27:05.877

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.

angularjs using variables in templateUrl

3 Answers3