SPAのアプリケーション構造AngularJS

Question

以前はサーバーベースのアプリケーションであったMEAN Stackアプリケーションがあり、今はシングルページアプリケーションに変換しようとしています。

私の現在の構造：

• 私がメインビューをロードindex.ejsファイルを持っており、それはng-viewタグが含まれています。
• index.ejsファイルには5つの項目を持つメニューがあります。各項目は、ng-view内に新しいビューをロードします。
• 各メニュー項目は新しいビューをロードし、それぞれに独自のコントローラがあります。

は私の問題：私はngRouteを使用する場合

は、現在、私の機能は、単一のコントローラの下にあるすべては、それは次のようになります。

myCtrl.config(function($routeProvider) { 
    $routeProvider 

     // route for the home page 

     .when('/', { 
      templateUrl: '/test.ejs', 
      controller: 'myCtrl1', 
     }) 

     // route for the about page 
     .when('/proposals', { 
      templateUrl: '/profile.ejs', 
      controller: 'myCtrl1' 
     }) 

     // route for the contact page 
     .when('/bios', { 
      templateUrl : '/test2.ejs', 
      controller : 'myCtrl1' 
     }); 
}); 

これはたくさんの私のコントローラファイルを引き起こしていますコードの私はそれらの特徴に基づいてそれらを分割したいと思う。したがって、各ビューにはそれぞれ独自のコントローラが必要です。

私の質問：

1. いただきましたこのタイプのシナリオのための正しいアプリケーションの構造。私はそうのようngRouteに外部コントローラを配置することができますどのよう

2. ：

   myApp.controller('myCtrl1',function($scope){}); 
   
       .when('/', { 
        templateUrl: '/test.ejs', 
        controller: 'myCtrl1', // INTERNAL CONTROLLER 
       }) 
   
   
       .when('/proposals', { 
        templateUrl: '/profile.ejs', 
        controller: '/directory2/js/myCtrl2' //EXTERNAL CONTROLLER 
       }) 
   

私はいただきました！ここに適切なアプローチを確認していません。私は、私のアプリケーションをモジュラー化し、懸念を分離したい。あなたが説明hereなどのコンポーネント・ベースのアーキテクチャを使用している場合

Answer 1

、次のしていることができます構造：

ルータ：

angular.module('myModule', ['ngRoute', 'dashboard', 'calendar']) 
.config(['$locationProvider', '$routeProvider', 
function config($locationProvider, $routeProvider) { 
    $locationProvider.hashPrefix('!'); 

    $routeProvider.when('/dashboard', { 
     template: '<dashboard></dashboard>', 
     controller: function ($rootScope) { 
      $rootScope.name = "Dashboard"; 
     } 

    }).when('/calendar', { 
     template: '<calendar></calendar>', 
     controller: function ($rootScope) { 
      $rootScope.name = "Calendar events"; 
     } 

    }).otherwise('/dashboard'); 
} 
]) 

とは、あなたのダッシュボードが使用できます

angular. 
module('dashboard'). 
component('dashboard', { 
    controller: DashboardController, 
    templateUrl: 'dashboard/dashboard.html' 

});