Relative AngularJS Modules

by Tanner Linsley on Nov 12, 2014 - 3 minute read

Once upon a time, you built, or planned on building, an large scale Angular application. You probably thought about your file structure and module structure, making sure it fit into a widely used style guide that makes sense. Here at Nozzle, we take our style guides very seriously, and tried to make the best decision on how to modularize, and make our codebase extensible. One problem though, as it seems we could never get rid of were hard-coded image references, and the like. Anything pointing toward a static asset always seemed to start out like so:

<img src="app/path/to/my/assets/images/myImage.png"/>

Assuming that you had a lot of images in your design, you probably got used to using find > replace a lot if your file structure changed. But what if your modules needed to be independent and sandboxed? We’ve come up with a tiny trick to help your modules be completely independent, regardless of where they sit in your file structure. This also opens up some shortcuts for a reverse-like dependency injection (importing one module that contains all references to child modules, or simply using a single child module with its parent as a dependency)

Enter Relative AngularJS Modules

Consider the parent module:

(function() {
    'use strict';

    var module = angular.module('myApp.things', []);

    var all = angular.module('myApp.things.all', [
        'myApp.things',
        'things.someThing',
        'things.someOtherThing',
        'things.someOtherOtherThing',
    ]);

    module.root = '/path/to/this/thing/';

    module.config(function(stateHelperProvider) {

        stateHelperProvider.setNestedState({
            name: 'things',
            url: '/things',
            templateUrl: module.root + 'directives/things/things.directive.html',
        });
    });
})();

The module is declared, and a shortcut method for importing it and/or all of its children is also created. Then the module itself gains a paths property on which you can store any path to the root, partials, submodules or whatever else you need. Those properties can then be used to create constants for your module to use in your templates, bind to a scope property for use in image src or any other thing needing a file location. But really, what this allows in child modules is even cooler…

(function() {
    'use strict';

    var module = angular.module('things.someThing', ['myApp.things']);
    var parent = angular.module('myApp.things');

    module.root = parent.root + 'sub_module/someThing/';

    module.config(function(stateHelperProvider) {

        stateHelperProvider.setNestedState({
            name: 'things.someThing',
            url: "/someThing",
            templateUrl: module.root + 'someThing.html',
        });
    });
})();

The child module is created with its dependency on the parent module, but then we also reference the parent module itself, then utilize the parent modules paths properties (or constants if you’ve created them) to build the paths for the child module. Those paths can then be accessed the same way by any child modules. This is AWESOME! Because as you can now guess, you can change the location of a module directory in your file structure, and as long as you reflect the changes in your module, all of your template, image, etc references will remain intact!

Hope this helps!

Enjoy.

Personas:
Tanner Linsley

Tanner loves front-end development and spends most of his day in Javascript and React. Occasionally he designs as well, and even likes to record some music every now and then, but nothing is more exciting to him than building a new open source framework, or surfing Github.

Like what you see?

Take Nozzle for spin for 2 weeks for free!

or

Call 1-855-NOZZLE1

Wait! Our data robots are chomping at their bits to get your free trial started, so don't let them down!
Enter your email below to save them from their electronic sorrow and start your trial!
×