Repeating module name for each module component

Question

The famous Best Practice Recommendations for Angular App Structure blog post outlines the new recommended angularjs project structure which is now component-oriented, not fu

Answer 1

I wrote about this in one of my blog posts

Modules often have overlapping features

Let’s say were building an account settings page. The admin account can sendNotifications where the user account can updateNotifications. Both admin and user accounts can updateAvatar.

Describes features as well as relationships

Components abstracted into separate modules, files, and folders are easier to work with.

A parent that encompasses all of these modules could be called account. We know that account will have two different roles and three different features. If account was "role agnostic", your definition might look something like:

angular.module("account",  [
  "account.updateAvatar",
  "account.sendNotifications", 
  "account.updateNotifications"
]);

But defining parent modules to these features promotes organization and inheritance:

angular.module("account",  [
  "account.common",
  "account.admin", 
  "account.user"
]);

angular.module("account.common",  [
"account.common.updateAvatar"
]);

angular.module("account.admin",  [
"account.admin.sendNotifications"
]);

angular.module("account.user",  [
"account.user.updateNotifications"
]);

Feature modules can follow a similar pattern:

angular.module("account.common.updateAvatar",  [ 
"account.common.updateAvatar.services",  
"account.common.updateAvatar.controllers",  
"account.common.updateAvatar.directives",
"account.common.updateAvatar.filters"
]);

Views and assets:

account.common.updateAvatar.less
account.common.updateAvatar.tpl.html
account.common.updateAvatar.heading.tpl.html
account.common.updateAvatar.body.tpl.html

Dot notation can enable easy globbing patterns

Compile all of your HTML partials into cached JavaScript:

module.exports = function(grunt) {
  grunt.initConfig({
    html2js: {   
      partials: {
        src: ["src/**/*.tpl.html"],
        dest: "build/js/app.tpls.js",
        module: "app.tpls"
      }
    }
  )};
};

Concat all of your admin JavaScript independent of your user JavaScript:

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      admin: {
        src: ["src/**/*.admin.*.js"],
        dest: "build/js/admin.js"
      },
      user: {
        src: ["src/**/*.user.*.js"],
        dest: "build/js/user.js"
      }
  )};
};