search

benmarch / angular-ui-tour

Product tour using Angular UI Bootstrap Tooltips
163 stars 49 forks source link

Switching from ng-cache-loader to html-loader #176

Closed typhoon2099 closed 6 years ago

typhoon2099 commented 6 years ago

This should allow for including HTML via strings instead of using AngularJS's template cache. I haven't been able to add any more tests to confirm but I have implemented it into another project and all seems fine.

typhoon2099 commented 6 years ago

Can $templateCache be used to add a template as a string? I was under the impression that you had to give it a URL to load the template from. If I'm misunderstanding it then my changes are possibly not that useful, but it would also be nice to add something to the README to point this out.

benmarch commented 6 years ago

Yes, $templateCache is a key-value store where the key is a "url" (although it can technically be any string or number) and the value is the template string. So if you want to add a custom template to a tour step, you would do one of two things:

  1. Put your new template into $templateCache using the key "tour-step-template.html" ($templateCache.put('tour-step-template.html', tourStepHTML)). This is not recommended though.
  2. Put your new template into $templateCache using a new key (any key) and set the templateUrl on your tour or tour step to be the key.

This is core AngularJS functionality which is why I didn't include it in the docs. AUIT is smart enough to try to fetch a template using the given key if it is not already in the cache, though. So "templateUrl" will first look to the $templateCache, then attempt to fetch the template if it is a miss (this is exactly how AngularJS will handle things like ngInclude and directive/component templates.)

I'm using a Webpack plugin (ng-cache-loader) to automatically put the templates into $templateCache at build time so that they don't have to be fetched at runtime. I definitely see the merits of using a standard plugin like html-loader, so if you want to just make that change I think that would be very useful. You can probably do that easily by importing the templates in the run configuration, and putting them into the $templateCache manually from there. Let me know what you think.