Using two AngularJS apps in one page

Question

I have two AngularJS apps in one page, I was wondering why the Angular was breaking then realised it was probably because both apps are name the same thing (I'm very new to AngularJS).

What I need to know if what I need to change to differentiate between them if this makes sense.

This is my code with the two apps in separate divs NorthWest and NorthEast.

If anyone could help me with this I would be very grateful,

Thanks, in advance!

<div id="NorthWest" class="desc">

                        <script>

                            var app = angular.module('myApp', []);
                            app.controller('regionsLinks', function($scope, $http) {

                            var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest';

                            $http.get(url).then(function (data) {

                            $scope.data = data.data;

                            });});

                            app.controller('regionsLinks1', function($scope, $http) {

                            var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast';

                            $http.get(url).then(function (data) {

                            $scope.data = data.data;

                            });});



                        </script>


            <div ng-app="myApp">

                <div ng-controller="regionsLinks">

                            <div ng-repeat="d in data">

                            <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2>

                            <img src="{{d.acf.logo}}">

                                <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>

                                <div id="listing-address-1">

                                    {{d.acf.address_1}}, 


                                    {{d.acf.address_2}}


                                    {{d.acf.address_3}}


                                    {{d.acf.town}}

                                    {{d.acf.county}}

                                    {{d.acf.postcode}}

                                </div>

                                <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>

                                <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>

                                <div id="listing-email">Email: {{d.acf.email}}</div>

                                <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>

                                <div id="listing-established">Established: {{d.acf.established}}</div>

                                <div id="listing-about">About: {{d.acf.about}}</div>

                                <div id="listing-mailingaddress">

                                    Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, 
                                    {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}

                                </div>

                                <div id="listing-directions">Directions: {{d.acf.directions}}</div>

                                <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>

                        </div>



                    </div>



                <div id="NorthEast" class="desc">

                        <div ng-controller="regionsLinks1">

                            <div ng-repeat="d in data">

                            <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2>

                                <div id="listing-address-1">

                                    {{d.acf.address_1}}, 


                                    {{d.acf.address_2}}


                                    {{d.acf.address_3}}


                                    {{d.acf.town}}

                                    {{d.acf.county}}

                                    {{d.acf.postcode}}

                                </div>

                        </div>



                    </div>

                </div>

            </div>

yes you can do that, but you have to use [ui-router] for that, in [ui-router] you can use two "ui-view", for more information read ui-router — Maher
– Maher, Commented Dec 16, 2015 at 12:23
Completely thought I had, sorry! I've updated my question with the code — Lucy Brown
– Lucy Brown, Commented Dec 16, 2015 at 12:41
It looks ok. But instead of having two controller you can have two different object to store the northEast and nortWest data. Then you can iterate the object and bind in the view. — Dinesh ML
– Dinesh ML, Commented Dec 16, 2015 at 13:34

Yaron Schwimmer · Accepted Answer · 2015-12-16 12:53:42Z

2

You can have two Angular applications in page, but only one of them can be auto-bootstrapped with ng-app.

You can instantiate your apps (yes, give them different, meaningful names) by bootstrapping them manually.

In your case, I think it makes more sense to have just one application with two controllers, one for NorthWest and one for NorthEast.

edited Dec 16, 2015 at 12:53

answered Dec 16, 2015 at 12:46

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

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

1 Comment

Lucy Brown Over a year ago

Thank you for this, it makes sense. How can I do it with two controllers? I'm really new at this and although that sounds like the best option I have no idea how to implement it!

Dinesh ML · Accepted Answer · 2015-12-16 13:22:31Z

1

For this case, you can simply have one controller, because both div blocks needs same data to bind. Try it

  <script>
    var app = angular.module('myApp', []);
    app.controller('regionsLinks', function($scope, $http) {
      var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest';
      $http.get(url).then(function(data) {
        $scope.data = data.data;
      });
    });
  </script>

  <div ng-app="myApp" ng-controller="regionsLinks">
    <div id="NorthWest" class="desc">
      <div ng-repeat="d in data">
        <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2>
        <img src="{{d.acf.logo}}">
        <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
        <div id="listing-address-1">
          {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
        </div>
        <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
        <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
        <div id="listing-email">Email: {{d.acf.email}}</div>
        <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>
        <div id="listing-established">Established: {{d.acf.established}}</div>
        <div id="listing-about">About: {{d.acf.about}}</div>
        <div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
        <div id="listing-directions">Directions: {{d.acf.directions}}</div>
        <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>
      </div>
    </div>

  <div id="NorthEast" class="desc">
      <div ng-repeat="d in data">
        <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2>
        <div id="listing-address-1">
          {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
        </div>
      </div>
  </div>
</div>

answered Dec 16, 2015 at 13:22

Dinesh ML

93111 silver badges15 bronze badges

6 Comments

Yaron Schwimmer Over a year ago

The URLs are not the same. But I agree this can be done even with a single controller (that makes two calls)

Lucy Brown Over a year ago

They're using a different URL though, so would they not need separate controllers?

Lucy Brown Over a year ago

I've just edited to code to try this using comments from you both, could you see if you can tell what I'm doing wrong? Thanks for your help so far!

Dinesh ML Over a year ago

Yes. You guys right, i wasn't see that URL so gets confused. I will post my suggestion regarding this case.

Yaron Schwimmer Over a year ago

@LucyBrown, I added a code example in a comment to my answer that you should check. You're in the right direction. As a general comment, I can only suggest giving more meaningful names to your controllers and variables.

|

Collectives™ on Stack Overflow

Using two AngularJS apps in one page

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related