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](https://github.com/angular-ui/ui-router) — Maher, Dec 16 '15 at 12:23
Completely thought I had, sorry! I've updated my question with the code — Lucy Brown, Dec 16 '15 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, Dec 16 '15 at 13:34

Yaron Schwimmer · Accepted Answer · 2015-12-16T12:53:42.893

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 '15 at 12:53

answered Dec 16 '15 at 12:46

Yaron Schwimmer

5,327
5
36
59

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! – Lucy Brown Dec 16 '15 at 13:07

score 1 · Answer 2 · answered Dec 16 '15 at 13:22

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>

The URLs are not the same. But I agree this can be done even with a single controller (that makes two calls) — Yaron Schwimmer, Dec 16 '15 at 13:24
They're using a different URL though, so would they not need separate controllers? — Lucy Brown, Dec 16 '15 at 13:24
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! — Lucy Brown, Dec 16 '15 at 13:28
Yes. You guys right, i wasn't see that URL so gets confused. I will post my suggestion regarding this case. — Dinesh ML, Dec 16 '15 at 13:30
@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. — Yaron Schwimmer, Dec 16 '15 at 13:34
@yarons Thank you! That code example was perfect and I understand it much more now, and it's al working! — Lucy Brown, Dec 16 '15 at 13:39

Using two AngularJS apps in one page

2 Answers2

Linked