AngularJS: Correct folder structure of a website that implements multiple tasks?

Question

Angular

There are several tasks, the tasks are different, for example:
- vacation planning;
- organizational structure of the enterprise;
- personnel registration;
It is clear that the subtasks have a lot in common: interface elements, functionality, and vice versa. What is the best way to separate general functionality from individual functionality?
Here is the case, it seems to me, for one task, and if two, three

app/                
  css/
    app.css
  img/
  index.html
  index-async.html
  js/
    app.js
    controllers.js
    directives.js
    filters.js
    services.js
  lib/
    angular/
      angular.js
      angular.min.js
      angular-*.js
      version.txt
  partials/
    partial1.html
    partial2.html

Answer 1

I often use this structure, but before the release I collect js applications through a minifier
(it is important to collect in order)
I write declarations like this:

!(function() {
    'use strict';

    Ctrl.$inject = ['$scope', 'Auth'];
    function Ctrl($scope, Auth) {
        // some code...
    }

    angular.module('MyModule').controller('MyCtrl', Ctrl);
})();

Actually, the structure itself:

app/
  controllers/
    auth.js
  directives/
    inputmatch.js
    emailbusy.js
  models/
    auth.js
    user.js
  views/
    front.html
    auth/
      signup.html
      signin.html
  app.js
  states.js
js/
  angular.js
  angular-ui-router.js
  angular-resource.js

Answer 2

The example given by you suits only for the application consisting of one unit. In general, the documentation contains recommendations on the structure of the project.
Divide functionality into modules. Place common services in a separate module. The application module must include your modules and possibly add some custom settings (eg .otherwise for routing) and set the initial state in .run.
A good example of project organization is ngBoilerplate. Although it may seem a little monstrous. For example, I use my version with a similar structure.

Answer 3

Separation into common components and modules with their own structure (template, controller), as in ngBoilerplate , is the best option.