1

AngularJS' directives are awesome but since each of them makes a request, I'm wondering if it'd be better to minimize the use of it?

Let's imagine I have something like that:

<hero></hero>

<slideshow></slideshow>

<section>
    <sidebar></sidebar>
    <blog-articles></blog-articles>
    <rss-feed></rss-feed>
    <socials></socials>
</section>

In this example I'm making 6 differents requests. Isn't it slowing down the whole application? And what if my controllers are also dyanmically loaded, adding 6+ more files?

To make it clearer, below is how I define those directives.

angular.module( 'module', [] )
  .directive( 'hero', function () {
    return {
      restrict: 'E',
      templateUrl: 'hero.html'
    };
  } )
  .directive( 'slideshow', function () {
    return {
      restrict: 'E',
      templateUrl: 'slideshow.html'
    };
  } )
  .directive( 'sidebar', function () {
    return {
      restrict: 'E',
      templateUrl: 'sidebar.html'
    };
  } )
  .directive( 'blogArticles', function () {
    return {
      restrict: 'E',
      templateUrl: 'blog-articles.html'
    };
  } )
  .directive( 'rssFeed', function () {
    return {
      restrict: 'E',
      templateUrl: 'rss-feed.html'
    };
  } )
  .directive( 'socials', function () {
    return {
      restrict: 'E',
      templateUrl: 'socials.html'
    };
  } );

Given this example each directives makes an ajax call to load the proper html file. Maybe there's a way to minimize the calls?

6
  • What do you mean by making a request? Using directives certainly does not cause HTTP requests.
    – Thilo
    Jun 20, 2014 at 9:33
  • @Thilo isn't AngularJS loading the html template through an ajax call?
    – Gabin
    Jun 20, 2014 at 9:36
  • Depends on the directive, I guess, and how you bundle them together. Could all be pre-compiled into one file.
    – Thilo
    Jun 20, 2014 at 9:46
  • @Thilo I updated my question to include angularjs code example on how I'm currently declaring my directives. Maybe the problem comes from the way I'm doing it?
    – Gabin
    Jun 20, 2014 at 9:55
  • Look at this for inspiration: stackoverflow.com/questions/12346690/…
    – Thilo
    Jun 20, 2014 at 9:58

1 Answer 1

0

I think you are misusing directives here.. Simple ng-include would be enough for only template inclusion.

From angularjs docs:

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

So directives are used for custom elements handling, not template inclusion (though it's possible to do so).

Either way, if using ng-include or custom directive, requests will be made to all files. Is it bad? Probably.. I think you should leave plain html which isn't changing in one file. For dynamic page parts consider using ngRoute or ui-router.

2
  • Well, you're right my example's probably not the best one. However I plan to use directives for custom elements/widgets with their own controllers. I don't think leaving "plain html" in one file is the solution. Separating modules is definetly making the maintenance's job easier.
    – Gabin
    Jun 20, 2014 at 11:09
  • Yes, you are right. It all depends on how complex the project is. If it's big - views and controllers should be separated as much as possible, however, if it's simple one page application witch no custom logic (in your example you only load templates into one file, without any controllers), then making 6 request is just an overkill. My projects have loads of templates and files requests, and I don't think that's a problem, because user always gets exactly what he needs.
    – domakas
    Jun 20, 2014 at 11:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.