Single Page Apps mit AngularJS - Wie modelliert man?

Question

Ich baute eine einzelne Seite App basiert auf diesem Tutorial:

https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

dies ist die Dateistruktur, die sie vorgeschlagen:

- script.js    <!-- stores all our angular code --> 
    - index.html   <!-- main layout --> 
    - pages     <!-- the pages that will be injected into the main layout --> 
    ----- home.html 
    ----- about.html 
    ----- contact.html 

der Teil über die HTML-Seiten ist ziemlich einfach - eine Seite zu jeder ng-Ansicht. cool ...

aber die script.js scheint mir wie eine schlechte Modellierung.

sollte ich wirklich alle meine Js-Code in einer Datei?

es scheint mir, als ob dies nicht der beste Weg ist, es zu modellieren.

Was ist passiert, wenn ich viele Seiten in meiner Single-Page-App habe?

muss ich eine lange lange eine JS-Datei mit allen Controllern ..

was ist die beste Praxis eine einzelne Seite app in AngularJS zu modellieren?

Danke!

// script.js 

    // create the module and name it scotchApp 
     // also include ngRoute for all our routing needs 
    var scotchApp = angular.module('scotchApp', ['ngRoute']); 

    // configure our routes 
    scotchApp.config(function($routeProvider) { 
     $routeProvider 

      // route for the home page 
      .when('/', { 
       templateUrl : 'pages/home.html', 
       controller : 'mainController' 
      }) 

      // route for the about page 
      .when('/about', { 
       templateUrl : 'pages/about.html', 
       controller : 'aboutController' 
      }) 

      // route for the contact page 
      .when('/contact', { 
       templateUrl : 'pages/contact.html', 
       controller : 'contactController' 
      }); 
    }); 

    // create the controller and inject Angular's $scope 
    scotchApp.controller('mainController', function($scope) { 
     // create a message to display in our view 
     $scope.message = 'Everyone come and see how good I look!'; 
    }); 

    scotchApp.controller('aboutController', function($scope) { 
     $scope.message = 'Look! I am an about page.'; 
    }); 

    scotchApp.controller('contactController', function($scope) { 
     $scope.message = 'Contact us! JK. This is just a demo.'; 
    }); 

Answer 1

Dieser umfassende Styleguide empfiehlt, Ordner zu erstellen und Ihre App basierend auf Funktionen zu organisieren. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure

Ich empfehle die ganze „Application Structure“ Abschnitt zu lesen, die meine Winkel Projekte wirklich