È buona norma utilizzare le direttive per suddividere la logica del controller in angolare?

Question

Ho un controller piuttosto complicato (circa 3K righe di codice) che dimostra la dashboard. Il controller contiene molti grafici, tabelle della griglia e così via.

Ad esempio, ho spostato la logica della tabella di griglia nella direttiva sottovoce denominata wmGridActionItems. Avviso, utilizza ambito padre:

app.directive('wmGridActionItems', ['$rootScope', '$timeout', function ($rootScope, $timeout) { 
     return { 
      restrict: 'E', 
      templateUrl: 'views/grid-action-items.html', 

      link: function (scope, elem, attrs) { 

       // logic goes here 
     } 
     }; 
    }]); 

e HTML:

<div ui-grid="gridActionItemsOptions"       
         ui-grid-auto-resize 
         ui-grid-pagination 
         ui-grid-selection 
         ui-grid-auto-resize 
         ui-grid-resize-columns> 
       </div> 

Quindi, in principale HTML regolatore ho appena scritto: <wm-grid-action-items></wm-grid-action-items>

non riesco a usare questa direttiva altri posti, ma almeno divido il mio controller BIG in diverse piccole direttive che dovrebbero aiutarmi a gestire la dashboard.

Ho fatto qualcosa di sbagliato? È una buona pratica? Ha altri approcci angolari per risolvere questo problema?

EDIT

Questa è la mia $StateProvider per la vista dashboard:

$stateProvider 
.state('sidemenu.dash', { 
        url: '/dshmngr', 
        abstract: true, 
        views: { 
         'content': { 
          templateUrl: 'views/dashboard/dashboard_manager.html', 
          controller: 'DashboardMngrCtrl' 
         } 
        } 


       }) 

       .state('sidemenu.dash.main', { 
        url: '/main', 
        views: { 
         'content': { 
          templateUrl: 'views/dashboard/dashboard-main.html', 
          controller: 'DashboardNewCtrl' 
         } 
        } 
       }) 


       .state('sidemenu.dash.drill', { 
        url: '/drill/:type', 
        views: { 
         'content': { 
          templateUrl: 'views/dashboard/dashboard-tag-details.html', 
          controller: 'DashboardDetailedCtrl' 
         } 
        } 
       }) 

Grazie,

Answer 1

La "buona pratica" che mi sento di raccomandare a voi è il single responsibility principle.

Ogni componente (direttiva/controllore/servizio) creato non deve mai fare più di una cosa. Se si evita questo errore, i componenti saranno molto più riutilizzabili, leggibili e controllabili.

Naturalmente, questa pratica è non solo per angolare.

One rispetto che, io ti consiglierei di:

• Evitare di mettere tutto il codice attività in controllori, e di utilizzare invece servizi (o fornitori). I servizi sono molto più potenti in quanto consentono di utilizzare il sistema di iniezione a dipendenza angolare.

• Le direttive devono contenere solo la manipolazione DOM.

angolare direttiva/Controller/servizio è gentile di un modello View/ViewModel/Model. Cerca di tenerlo a mente.

Modifica: Ognuna delle vostre direttive può avere un controller. È possibile inserire direttive all'interno di un altro modello di direttiva e quindi utilizzare l'ultimo parametro della funzione di collegamento (controllers) e il parametro require per la comunicazione tra le direttive.

Esempio: (CoffeeScript) Diciamo che ho un contenitore che può essere all'interno di altri contenitori per sé e può contenere anche un widget:

angular.module('dashboard') 
.directive('dashboardWidget', [() -> 
    restrict: 'E' 
    templateUrl : '/views/dashboard/widget.html' 
    require: ['^^dashboardContainer'] 
    scope: 
     'model': '=' 
    controller: 'DashboardWidgetController' 
    controllerAs: 'DashboardWidget' 
    # default => post link (children already instanciated) 
    link: ($scope, element, attrs, ctrls) -> 
     [parentDashboardContainerController] = ctrls 

     # some very small code (mainly events), the real code is in the controller 

     return 
]) 

angular.module('dashboard') 
.directive('dashboardContainer', [() -> 
    restrict: 'E' 
    templateUrl : '/views/dashboard/container.html' 
    require: ['?^^dashboardContainer', '?^ngController'] 
    scope: 
     'model': '=' 
    controller: 'DashboardContainerController' 
    controllerAs: 'DashboardContainer' 
    # default => post link (children already instanciated) 
    link: ($scope, element, attrs, ctrls) -> 
     [parentDashboardContainerController, ngController] = ctrls 

     # some very small code (mainly events), the real code is in the controller 

     return 
]) 

Answer 2

si sta puntando in direzione giusta. Rompere un controller di grandi dimensioni in componenti più piccoli sotto forma di direttive è la strada da percorrere, ma ti suggerisco di introdurre alcune modifiche.

1. Isolare l'ambito della direttiva e definire i dati che la direttiva si aspetta esplicitamente. In questo modo si può immediatamente vedere quale direttiva dati accetta.

2. Per semplificare i test accoppiare la direttiva con Controller.

Sulla base di queste due proposte, la vostra direttiva dovrebbe essere simile a questa:

app.directive('wmGridActionItems', [function() { 
     return { 
      controller: 'WmGridActionItemsController' 
      restrict: 'E', 
      templateUrl: 'views/grid-action-items.html', 
      scope: { 
       gridActionItemsOptions: '=gridActionItemsOptions' 
      } 
      link: function (scope, elem, attrs) { 
       // DOM manpulation (if needed) goes here 
      } 
     }; 
    }]); 

app.controller('WmGridActionItemsController', ['$cope', '$timeout', function ($cope, $timeout) { 
    // logic goes here 
}]); 

Si potrebbe quindi chiamare sopra direttiva come:

<wm-grid-action-items grid-action-item-options="gridActionItemsOptions"> 
</wm-grid-action-items> 

io suggerisco di leggere anche questo ottimo blog post che spiega in dettaglio "Motivo del componente".

Si noti inoltre che la condivisione di un modello specificandolo esplicitamente quando si definisce un ambito isolato non è l'unico modo. Un'altra alternativa per la condivisione di dati sarebbe ad esempio un modello come servizio (vedere related reading).