AngularJs ui-router reload template

Question

I have a angularjs project that's using ui-router for routing. I am using $state.reload() to reload the current state and it works just fine except that in my development system i want the $state.reload() to also reload the html template to reflect the new changes without a full page reload.

Is there a hack or option to do this ?

Update :

Chris T's solution almost worked, but i have templateFactoryDecorator witch adds a cache buster to the template url.

function configureTemplateFactory($provide) {
    // Set a suffix outside the decorator function
    var cacheBuster = Date.now().toString();

    function templateFactoryDecorator($delegate) {
        var fromUrl       = angular.bind($delegate, $delegate.fromUrl);
        $delegate.fromUrl = function (url, params) {
            if (url !== null && angular.isDefined(url) && angular.isString(url)) {
                url += (url.indexOf("?") === -1 ? "?" : "&");
                url += "v=" + cacheBuster;
            }

            return fromUrl(url, params);
        };

        return $delegate;
    }

    $provide.decorator('$templateFactory', ['$delegate', templateFactoryDecorator]);
}

so

$templateCache.remove($state.current.templateUrl);

didn't work and i had to use

$templateCache.removeAll();

Its not ideal but for development environment its ok.

try this go instead of reload . $state.go('the state you want to go to', null, {reload: true}); — MjZac
– MjZac, Commented Jan 4, 2016 at 11:13
@MjZac $state.reload() calls $state.transitionTo. $state.go calls $state.transitionTo internally, so they both are doing the same thing. — Exlord
– Exlord, Commented Jan 4, 2016 at 14:56
What do you mean "reload the HTML template to reflect the new changes"? Are you changing the HTML in the template? Or is it just the data that is changing and the template needs to be re-rendered? — Sunil D.
– Sunil D., Commented Jan 4, 2016 at 19:04
@SunilD.Yes, i am talking about a development environment where i am changing the html template file in the server,and would prefer to reload that single html file instead of refreshing the hole page. — Exlord
– Exlord, Commented Jan 6, 2016 at 7:28
hi @Exlord, any progress to that? i am also stuck on the same thing. — Sunil Lama
– Sunil Lama, Commented Nov 2, 2016 at 2:29

Chris T · Accepted Answer · 2016-01-04 18:33:41Z

5

Internally, UI-Router leverages the $templateCache service to avoid re-fetching templates. Before calling $state.reload(), clear out the template you want to refetch from the server.

Assuming you want to do this from a controller:

function MyController($scope, $templateCache, $state) {
    $scope.reload = function() {
        $templateCache.remove("/path/to/template.html");
        $state.reload();
    }   
}

Docs:

On a side note, I find it odd that you would want to refetch the template from the server.

answered Jan 4, 2016 at 18:33

Chris T

8,2262 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Exlord Over a year ago

On a side note, I find it odd that you would want to refetch the template from the server. this is for a development environment only, just to make the dev easier when i make changes to the template file.

Chris T Over a year ago

Have you looked into something like browsersync, or livereload?

Exlord Over a year ago

that sounds nice but still need to call reload to reinitialize the controller and it won't update the template cache either.

Chris T Over a year ago

Browsersync and livereload both refresh the browser (like hitting ctrl-r). The whole application is re-bootstrapped, so it would indeed reset the template cache and reload the controller.

Exlord Over a year ago

LOL the hoe reason for my question is that i wont have to reload the hole page every time there is a small change in one of the files :D

Dagm Fekadu · Accepted Answer · 2016-01-04 11:07:02Z

0

I may have missed your point but When you use $state.reload() it reloads the state that means all the partials in side that template and the controllers in side that controller scope. Thus the state is reloaded not the full page.

So I see no errors in your side unless you want to do other staff .. And if you are dynamically generating the DOM, It will do it for you .

answered Jan 4, 2016 at 11:07

Dagm Fekadu

6101 gold badge8 silver badges23 bronze badges

1 Comment

Exlord Over a year ago

The html template file dose not gets reloaded from the server, just the controller. The html template is read from the cache

Collectives™ on Stack Overflow

AngularJs ui-router reload template

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related