Create multiple directives on a module across multiple files

[plast...@googlemail.com]

Hi!

I want to develop some directives for angularjs. They should be independent, but they should belong to a single module, called "myjs". 

I already wrote the modules and spread them across multiple files, but I have a problem extending the existing module... The first module is written like this:

angular.module('myjs', []).directive('keydown', function ($parse) {

...

});

The second one like this:

angular.module('myjs', []).directive('autoscroll', function () {

  ...

});

But it seems like the second directive is clearing the whole module. I read the documentation and I found out, that I have to use the module call without the dependency array... But, again, if I rewrite each module, so that it looks like this:

angular.module('myjs').directive('keydown', function ($parse) {

...

});

I get an error on the first module, that theres no module called "myjs"... How can I test, if the module exists? I have to do something like:

var myjs;

if(!angular.hasModule('myjs')) {

  myjs = angular.module('myjs', []);

} else {

  myjs = angular.module('myjs'); 

}

Or am I doing it completely wrong? How can I build such interchangeable, independent modules?

[Peter Bacon Darwin]

Lose the [] from all but the first module.

Pete
...from my mobile.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[James Wanga]

Hi Kevin, Welcome to angular.

declare your module up front then add directives to the myjs variable independent of the module declaration. Here is a fiddle with the solution:

http://jsfiddle.net/TqTeg/

[Pawel Kozlowski]

Hi James!

While your solution will work it has a disadvantage of creating a
global variable (myjs).
What Peter is suggesting is a better approach, avoiding creation of
global variables:
http://jsfiddle.net/rYJUy/1/

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[James Wanga]

Agreed. However, since controllers aren't created as angular modules, you'll have to create a global namespace anyway to hold controllers so you may as well use it for other modules.

var MyApp = MyApp || {};

MyApp.Controllers = Application.Controllers || {};

MyApp.Filters = angular.module('myapp.filters', []);

MyApp.Services = angular.module('myapp.services', []);

MyApp.Directives = angular.module('myapp.directives', []);

MyApp.Controllers.FooController(){

...

}

MyApp.Filters.filter('fooFilter', function(){

...

});

MyApp.Services.directive('fooService', function(){

...

});

MyApp.Directives.directive('fooDirective', function(){

...

});

[Pawel Kozlowski]

Hey,

On Wed, Oct 17, 2012 at 7:45 PM, James Wanga <jwa...@gmail.com> wrote:
> Agreed. However, since controllers aren't created as angular modules, you'll
> have to create a global namespace anyway to hold controllers so you may as
> well use it for other modules.

This is not true.
You can actually create controllers by:

angular.module('mymodule').controller('MyCtrl', function($scope){
//controller code goes here
});


Check the Module's doc for more: http://docs.angularjs.org/api/angular.Module

Cheers,
Pawel

[Kevin Preller]

Hi!

Thank you all for the quick answers, but I still have a problem left...

If I take this jsfiddle for an example: http://jsfiddle.net/rYJUy/1/ I have to declare the module first, at one place. But the modules are independent of each other, the order should be independent too. I have to include the definition of the main module in every directive file, to allow this.

Another problem to this approach is, that I can't specify dependencies on other modules on each directive, if I create the main module at the top.

[James Wanga]

How about that. I had no Idea. Thanks, Pawel!

[Kevin Preller]

I want to put each directive in its own file, so that I can use a package manager (like nuget/npm) to manage these additions for my daily development work. I work in a team, so the other members of my team should be able to use my packages in their development workflow too. 

I thought this would be great with angular, because of the dependency injection mechanism: They can snap in my packages and immediately use them. 

But with this approach every one of them would have to manually put the line angular.module('myjs', []) at the top of their code, knowing the dependencies of all packages.

Another approach I tried is sub-modules for each directive. So I will use a wrapper module for each directive to keep them independent of the code around it. The problem with this approach: The array of dependent modules will be huge.

[Pawel Kozlowski]

Hi Kevin!

Yes, you are completely right, those are exactly kind of problems you
would get with this approach. This is why I would suggest a different
setup where you would create a separate module for each directive (so
you can have dependencies expressed on each directive level) plus a
module acting as an entry point to all the directives.

In practice it could look like this: http://jsfiddle.net/rYJUy/3/

How does it sound?

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

[James Wanga]

Hey Kevin.

Put your initial module declaration in the application bootstrap file (app.js) Then it will exist in any subsequent files. Its worth mentioning that this is another reason I created a single global. It keeps me from having to write "angular.module('myapp')" every time. It also guards against future changes to the application name. you'll only have to change the name once in js and once in html.

[Kevin Preller]

I think thats the best approach so far. You get the independency of each "package". The downside: It doesn't work automatically if you include another file + its a little more to write and even more if you have a lot of directives. Can I do something like:

angular.module('my-main-module', ['myjs.*']); ? :-)

[Pawel Kozlowski]

Hi!

On Wed, Oct 17, 2012 at 8:51 PM, Kevin Preller
<plast...@googlemail.com> wrote:
> . The downside: It doesn't work automatically if you include
> another file + its a little more to write and even more if you have a lot of
> directives.

True.

> Can I do something like:
> angular.module('my-main-module', ['myjs.*']); ? :-)

Nope. What I'm doing in my app is that this "aggregate" module gets
generated by the build system based on "partial" modules.

Cheers,
Pawel

[Kevin Preller]

I think I will stick to the manual approach, so my team members will have to edit their app module by themself for each sub module. In my opinion, thats the cleanest way to get my idea working :-)

Thank you :-)

[Peter Bacon Darwin]

Principle of least astonishment

--

[Cary Landholt]

Kevin,

You may want to try a dependency management tool, such as RequireJS (http://requirejs.org/).

Here's a repo I put together to play around with Angular (https://github.com/CaryLandholt/AngularFun).

My team is doing something similar to you with sharing modules, and we're using RequireJS to help.

Thanks,
Cary

[TsenYing H]

Pawel;

I realize this is an old post,

but would you describe the tools and process you use to generate the "aggregate" top level module definition from the "partial" modules?

Thanks,

Ying