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?

Gabin
  • 920
  • 10
  • 26
  • What do you mean by making a request? Using directives certainly does not cause HTTP requests. – Thilo Jun 20 '14 at 09:33
  • @Thilo isn't AngularJS loading the html template through an ajax call? – Gabin Jun 20 '14 at 09:36
  • Depends on the directive, I guess, and how you bundle them together. Could all be pre-compiled into one file. – Thilo Jun 20 '14 at 09: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 '14 at 09:55
  • Look at this for inspiration: http://stackoverflow.com/questions/12346690/is-there-a-way-to-make-angularjs-load-partials-in-the-beginning-and-not-at-when?lq=1 – Thilo Jun 20 '14 at 09:58
  • @Thilo so the solution would be to put all the directives in one file using the script directive and then retrieve them by their id, right? Is it the best way to do it? If not, what is the best way to handle directives' loading? Note: putting all the directives in one file is making the maintenance's job harder so I guess it'd be better to involve a server side solution to compute all the directives and render a unique html file. – Gabin Jun 20 '14 at 11:19

1 Answers1

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.

domakas
  • 1,246
  • 8
  • 9
  • 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 '14 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 '14 at 11:34