Splitting Module Pieces Across Multiple Files in AngularJS

Question

I am working on an AngularJS app. I need to create a module that I can include in other projects. This module has services and directives that are spread across multiple files.

Here is my plunker

From the plunker, you can see that I'm trying to load the module like this:

var app = angular.module('app', ['my.module']);

However, I get an error that says:

Module 'my.module' is not available! You either misspelled the module name or forgot

However, I believe I am referencing it properly. Which makes me think that I'm not bundling the pieces of the module correctly. My directive an service were working fine until I tried putting them into a module. Now, its not working and I'm not sure how to get it working. I would appreciate any help I can get.

Phil Sandler · Accepted Answer · 2014-09-11 15:45:39Z

1

I think you had a few things confused here. You were creating the module multiple times, and you were mixing the variable name ("app") with the module name ("my.module"). Also, the plunker code doesn't match the code that you posted.

Anyway, I think this should clean it up (plunker):

var app = angular.module('my.module', []);
app.controller('AppController', ['$scope', function($scope) {
    $scope.test = '';
}]);

app.service('myService', ['$timeout', '$q', function($timeout, $q) {
//[etc.
]});

app.directive('myDirective', [function() {
  //etc.
    }]);

Edit

Ok, I misunderstood your code.

It looks like plunkr loads scripts from bottom to top (?), so I declared the module variable in myService.js, and referenced it in myDirective.js.

New Plunker

edited Sep 11, 2014 at 15:45

answered Sep 11, 2014 at 14:55

Phil Sandler

28.1k21 gold badges88 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user70192 Over a year ago

Actually, I wanted "app" and "my.module". The reason I wanted two separate ones was to simulate "my.module" being loaded into a separate app.

Collectives™ on Stack Overflow

Splitting Module Pieces Across Multiple Files in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related