search

jacopotarantino / angular-match-media

Angular module to use Bootstrap3 media queries in your angular controllers.
https://jack.ofspades.com/angular-matchmedia-module/
Other
135 stars 37 forks source link

aliased angular module name to angular-match-media #20

Closed arianra closed 6 years ago

arianra commented 8 years ago

For consistent naming (with the folder structure etc) I added an angular module name alias: "angular-match-media". I also changed the name in the bower.json and renamed the main file to the same name as well.

This consistency improves ease of use when adding it into bigger projects with module loaders etc

arianra commented 8 years ago

Hmm, for some reason I didn't think about pushing to my forked master would change this pull request.

You can disregard this pull request as I've changed a lot more since then. sorry ):

jacopotarantino commented 8 years ago

Yeah haha. That'll happen. The reason the name is inconsistent is actually because somebody got to "angular-match-media" before me but it's an abandoned project as far as I know. I wanted to use the name for SEO value though so more people can find and use it. Which module loader are you using? Is there something else I can do to make the plugin play nicely?

arianra commented 8 years ago

It plays nicely but we currently have automated scripts for building and dynamic module loading, and naming inconsistencies become a chore when maintaining the project. Folder name, file name, bower name and the actual module name are hard to keep track of if they're all different.

I've been thinking about updating this module though, adding unit tests, build configuration, and some features like MediaQueryLost listeners. I did a very bare listener right now to reduce the amount of listeners, but it could be improved a lot.

arianra commented 8 years ago

also having an umd pattern or similar pattern to play nicely with both commonjs and requirejs, the best option though would most likely write it with System module loading in mind and transpile it back to requirejs or commonjs,

jacopotarantino commented 8 years ago

Is there a case for using Angular modules with a standard module loader? I've never tried that. I always just expect angular and whatever my app name is to be defined and run scripts the usual way.

arianra commented 8 years ago

Yes definitely, I vaguely recall the Angular team themselves recommending making your modules compatible with module loaders. There are two main scenario's why you would want to use a module loader. The first is bundling, for instance with browserify. The second is when lazy-loading/dynamic module loading. Or for both reasons at the same time.

We currently have a modular angular project, with dynamic module loading support through requirejs. The project contains dozens of self-contained require-js bundles, these bundles contain directives/services that serve a specific function and are brought under a module, the module can then be loaded dynamically when it is used on the page. These modules are completely seperate from the main angular app that is run on the page and some pages simply don't require every single directive/service, hence why we have the system.

So basically, every self-contained module is a require-js optimized bundle with all its dependencies. This of course means all our angular modules have to be managed and loaded through requirejs.

It's not a perfect system, but in general you shouldn't expect angular to have to deal with sorting/ordering dependencies etc. Angular also does not have support for dynamic module loading, so it's all custom.

When it comes to bundling files, you still have to worry about loading order of files. There are multiple ways to deal with this issue, for instance you could definitely concatenate modules in a specific order (or have a flat structure where all modules have a single dependency that is loaded upfront) and then bundle them simply through concatenation. However its not uncommon to see projects use CommonJS for working out the dependencies and bundling, compiling a distributable bundle that is then used in a live environment.

jacopotarantino commented 8 years ago

Thanks for all that! It's interesting to see that people are actually doing that now. When last I was looking into dynamic module loading with Angular, most of the solutions were hacky at best. Maybe I'll do a series of updates to my modules to bring them all current.