Require factory method when called by controller

Question

I'm using an angularJS and requireJS seed which you can download here: LINK

In that seed only the controllers that are called download the relevant controller which is then triggered. I've been trying to call a factory from my controller (with no luck) plus I would like the services/factories only to download the relevant factory if it has been called.

I've attempted to require a function within the factory method (much like the controller) but it is not working.

This is where I left off: Plunkr link

Answer 1

user971824.

I've put together something I call couchPotato that lazy-registers just about anything in angular using requirejs and the resolution features of $routeProvider (or any other router that does lazy promise-based resolution.

I've created a plunker based on yours demonstrating how you could do it with couchPotato. If you take a look at it, I think you'll see that it's a bit simpler because you don't actually create modules for all of the things you register lazily.

couchPotato grew out of some other example apps I found on the web. What I wanted was a tight way to do the lazy registration and a provider/service combo seemed ideal. I also wanted to maintain the ability for one component to depend on another, like in your example, you want the controller to depend on the factory... couchPotato lets you specify those dependencies in requirejs syntax.

So your controller, in my rendition, looks like this:

define(['app', 'myFactory'], function(app) {
  app.couchPotato.registerController([
    'mycontroller',
    [
      'myFactory',
      function(myFactory) {
        var message = myFactory.getCustomers();
        alert(message);
      }
    ]
  ]);
});

In this example, I made the controller, the factory and the value all lazy, but you could pick and choose and have some registered the "old fashioned way" at configuration time and others registered with couchPotato when they're needed for a given route.

http://plnkr.co/edit/Z3v1mszQiiq024po8Ocp?p=preview

A couple of things to note: 1) I put in a default route in order to trigger the lazy loading of your controller, your service (factory) and the version value. 2) I modified your service to append the version just to show how one component can depend on another (the service depends on the version value, the controller depends on the service).

So, within the require configuration, you don't actually specify any of this... it's all done lazily within your route.

$routeProvider.when('/',
 $couchPotatoProvider.resolveDependenciesProperty({
  templateUrl:'home.html',
  controller: 'mycontroller',
  dependencies: [
   'mycontroller'
  ]
 })
);

Since mycontroller depends on myFactory and myFactory depends on version, by the time your route is displayed they are all available and hooked up. I put some dummy text in the home.html partial just for kicks, but the controller is assigned by the $routeProvider so you don't actually need to specify it in the template.

couchPotato lives at https://github.com/afterglowtech/angular-couchPotato if you'd like to see a couple of other samples. I shim'ed it in dependent on angular because I designed it to be usable in cases where an entire application doesn't necessarily use requirejs... thus if you are loading angular with requirejs, you need to make couchPotato dependent on angular using the shim/deps technique.

LMK if you have any questions/comments... hope this helps!