Example of ad-hoc module loading about angular-couch-potato

[laurelnaiad]

To answer the easy question, yes -- any time you want to load a couch-potato component(s) file, you'll need require.js.

Hmm. I think what I had in mind with the promised-and-undelivered "ad-hoc" docs was just that you can, at any time, put a couch-potato file into a require.js require function's dependencies list. When you do that, then, by the time the file is asynchronously loaded and a digest cycle starts and completes, the component(s) that are defined in said file will be defined to angular.

The thing to keep in mind, though, is when you do this, you are too late for the digest cycle in which that file was loaded. The reason it "just works" in the routing scenario is that you get a fresh "free-to-you" digest cycle as the view and the controller are instantiated.

So, when you don't do the loading in that context, you almost have to "foresee" the need for the dependency in order to have it available in time. I can't think of a good reason why you would really want to do this, unless you are avoiding angular routing (be it ui-router or ngRouter) altogether, in which case you are probably not really going to be worried about couch-potato, because you'll probably end up reloading your entire app as the user navigates around.

Can you tell me what you were thinking you might have benefitted from in this not-well-described scenario?

[andyperlitch]

Good news! I actually was able to get a working example of what I want to do and it doesn't need require.js. Here's the gist of my use-case: I want to dynamically load a module containing a directive, and (optionally) services that the directive depends on. Once loaded, I want to create an element with that directive and inject it into the page. All this should happen when the user performs some action. I am going to create a repository with my working example soon, so I will link to it here.

[andyperlitch]

Take a look!
https://github.com/andyperlitch/angular-adhoc-module-loading-example

[laurelnaiad]

That's a fascinating application of it.... thanks for sharing!

I wonder why this works, though....

  var couchPotatoMethod = _.camelCase('register ' + componentType);
          // Use couchPotato to add it to our module
          $couchPotato[couchPotatoMethod](componentArguments);

Note the space between register and the closing '...

Perhaps camelCase takes care of spaces? I only knew about dedasherization.

[andyperlitch]

You got it! _.camelCase does take care of spacing