Question

AngularJS的指令非常棒，但由于每个指令都提出请求，我想知道最小化它的使用是否更好？

让我们想象我有类似的东西：

<hero></hero>

<slideshow></slideshow>

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

在这个例子中，我正在制作6个不同的请求。它不会减慢整个应用程序的速度吗？如果我的控制器也被dyanmically加载，增加6个以上的文件怎么办？

为了更清楚，下面是我如何定义这些指令。

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'
    };
  } );

鉴于此示例，每个指令都会调用ajax来加载正确的html文件。也许有办法尽量减少通话？

Answer 1

我认为你在这里滥用指令。简单的ng-include对于只包含模板就足够了。

来自angularjs docs：

在高级别，指令是DOM元素上的标记（例如属性，元素名称，注释或CSS类），它告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该DOM元素甚至转换DOM元素及其子元素。

所以指令用于自定义元素处理，而不是模板包含（尽管可以这样做）。

无论哪种方式，如果使用ng-include或custom指令，将对所有文件发出请求。这不好吗？可能..我认为你应该保留一个文件中没有变化的简单html。对于动态页面部分，请考虑使用ngRoute或ui-router。

我应该尽量减少使用angularjs＆＃39;指令？

1 个答案: