AngularJS - multiple $http request for a single page

Question

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.

You have to manually bootrstrap both apps. I had the same problem: stackoverflow.com/questions/16080113/… — Florian Salihovic
– Florian Salihovic, Commented May 3, 2013 at 9:44

Blackhole · Accepted Answer · 2013-05-03 09:45:07Z

3

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 ?

answered May 3, 2013 at 9:45

Blackhole

20.5k7 gold badges72 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ramprasathrajendran Over a year ago

YES. I want to have multiple controller. Can you please guide me how to acheive it?

Florian Salihovic · Accepted Answer · 2013-05-03 09:48:01Z

0

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"]);

answered May 3, 2013 at 9:48

Florian Salihovic

3,9612 gold badges21 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS - multiple $http request for a single page

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related