angularjs - AngularJS - 单个页面的多个 $http 请求

Question

我正在使用 angularJS 开发一个网页。该页面应显示来自其他服务的内容，该服务将返回 JSON 值。

我正在使用如下所示，

查看文件：

<div ng-app="phonecat">
   <div ng-view></div>
</div>

<div ng-app="tabletcat">
  <div ng-view></div>
</div>

应用程序.js文件

angular.module('phonecat', []).
   config(['$routeProvider', function($routeProvider) {
   $routeProvider.
      when('', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      otherwise({redirectTo: '/phones'});
}]);

angular.module('tabletcat', []).
  config(['$routeProvider', function($routeProvider) {
      $routeProvider.
      when('', {templateUrl: 'partials/tablet-list.html',   controller: TabListCtrl}).
      otherwise({redirectTo: '/phones'});
 }]);

它正确显示电话列表。但它不会触发平板电脑列表。

建议我实现这一目标的最佳实践。

Answer 1

如文档所述，您不能在同一文档中使用多个 ngApp指令：

ngApp（模块 ng 中的指令）使用此指令自动引导应用程序。每个 HTML 文档只能使用一个指令。

您可能想要拥有多个控制器？

Answer 2

鉴于标记：

<div id="phonecatElement">
  <div ng-view></div>
</div>

<div id="tabletcatElement">
  <div ng-view></div>
</div>

使用以下

angular.bootstrap($('#phonecatElement'), ["phonecat"]);
angular.bootstrap($('#tabletcatElement'), ["tabletcat"]);