How to declare sub-modules in AngularJS

Yes. Third option is the best solution. First option will definitely give a pain in the neck. Second option adds a dependency of module X in the main app, which is not desirable. You would want your module to be self-contained. So third option is the best solution.

Here is the best practice recommendations from Google which you are actually trying to adhere to. :) Moreover, it will also be great for you (as suggested by Google's best practice) to not separate the files by artifacts, which means you do not need controllers, directives, etc dir structure as below. Also note partials, CSS and even tests are in the component are contained in the component/module directory. Hence the module is totally contained and independent, which helps in reusability:

sampleapp/   app.css  app.js                          app-controller.js  app-controller_test.js  components/    bar/                                "bar" describes what the service does      bar.js      bar-service.js      bar-service_test.js      bar-partial.html    foo/                                "foo" describes what the directive does      foo.js      foo-directive.js      foo-directive_test.js      foo-partial.html  index.html

I hope this will be helpful.