Wie wird empfohlen, eine gekapselte Direktive und Routing in einer AngularJS-App zu verwenden?

Question

Ich versuche, Best Practices mit einer AngularJs 1.5 App zu verabschieden. Bereits folgende Todd Motto's und John Papa's Stil führt

Die Sache ist die: meine app hat Routen mit ngRoute. Also, das:

function RoutingConfig($routeProvider) { 
    $routeProvider 
     .when('/route1', { 
      controller: 'Ctrl1 as vm', 
      templateUrl: 'partials/route1.html', 
      resolve: { myCoolService: myCoolService } // to abbreviate 
     }) 
     .when('/route2', { 
      controller: 'Ctrl2 as vm', 
      templateUrl: 'partials/route2.html' 
     }) 
     .otherwise({redirectTo: '/route1'}): 

} 

angular 
    .module('myApp', ['ngRoute']) 
    .config(RoutingConfig); 

Ok. So weit, ist es gut. Jetzt

, lassen Sie uns sagen, dass in meinem Weg nach Angular 2, ich die kapseln alles in einer Richtlinie Ansatz verabschieden wollen. Auf diese Weise erstelle ich etwas wie Web-Komponenten mit AngularJS 1.5.

Wenn ich die richtigen Praktiken folgende bin, konnte ich eine Richtlinie für meine route1 erstellen und direkt einen Controller für diese Richtlinie definieren:

function MyCoolDirective() { 
    var directiveDefObj = { 
     controller: Ctrl1, 
     controllerAs: 'vm', 
     scope: { 
      data: "=", 
     }, 
     bindToController: true, // isolated scope 
     link: linkFnc // just declared to abbreviate 
    }; 

    return directiveDefObj; 
} 


angular 
    .module('myApp') 
    .directive('MyCoolDirective', MyCoolDirective); 

So wo soll ich die Controller erklären? In der Routing-Konfiguration? In jeder Richtlinie? Klingt ein bisschen redundandt für mich.

Answer 1

Arbeiten mit dem Beispiel, das ist, wie ich Controller in Richtlinien ala den Papa Style Guide Griff

Wie oben erwähnt empfehle ich die neue Winkel 1,5 Komponentenverfahren in die Vorbereitungen für Winkel 2. https://docs.angularjs.org/guide/component

Check-out

(function() { 
    angular 
     .module('AppName') 
     .directive('directiveName', directiveName) 
     .config(routeConfig); 

    directiveName.$inject = ['$compile']; 

    function directiveName($compile) { 
     return { 
      scope: { 
       customAttribute: '=', 
      }, 
      link: directiveLink, 
      controller: directiveController 
     }; 

     function directiveLink(scope) { 

     } 

     function directiveController($scope) { 

     } 
    } 
    routeConfig.$inject ['$routeProvider']; 

    function routeConfig($routeProvider) { 
     $routeProvider.when('/home', { 
      template: '<custom-directive></custom-directive>', 
      resolve: { 
       user: function($http) { return $http.get('...'); } 
      } 
     }); 
    } 
})();