Angular Projektstruktur (Ordner, Routen, Dienstleistungen, etc.)?

Question

Wie sollte der Leitfaden für die Entwicklung von großen (Enterprise) eckigen Web-Anwendung sein?

• Ordnerstruktur
• Die Routen für mehrere Ansichten
• Module, configs, Dienstleistungen, Richtlinien, Controller und persönliche Javascript-Dateien.
• Benutzerdefinierte Filter, Ansichten (html)

Wenn die Verzeichnisstruktur wie folgt aus (und Ihre Anwendung ist groß) sieht sollte ich so modularisieren? :

App

• controllers.js
• filters.js
• directives.js
• app.js
• services.js
• index.html

Sollte ich jedes installierte Modul in mein Root-Modul myApp oder in meine Submodule injizieren?

angular.module('myApp',[ 
    'tasks', 
    'documents', 
    'widgets', 
    'customModuleForWidgets' 
]); 

oder

angular.module('widgets',[ 
    'customModuleForWidgets' 
]); 

Die Routen Config an einem Ort (partent Modul) oder in einem eigenen Modul enthalten sein sollte?

angular.module('myApp',[ 
    'ui.router' 
]) 
    .config(['$routeProvider', '$stateProvider', function ($routeProvider, $stateProvider) { 
    $stateProvider 
    .state("widget-areaState", { 
     url: "/widget-area", 
     templateUrl: 'views/dashboard-widget.html', 
     controller: 'widgetCtrl' 
    }); 
    .state(...) // other state 
    .state(...) // other state 
    }) 
; 

Answer 1

Sie können diese guide von John Papa überprüfen. Es enthält viele verschiedene Dinge und eine Projektstruktur unter ihnen. Es ist eine gute Anleitung, um große eckige Projekte mit vielen Anleitungen zu starten. Sie können sich für jeden einzelnen Gegenstand entscheiden, ob Sie ihm folgen wollen oder nicht, aber die meisten scheinen sehr vernünftig zu sein. Er schlägt im Fall der Struktur Ordner für Merkmal vor:

app/ 
    app.module.js 
    app.config.js 
    components/ 
     calendar.directive.js 
     calendar.directive.html 
     user-profile.directive.js 
     user-profile.directive.html 
    layout/ 
     shell.html 
     shell.controller.js 
     topnav.html 
     topnav.controller.js 
    people/ 
     attendees.html 
     attendees.controller.js 
     people.routes.js 
     speakers.html 
     speakers.controller.js 
     speaker-detail.html 
     speaker-detail.controller.js 
    services/ 
     data.service.js 
     localstorage.service.js 
     logger.service.js 
     spinner.service.js 
    sessions/ 
     sessions.html 
     sessions.controller.js 
     sessions.routes.js 
     session-detail.html 
     session-detail.controller.js 

Answer 2

können Sie Projektstruktur wie folgt verwenden.