CgBusy + Angular 1.x + ES6

[fcelarino]

Hi everyone. Do you know how to put cgbusy working with angular 1.x and ES6?

[originalwebgurl]

I'm not sure what tools you're using, but I added an alias to my webpack config:

{
    resolve: {
        alias: {
            "angular-busy": path.resolve("node_modules", "angular-busy/angular-busy.js")
        }
    },
}

Then I imported it like this:

import cgBusy from 'angular-busy';

[jacebot]

To expand on this, to get your template to import, be sure to wrap it in a script tag and add an ID. Otherwise if you try and use the normal relative route for templateUrl, it will give you a 404 in your console.

<script type="text/ng-template" id="angularBusy.html">
  <div class="loader animated fadeIn">
      <some-loading-element/>
  </div>
</script>

[crhistianramirez]

@jacebot where did you put that script tag? index? Wonder if there's a better way to load the template. Would be awesome if it this library had a template parameter so we could simply require it

[jacebot]

@crhistianramirez I added this to the end of my mainTemplate.html (container and file for the main <ui-view>) I do agree the option to add a string or es6 template literal to a template object would be pretty nice. Otherwise at the time, I had to find the path of least resistance and this suited the task.

I then set the templateUrl to the script Id on my app.js when loading the cgBusy defaults object

Hope that helps!

[crhistianramirez]

For anyone else stumbling on this we ended up with this solution:

export default angular.module('myapp.common', []).run(CacheTemplates).name;

function CacheTemplates($templateCache) {
  // All files in the /app folder that end in .html
  let templates = requireAll(require.context('../../', true, /\.html$/));
  templates.map(function(val) {
    $templateCache.put(val.name, val.tpl);
  });

  function requireAll(requireContext) {
    return requireContext.keys().map(function(val) {
      return {
        // the html string
        tpl: requireContext(val),
        // The path from the /app folder (without the leading two characters ./ )
        name: val.substr(2),
      };
    });
  }
}

Basically we're loading all of the templates into the $templateCache which makes them available via urls. We ended up having other libraries such as ui-bootstrap that had the same kind of issue. templateurl but no template. Not a very webpackey way and potentially a bit heavy handed but it worked well for us and has been in production for a while.

You could easily modify this to only target templates that you want accessible via url while using webpack's require on those that have a template option.