CODEWITHSUNDEEP
angularjs
ramprasathrajendran
ramprasathrajendran

Reputation: 111

AngularJS - multiple $http request for a single page

I am devloping a single web page with angularJS. The page should display contents from another services which will return values as JSON.

I am using like below,

View file:

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

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

app js file

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

it displays the phone list properly. But it is not triggering the tablet list.

Suggest me the best practice to achieve this.

Upvotes: 1

Views: 563

Answers (2)

Florian Salihovic
Florian Salihovic

Reputation: 3951

Given the markup:

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

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

Use the following

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

Upvotes: 0

Blackhole
Blackhole

Reputation: 20401

You can't use multiple ngApp directives in the same document, as mentioned by the documentation :

ngApp (directive in module ng ) Use this directive to auto-bootstrap an application. Only one directive can be used per HTML document.

You probably wanted rather have multiple controllers ?

Upvotes: 3

Related Questions