Injecting module function into AngularJS service - angularjs

Question

I have been reading these two links 1 and enter link description here. The idea is to have clean and module code.
The modular approach explained in the links above suggest to a file for the function, and another file for injecting the functions into angular's directive, controller, ... .
As an example:
/* app.js */
define([
'/path/to/controller',
'/path/to/service1'
], function(MyController, MyService1))
{
"use strict";
angular
.module('myApp', [])
.controller('MyController', MyController)
.factory('MyService1', MyService1);
});
/* controller */
define(function()
{
"use strict";
return ['$scope', 'MyService1', MyController];
function MyController($scope, MyService1)
{
/* Now do your coding here */
}
});
/* service */
// Identical to controller
Notice here how the function is implemented in one file, and then injected into the angular.
Now, I can see a potential problem is your service custom depends on another custom service. Say MyService2 also uses MyService1. My two services now look like:
/* MyService1 */
define(function() {
return MyService1;
function MyService1() {
/* Code Here */
}
});
/* MyService2 */
define(function() {
return ['MyService1', MyService2];
function MyService2(MyService1) {
/* This uses MyService1 here */
}
});
If your app uses both, then all is well, however, if it only uses one, then we have a problem:
/* This will work fine */
angular
.module('myApp')
.controller('MyController', MyController)
.factory('MyService1', MyService1)
.factory('MyService2', MyService2);
/* This will NOT */
angular
.module('myApp')
.controller('MyController', MyController)
.factory('MyService2', MyService2); <-- This guy internally requires MyServce1
I don't see how to solve this problem while still keeping this kind of approach. Can you help?

Answer 1

RequireJS and AngularJS have two non-overlapping dependency resolution mechanisms. If you're really going to use both, as suggested in the linked guide (I'm hard-pressed to imagine a scenario where this would be useful enough), you need to keep in mind, that the individual "service files" don't really contain services at all. They contain just their constructors/factories. To put it all together, your module definition needs to solve both of the separate concerns:
load all files with the constructors/factories needed for service/controller/... definitions, and
define all things that you don't want to leave as external dependencies.
In other words, if you define a module containing just service2, which has a service1 dependency, and don't define service1, then service1 becomes an external dependency of your module (it cannot be used in an environment where no service1 is defined).
In other words, the two DI frameworks do NOT complement each other so that you could load a file containing a service only when you need to inject it (in Angular) for the first time. You could find a way to use RequireJS to load something (most likely whole separate Angular applications) on demand. But you cannot load a service/controller/... on demand (at runtime), because such things can only be defined in the configuration phase of AngularJS application construction. Once the run phase starts, no more configuration (e.g. service definition) can be done.
If you just want to create a single application with modular code, I'd suggest that you leave RequireJS be for now and focus on simply creating modular code, as the style guide suggests.

Answer 2

i see you use requirejs there so you got 2 dependencies frameworks in parallel (angular and requirejs)
when you define a file that has a dependency on MyService2, than MyService2 needs to define a dependency to MyService1 (requirejs dependency) so both files are loaded and available.
that closes the issue for requirejs file loading.
now angular: in MyService1 you do
angular.factory('MyService1', function () {....});
than angular knows of that service and can inject it to anyone who needs it.
for MyService2 you do,
angular.factory('MyService2', ['MyService1', function(MyService1) {...}]).
and now angular injected MyService1 into MyService2 and you can use it in service 1.
than in some controller you need service 2 you just do
angular.controller('MyController', ['MyService2', function(MyService2){...}]);
and angular injects service 2 that has already service 1 injected into it.