Is this correct for the Directive?

I was tasked with setting up an initial application structure for a large angular application, I came across several blog posts that say everything should be a directive (which I mostly agree with), but I have a feeling that I have pulled this idea too far ...

what I have is basically - when you go to portal

, ui-router will load the portal template from the templates folder, everything inside that actual template <portal-view></portal-view

.. the directive portalView

is basically the entire view wrapped in the directive.


'$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('portal', {
        url: "/",
        templateUrl: "templates/portal.tpl.html"



<div class="container">


portalView directive

angular.module('portal').directive('portalView', function() {
return {
    controller: 'portalController',
    controllerAs: 'vm',
    templateUrl: "/directives/portalView/portalView.tpl.html"


portalView folder

  • portalView
    • portalView.controller.js
    • portalView.js
    • portalView.less
    • portalView.tpl.html

It seems like a good idea in my head, but I can get a tough task when we start adding more apps to the application, but I hope some angular pro tells me this is the best way to do it :)

Any help, tips and links would be much appreciated!


source to share

1 answer

Composing the view and including it in a directive looks like a smart idea to me. This will make it easier to switch to another router if this happens.


not required, if you plan to follow this practice template: '<portal-view></portal-view>'

will suffice. But don't dismiss it if you have plans to use a template to load css and js resources (using scripts in templates is not straightforward, but it is possible), it would fit the scheme quite well.



All Articles