javascript - 使用 Angular JS 使用组件驱动开发时如何避免多次 http 调用

Question

我们在应用程序中使用 Angular JS，我认为，除了客户端 MVC 框架之外，Angular 的另一大好处是支持组件驱动开发。下面是我的 Angular 代码，它确实简化了我的客户端代码。然而，我们担心 Angular 进行的用于加载这些组件的 html 页面的 http 调用的数量，因为每个组件的 html 都是在他自己的 html 文件中定义并通过引用的。 templateUrl ，当浏览器加载此页面时，Angular 会进行多个 http 调用来加载这些页面。有没有什么办法，我们要求 Angular 避免这些多次调用并将它们集中在一个调用中？感谢快速响应..

 <div id="home-container" ng-controller="homeCtrl">

  <mars-breadcrumb
        on-breadcrumb-update="onBreadcrumbUpdate()" > 
  </mars-breadcrumb> 

  <mars-user-prefrence 
        on-change="onUserPrefrenceChange(newPreferenceMode)"> 
  </mars-user-prefrence>

  <mars-merchant-search 
        on-merchant-search="onMerchantSearch(se10)"> 
  </mars-merchant-search>

  <mars-summary-card > </mars-summary-card>

  <mars-google-map 
        on-map-marker-clicked="onMapMarkerClicked(marker)"
        on-map-clicked="onMapClicked()"> 
  </mars-google-map>

  <mars-merchant-info
        on-display="onMerchantInfoDisplay(merchantLat,merchantLng)"> 
  </mars-merchant-info>

  <mars-location-filter 
        on-city-change="onLocationFilterCityChange(event,item)"> 
  </mars-location-filter>

  <mars-category-container
      on-industry-change="onIndustryChange(event,data)",
      on-channel-change="onChannelChange(event,data)">
  </mars-category-container> 

</div>

Answer 1

您可以扫描所有 .html 模板并将它们放入一个文件中，使用 a plugin通过gulp任务(或 grunt )(或 bower )。使用构建工具会让您的生活更轻松。