AngularJS的單頁面應用程序 - 如何建模？

Question

我建了一個單頁的應用程序基於此教程：

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

這是他們建議的文件結構：

- 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 

關於HTML頁面的部分是非常簡單 - 一個頁面到每個ng-view。酷...

但script.js在我看來像一個不好的建模。

我真的應該把我所有的js代碼放在一個文件中嗎？

在我看來，這不是模擬它的最佳方式。

如果我的單頁應用程序中有很多頁面，會發生什麼情況？

我將與所有的控制器很長很長一個js文件..

什麼是模擬在angularjs單頁的應用程序的最佳做法是什麼？

謝謝！

// 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

這個詳盡的styleguide建議創建文件夾和根據功能組織您的應用程序。 https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure

我建議你閱讀整個「應用程序結構」部分，它真的幫我安排我的角度項目