Is it necessary for me to create a module for every individual file?

Question

Is it necessary for me to create a module for every individual file?

Just diving into Angular and trying to figure out the best way to modularize my app.

app
    toolbar
        toolbar.module.js
        menu.html
        index.html
        search.html
    sub-system-1
        subSystem1.module.js
        directive-template.html
    sub-system-2
        subSystem2.module.js
        directive-template.html

In the toolbar.module.js, I currently have 3 directives (menu, index, search) each with their own controller and service. It's becoming a bit confusing to maintain all the controllers, directive definitions, and services in one file.

I'm wondering if there's a way to organize this better so that each directive is in its own file along with its corresponding controller and service?

Maybe something like:

// menu.directive.js

var module = angular('toolbar.menu.directive',[]);
module.directives(...); // add menu directive to the module

Then within toolbar.modules:

// toolbar.module.js

var module = angular('toolbar',[toolbar.menu.directive]);

Is creating multiple fine-grained modules the only solution for achieving this level of organization?

javascript angularjs

Answer 1

Answer №1

There's no need to create countless tiny modules in Angular. You can simply refer to an existing module by leaving out the second argument:

angular.module('moduleName');

This allows you to organize your toolbar directives, controllers, and services into separate files. In each file, all you have to do is reference the toolbar module like this:

angular.module('toolbar')
  .controller('MenuCtrl', function() {
    // ...
  });

Answer 2

There's no need to create countless tiny modules in Angular. You can simply refer to an existing module by leaving out the second argument:

angular.module('moduleName');

This allows you to organize your toolbar directives, controllers, and services into separate files. In each file, all you have to do is reference the toolbar module like this:

angular.module('toolbar')
  .controller('MenuCtrl', function() {
    // ...
  });

Is it necessary for me to create a module for every individual file?

Answer №1

Similar questions

Setting Start and End Dates in Bootstrap Vue Datepicker to Ensure End Date is After Start Date

Unable to use href attribute as intended

The value from the angular UI bootstrap datepicker is unavailable when using a JQuery expression

The 'Component' you are trying to use cannot be rendered as a JSX component in Next.js

Positioning tooltip arrows in Highcharts

What is the best way to incorporate a description box for each city on the svg map that appears when you hover your mouse over it?

The API key fails to function properly when imported from the .env file, but performs successfully when entered directly

It appears that the setup function completes its execution before the onMount function is called in Vue 3

Can Javascript work together with HTML?

Why isn't pagination typically positioned inside of a tbody element rather than before or after it?

Guide on loading xml information from a web browser using JavaScript

The web browser's engine is blocking the connection to the secure websocket server

Error: jwt_decode function has not been declared

Vue - Display components next to sidebar

What is the best way to have text wrap around an icon in my React application?

Including a cancel button to close the open window

React does not allow _id to be used as a unique key

Sharing data between controllers within an MVC architecture in JavaScript

When downloading files in Chrome or Safari, the $ajax call is in a pending state, whereas in IE or Firefox,

What is the best way to insert images into a database?