AngularJS app.module vs app.route

Question

I read this article about best practices for AngularJS project structure: https://scotch.io/tutorials/angularjs-best-practices-directory-structure

Under the title "App Folder" he explains shortly the difference between the files app.module.js and app.route.js but I didn't understand.

Can anyone give me an example with a short pseudo code for both of the files?

Any help will be profoundly appreciated!

Answer 1

Under this structure, app.module.js would be used to create the main module for your application (eg. App), configure services that you are using throughout your application, or for running arbitrary code once the module has loaded all of its dependencies and configured any services it may wish to configure.

app.route.js would be for specifically configuring one service: the router that you are using to handle state in your application. It could create its own module or re-use the one from app.module.js, but if it were to use a custom module, it would have to depend on your choice of router directly. In addition, you would have to add it as a dependency for the main app.module.js eg.

angular.module('App', ['App.Routes']);

angular.module('App.Routes', ['RouterModule']);

Example using just one module named App, which also depends on some other arbitrary module SomeModule and the routing module RouterModule:

app.module.js

angular.module('App', ['SomeModule', 'RouterModule'])
  .config(function (SomeServiceProvider, SomeOtherServiceProvider) {
    // Configure SomeServiceProvider/SomeOtherServiceProvider.
  })
  .run(function () {
    console.log('Done loading dependencies and configuring module!');
  });

app.route.js

angular.module('App')
  .config(function (YourRouterProvider) {
    // Configure YourRouterProvider to define the states for the application.
  });

Angular Modules:

https://docs.angularjs.org/api/ng/function/angular.module

Routing in Angular using ngRouter:

https://docs.angularjs.org/api/ngRoute