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
– mechanicious, Commented Mar 24, 2014 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
– Ayce Allchorn, Commented Mar 24, 2014 at 16:20

rdjs · Accepted Answer · 2014-04-08 10:57:42Z

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/

Community · Accepted Answer · 2017-05-23 11:54:25Z

1

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.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 24, 2014 at 16:24

Alex Choroshin

6,1872 gold badges31 silver badges36 bronze badges

Comments

Alexander Boychenko · Accepted Answer · 2014-03-26 07:27:05Z

0

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.

edited Mar 26, 2014 at 7:27

answered Mar 24, 2014 at 16:30

Alexander Boychenko

2861 silver badge6 bronze badges

Collectives™ on Stack Overflow

angularjs using variables in templateUrl

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related